WordPress-portfolio:

To further validate my technical ability, you can check out my tangential PHP/MySQL coding samples<click-here>. Yes, I also write code, and I’m able to use almost every built-in function in PHP.

H3S1: Case Study #1: Dr. Jaswinder Singh, maccsp.com:

Hu: In April 2020, Dr. Jaswinder Singh, a prominent # oncologist in the Kansas City, Missouri area, contacted me to create a practice website, that entirely replaced, his previous website, which was out-of-date. Dr. Singh had specific requirements, in terms of design, team page, and patient contact, that led me to recommending the MediCenter theme, which he purchased from Theme Forest, for $75. I was able to install the theme, on the WP-core install, after helping Dr. Singh select, and purchase, a domain name, and set up the server, from scratch. This was a low-cost solution, that ultimately reduced development time, by 75-90%. An initial version of the website was completed in 20 hours, and another 20-30 hours of updates were made, to create support for additional locations, cancer specialties, and an internal communications portal, not displayed. We also trained Dr. Singh’s team to continue updating the website going forward. Note that cosmetic changes to the site have been made since we stopped support in June 2020, but the theme, and WP-core install, remains.

A key requirement was the creation of a profile | template for each doctor, and n-p, under Dr. Singh’s group practice # The MediCenter theme provided several base options to choose from, and I was able to customize it, cosmetically, to Dr. Singh’s liking. Each profile page contains a photo, a list of specialties, and a list of hyperlinked locations, which users can click on:

Content on the site is interleaved; on the page for each location are the links to profile pages, for each doctor, who works at that location, and on the page for each doctor, are the links to each location they work at. This was an important feature for Dr. Singh, as this provided necessary, life-saving details, for patients to be able to schedule an appointment. Dr. Singh rotated around these hospitals, which are regionally-distributed, on a scheduled basis. I had to intake all of this information about his practice, in 3 phone calls, totaling 2:15, during the project. Dr. Singh provided 0 written documentation for this project, so the entire website was created based on my recollection, and notes from these phone calls #

I also performed some basic content scraping for Dr. Singh, in order to create a disease database, based on data from a link that he provided, on cancer.gov:

We also set up a blog, in which Dr. Singh can post practice updates. A next idea for this page, was an RSS feed that could automatically pull updates from medical journals.

The contact form will automatically take user inputs and package them together, into an email, associated with Dr. Singh’s practice. We prepared training documentation for his administrative staff member, and also collected team photos, which they captured fresh for the website. We also conducted research for locations of the hospital names provided by Dr. Singh, and displayed this data, accurately on the website #

H3S2: Case Study #2: Hamilton Fish, publisher, washingtonspectator.org:

H4S2: On the homepage, we placed a persistent | banner with an eye-catching red icon, with custom-CSS, that allows users a quick redirect to the donate page. This campaign can be customized, whenever Ham and his team are running a custom subscription campaigns, a few times per year.

H4S3: Theme installation: as with MACCSP, we deployed a custom WordPress theme, from Theme Forest, that was purchased for <$100, for this project, in the relevant category, News. The theme came with a 1) posts page, 2) a category page, and 3) a home page, with multiple panels, in which different post categories could be plugged in. We had to customize the homepage template, in order to satisfy Ham’s specific requirements, including 1) a customizable “Letters to the Editor” section, which we coded with custom HTML/CSS, 2) and a sidebar registration prompt. The footer was another area, that Ham had very specific requirements, and we went back and forth 4-5 times, to perfect the design in terms of font selection, colors, and spacing<margins/padding>.

H4S4: Homepage design:

The pre-built theme came with a fairly competent homepage design but again, Ham had some specific requirements 1) he wanted the entire header, including the logo, to follow users, as it scrolled down the page #. We used custom CSS to complete this part, with a logo image, provided by Ham’s team. the page was also custom-styled, to display certain WordPress post meta-data, and the colors of the highlight lines, adjusted, to match Washington Spectator’s branding colors. Overall, Ham was reasonable with the requests, and we informed him on what kind of changes would be over-stretching the purchased theme. The result was a website that looks custom, and suitable for branding, but still functionable, and loading as expected, optimizing conversion rates #

H4S5: Category page:

The category page automatically pulls all posts, in reverse chron, from each post category, from the WP-database. The rest of the page, including sidebar, matches the homepage template.

H4S6: Post page:

Hu: The post page was designed after extensive back and forths, about 1:30 and several emails, with Ham’s team, about the team’s goals; obviously, this is the page category that users spend the most time on, and I had some familiarity with the general dynamics of a content-heavy website, from my experience with Distractify.com, which had 1,000x as much traffic, as Washingtonspectator.org. Ultimately, we decided on a page with no sidebar, drawing attention to the content, and this would not affect mobile users, who cannot see the sidebar, anyway. The metadata, displayed at the top of the post, was customized, by editing the theme’s template files, directly. We were also able to # add social icons to 1) share the post and 2) access Wash-Spec’s social profiles, at the top. Note that a WP-post template is highly customizable, and it inserts a single content area, at some segment, and this content area, is alone retrieved from the database, per post; the rest of the page, is standardly-programmed; all data from the blocks of Gutenberg feeds into just that content area.

H4S7: Site | migration: A particular challenge that I faced on this project, which I did not, with Dr. Rafiepour or Singh, is migration to a live domain # Obviously, the website’s server would be swapped out in its entirety, but we were not able to progress with development 1) on the server that was serving up the live website, while development was ongoing, or 2) with a server that serves to the live domain. The solution was to establishing a staging | server, at staging.washingtonspectator.org, and a second instance of the website, where we could install the new theme, and test. 2 weeks of development(!) was completed, before the site was ready to go.

H5S1: Database | migration: There was a question # as to whether the content in the database, which was generated while the website was operating under the previous theme, would continue to be displayed, without errors, in the new theme. Fortunately, there were minimal issues, but we did have to test several hundred pages, as the magazine had over a decade of historical online posts, to make sure that nothing was broken, in the posts. Moreover, we had to check the metadata, including author name, and post categories. WordPress standardizes the wp_posts table in their database, and does not allow, by default, changes to the column structure, so a new theme is able to extract from those same columns, without errors, and most themes, by default, do not edit the WP.default-db,str<WP.MIC-H2S4>

H5S2: Last minute updates: Just prior to the deployment, we had to manually update the new server, and db, with the latest | posts; we did ultimately decide to swap out both the server, and the db, although swapping out only the files, on the existing db, was another option. The deployment was scheduled for Thursday AM EDT, as this was determined, via Google Analytics, to be the lowest traffic time for the site. I worked late into the night, to deploy, and check the site, with a total downtime of <2 hours.

H4S8: FAQ:

The FAQ is not a dynamic | content post, but rather, a static | page, where there’s only one instance # This was created with a page template, that includes the sidebar, and added as a header menu item.

H4S9: Adoption of agile development, scrum: During the project, I coached Ham and his team on the principles of agile development, which I was professionally trained in, at Distractify.com, working with a dev team 10x the size. Clearly, my prior experience gave me several advantages in this project, compared to solo developers.

H4S10: Author pages:

Author pages were generated from the author metadata, associated with each post, from the db, and followed an analogous | logic, to the category page. Fin.

H3S3: Case study #3: Dr. Roxanne Rafiepour, Psy-D, divi theme builder, drroxannerafiepour.com:

H4S1: Block homepage design:

Hu: After meeting with Dr. Rafiepour for an hour over Zoom, we decided upon a project to create a new website for her practice; previously, she did not have a website. She sent over 3-5 examples of other therapist websites, including from the Bay area; I took into account that her clientele consisted largely of yuppies who worked in Silicon Valley, and recommended a minimalist design, that looked like it could be in a boutique art museum, with a color palette, somewhat pastel, chosen from a color generator. I found a stock photo that fits well, and inserted that, in a wide block, above the trio of 3. On mobile, the 3 horizontal blocks will stack together, vertically. Custom buttons are inserted, in each block, to link to a different patient-page.

H4S2: About page:

Dr. Rafiepour wanted a custom element on the about-page: the slightly offset green strip, overlapping slightly with her profile photo, which I was able to build, in Divi, without custom-CSS. The website contained a small image gallery, where all the images are hosted natively, and compressed, to prevent any detriment to loading times.

The about page contains a simple HTML HREF :mailto, that pops open, an email composer. The page also has a custom header, relative to the other pages, and this was built with Divi.

H3S4: Woo-Commerce:

// cite shipping label plugin dev, honest

H4S1: How to do a $1 WooCommerce check-out test:

X.ref<WP.MIC-H2S8,H3S2>

H3S5: Gutenberg, WYSIWYG editors:

// cite H2S2

H3S6: Custom plugin development:

// cite shipping label plugin dev, honest

// I haven’t built a plugin, but I go to meetups:

H3S7: Site editor, template management:

H4S1: Full-site editing theme:

H3S8: Plugin installation, settings, compatibility:

H3S9: Block library:

// import from blog:

H3S10: Aesthetic considerations:

// import from blog, as well; display some samples, recreation, show pattern templates #2-bucks this website’s homepage, how many websites don’t matter, find granular options

H3X: Relevant blog posts:

Hu: This section is a directory, and a list of summaries, of blog posts I’ve made on this site, that are relevant, to demonstrating my technical understanding, since not every detail of past completed projects can be communicated, simply with HTML/CSS screen captures #

H3X: PHP backend walkthrough:

Below is the first episode in a series of technical tutorials in PHP development. Obviously, this is one layer deeper, in the web stack, from non-coding WordPress, but since WordPress is also written in PHP, developers who have coding background, obviously have an advantage. This video validates that I understand, on a code-basis, the changes that I’m making on the front end, which optimizes the chances that the changes will lead to a fast page, be scalable, and compatible with future changes.

H3X: Total-post<fbno>, personal intro, WP:

<Upwork, a-r>: Asking me to build a cookie cutter website, with a template, for $1,000, and 24 hours delivery, which I can do, under severe time pressure, but frankly, it will not be the best use my abilities, or your funds.

Some background: WordPress, as I established in my primary, is an evolving technology, in still a young, nascent Internet, and its growth direction is piloted by a Silicon Valley unicorn, Automattic. The 2 established vectors of growth in this industry are 1) increased users and 2) increased user engagement. Being as the WordPress market is saturated with new users, Automattic’s feature development, over the next 5-10 years, will all be targeted at enabling you to 1) retain users on your website, for move clicks per visit, and time per session, as well as sessions per day 2) convert more $ per user, and per minute spent, on your website.

In this ecosystem, there are both highly interoperable, and well-written codebases, with deep, scalable functionality, and 3rd party hacks, which may, at any point, become outdated, with the next WordPress update. Both will be listed in the plugin store, and the hacks are designed to trick your first impression, into perceiving them as similar replacements, to the real “technologies”. Among the examples of real technologies, in my view, are 1) Gutenberg, WordPress’s core WYSIWYG editor, 2) WooCommerce, a product of Automattic, that enables an Amazon-style online store and 3) Site Editor, another WordPress core product, that is still in beta, but will certainly be a staple, with an expanded feature set, over the next few years. Presently, about 150 themes(ref: WordPress Meetup ’22) are enabled with “Full Site Editing”, ie, the Appearance tab has been replaced with Site Editor, while the rest, several thousand, are not. Supporting Full Site Editing is an engineering effort on the part of the themes, and it’s a wise decision to jump on this boat as early as possible, even sacrificing some near-term features, because this will cut you ahead of your competition, in 6-12 months.

I keep a keen eye on such developments in the industry, as a 3x per week attendee of various online Meetup groups, which offer free Zoom-based support, and discussion, of industry trend, and I can recommend to my clients, the best ones. Moreover, I bughouse in my experience as a Series-A startup founder to evaluate plugin developers at the level of financial statements, corporate conduct, and terms of service, and this added vector of analysis, gives me a superior ability, to weed out the pretenders.

As I mentioned in my primary, I am one of a small handful of developers on this website that built a website over 10 years ago, that still runs on its original stack, to the tune of several million monthly users, sustained. I will bring not only hands-on, ground level, coding expertise, as well as a proven Series-A, scalable testing suite(see testing-documentation, in my technical writing portfolio), and rigorous technical documentation to your project, but also high level architectural decisions, to help you select a small handful of very useful plugins, that are sure to be part of your stack, for years to come. At Distractify, I oversaw several significant dev-team transitions, involving 20+ developers, and the acquisition/hire of Maarten Schenk, an og-Perl-dev, so I’m very used to setting up a project ahead of time, for handoffs. In other words, every headache you’ve experienced as the tech manager of a small business, I’ve experienced, tenfold, and have an academic solution to the problem.

In addition to WordPress design, which I also have academic experience in, as a former UX researcher at Joya Communications(see-work-experience), I’m also a competent PHP coder, and I can produce 300 lines of high quality code full-time, in a week. See my personal-dash portfolio item, for how much functionality 300 lines of my code, equates to. This can be utilized for custom plugin projects, functions.php edits, and custom CSS styling, to add an additional depth of functionality. I’m also familiar with AAM plugin, which can enable you to add customer login, private content delivery, and paid subscription tiers, in conjunction with WooCommerce.

Looping back to the point about my talents: the best way to use me is to ask me to build something that not only works now, but is scalable. At Distractify, I did both: in our second month, we reached 10-mn+ visitors, and the company has 20 employees, based in New York, as an A-list media, with celeb interview access, to this day. That means longevity and boots to the ground are not mutually exclusive, so don’t be swindled. I have proven experience, that I can take you from your very first domain purchase, and WAMP installation, to personally hiring, and reviewing engineering team candidates, up to a full-time team size of over 25 employees, in just that department, and I can probably go further, with the right co-founder as a partner.

H3SX: WordPress.materialinchess.com:

H4S1: The problem:

Having worked in IT since late 2008, and being exceptionally active in the founding of new companies, and internal projects, I found a resume to be limiting, in particular, because much of my work contains interactive, and video-based, including long-form, elements. Therefore, it was logical to launch my own portfolio website, as well as blog, so that I could adequately express, under the control of my own domain, the breadth of my experience, as well as the interconnectedness of it. In truth, in my career, I started out as a college | dropout, relying heavily on my upbringing in mathematics, having started uni-level courses at age 12, chess study, playing in local and state level adult competitions to propel me forward, against, frequently, competitors over twice my age, in the founding of Distractify.com<see-portfolio>. I became good at “learning on the fly”, and borrowing thinking techniques that I learned from other fields, including the 20+ academic subjects in which I have intro course credit, to gain an initial footing. Now, despite being much more specialized, in WordPress, PHP development, and technical writing, I continue to have a very lucid mind, threading among multiple bodies of documentation in order to achieve both a granular, and “10,000 foot view”, of architectural decisions.

I needed to build a website that had 1) rich media functionality, both embed, and native 2) a solid typography set, to create long-form blog posts using my H2/3/4 categorization method<technical-writing>, as well as references 3) a deep network of internal hyperlinks, analogous to Wikipedia 4) the ability for users to log-in, so I could deliver sensitive data, such as resulting code for clients 5) modern design 6) the ability to create multiple templates, 6) checkout functionality, so clients can pay directly on my site, and for gathering donations, for my open source contributions. The site also needed to be easy to maintain, so that I could fit running a blog into my already busy, 12 hour per day minimum working schedule. Finally, it had to be fast, because when I do update it, I am making a flurry of several hundred to thousands of micro action changes, and even an additional second or two of loading time, will cost me hours on the day #

H4S2: The solution:

<WP.MIC-H2S3,H3S2.H4S2>: The navigation | block allows you # to load pre-made | menus into the header, or any other part of the site, as well as to extend an existing | menu, replacing the customization functionality of pre.Site-Editor, and create a new | menu, and manage your stable of existing | menus. The navigation block functionality, in conjunction with template parts, and the Site Editors<WP.MIC-H2S2>, permits site owners infinite | flexibility, when it comes to installing different | menus on different | pages of the website. Case | study: H5S1: This rubix–cubing<r: IM John Bartholomew> of the WordPress core dispels the need of an additional plugin, conditional menus.

Hu: I used a full site editing theme, as an early adopter of a soon-to-be WordPress-ubiquitous<fbno>, to create multiple page | templates, each with a different | header, and the headers were differentiated not by visual | design, but by what was displayed in the menu. For example, users who are logged in<see-below> should see certain menu items, that logged.out-users should not. This illustrates that there is a higher order of complexity in UX design, when considering multiple experiences depending on $_SESSION status. Submenu items could also be added, as a dropdown[D, 4]

<WP.MIC-H2S4,H3S3.H4S8>Hu: The following solution will provide all the requirements, without the need of additional plugin | installation: H5S1: We will use 2 levels of redirection, for the homepage, as, in our implementation, each role’s or each user’s homepage, for logged.in-users, at every | tier, provides all the links, to content, that is uniquely accessible to them. H5S2: The home link, in every | menu, will link to home–outH5S3: The logged–users, at every | tier, will be URI-redirected, by their elicitation of home-out, to a unique | homepage; this will allow them # to never see home–out, during their logged–experience #, and always be directed to their unique | homepage, when they click home, anywhere H5S4: Each unique | homepage will have a unique | menu that links to all visitor items, and, in-addition, additional | items, even in a different | hierarchy, that are unique, to that class, and above # H5S5: The problem is that users will be defaulted back to the visitor menu when they visit any link that is also accessible to visitors #, and must know, from use, that returning home, is their launchpad. UX analysis: Should be OK, because as a login user, you don’t need to go to the about page anyways, and I will simply establish a paradigm that all of the unique links that you need to click on will be linked from home – free, and every unique page that you go to will link back to home – free. H5S6: This paradigm can also be established on an individual user basis, where a user can be assigned a unique | page, home – Cole, and your home – Cole page will contain all of the unique links that you need to click on, and I will establish a home – out redirect to home – Cole.

Blocks used: paragraph, code, YouTube embed, Twitter embed, link embed, columns, navigation, header, image, quote, table, audio, file, page break. [D, 1]: Code blocks allow for a stylistic differentiation from paragraph text, and does not corrupt any HTML injections # [D, 2]: A comedy post: header styles can be specifically programmed in Edit Site->Styles->Typography, and changes will affect all pages, that share this template. A hierarchical header setup creates a nice visual guide, along with my H2/3/4S system, for cutting up the content into phylogenetic categories [D, 3]: The column block allows me to display 2 sub-blocks side by side; in this case, a paragraph block, parallel to an image block, for some visual variety, and do suggest a relationship between the 2 parts. Column blocks are responsive, in that the row will be separated vertically, when the screen size collapses.

Putting it all together: the following shots depict the astounding level of variety that I can generate for my in depth technical tutorials:

References:

https://www.upwork.com/freelancers/~0156af6785cb097391?s=1110580755107926016