Theme from scratch vs WP-Types Toolset
Published: Feb 05, 2017
TLDR; Find someone to make a wordpress theme for you from scratch.
Boss told me to make the website entirely with Toolset. I did. Here was the result:
Load time: 1.95s
SQL Queries: 93
The original load time was actually 3-4seconds! The 2seconds here is after I turned off some toolset features.
Took a weekend to make the wordpress theme from scratch, including the custom post types, for loops making the sql queries, the image slider carousel using slick.js (which is awesome BTW, check it out). Because I also dropped the css bootstrap framework, the CSS filesizes were significantly lower too.
If I remember correctly: the wp-types toolset plugin’s slider (we used for the carousel) would make the image files on the fly for each pageload! We were getting out of memory issues on a shared hosting plan!
Load time: 0.62s (hello mobile users!)
SQL Queries: 40
Save A Rescue Contest Plugin
Published: Jan 01, 2015
This online app supports the mission to help dog/cat lovers discover rescue organizations.
Design a contest ~ to get all the Rescues & Shelters to enter and ‘pit’ against each other. The contest shall be launched on the company’s official homepage.
Requirements & Expectations
- Use existing website architecture, to program the contest as a WordPress plugin.
- Rescues & Shelters begin participation as ‘contestant’ using an online form to submit their entry in its entirety consisting of contact details, short essay and organization logo.
- Equip contestants to share their entry with a personalized link through several social media outlets.
- Contain the entire contest into a single landing page for contestants and voters.
- Show the Rescues/Shelters that have signed up for the contest & how many votes they have every day.
- Used existing website architecture, I programmed the WordPress plugin in procedual form.
- Public form collects contestant’s contact details and allows the upload of a logo/image; if no image is provided, one image is chosen automatically for the contestant from five predetermined images.
- Each contestant entry is submitted to the website as ‘pending’ and then the contestant can share through Email, Facebook, Linkedin, Pinterest, Twitter and Google.
- The contest landing page features from top to bottom:
- Save A Rescue Logo
- Facebook Like Button for Save A Rescue Official Facebook Page
- ‘Contest’ Banner
- The contest’s featured image (configured from WordPress back-end)
- Social Media buttons
- Contestant entry form
- Numeric tabs for navigating through all entries (max 40 per page)
- The participating contestants with number of existing votes and a vote button
- Footer showing contest sponsor, official rules and LUCS plug (all configurable in the WordPress back-end)
- Facebook Like button for the current contest
- Cookieless measure for preventing vote manipulation
- Mobile-first design (responsive) ~ screen resolutions >1600px
New Contest Plugin
California Driver License Smartphone App
Published: May 23, 2015
Smartphone app of the Spanish version of the California Driver License for constituents under AB60. Most of the applicants under AB 60 are illiterate. This audiobook allows applicants to take an oral exam that is offered by DMV. Included as well, Spanish speakers will learn to read as text highlights and the narrator reads aloud.
This app for public consumption was an exciting challenge. I understood prior to making the app the high number of its consumers are technically illiterate and they were mostly on affordable Android devices.
Materials provided for the project:
HTML files and/or PDF
MP3 audio files
Required app features and functions:
- Splash screen
- Table of contents
- Synchronized (highlighted text + audio) per paragraph
- Reflow text (with adjustable text size) Scrolling page is fair
- GUI: Stock Android theme (Holo)
- Meets Google Play app submission requirements
Each line will take the listener to that section and the app will begin to automatically play the audio for that section of the book.
Screenshot of source material, HTML formatted website online shows the text-only book:
Screenshot of initial planning for the Graphical User Interface. Also demonstrated is the organization of chapters and subheadings:
Screenshot of the app actively published in the Google Play Store with 1,000-5,000 installs within the first month and 4 star satisfaction:
Published: Jan 26, 2014
This project’s expected functionality and deliverables:
Qvogente.com is an online place to post at the local level; eg Which walmart parking lot in any given city serves the best tamales. A website similar to Craigslist but now specifically Mexican-oriented.. For example, where to stay if you are traveling, what is happening in each city.
- Open-source foundation (for community on community platform),
- Multi-city functionality,
- No-brainer registration for participation (posting),
- Mobile-first streamlined approach,
- Colorful and Spanish-feel (design),
- Design layout similar to cork boards commonly found outdoors of Mexican stores and supermarkets,
- Display tweets from all of Twitter using specific keywords,
- Display specific videos from YouTube,
- Social Media share buttons to share almost any posting or page,
- City-specific header/banner images
- Future-proofing the maintenance (considering developers with little to advanced skills) of the platform foundation geared towards choosing WordPress Multisite.
- Each city is under a site within a subdomain, eg: Sacramento is found at http://sacramento.qvogente.com/
- Front-end posting first requests email and password from the user to sign-up and immediately takes him/her to a form for Publishing an Ad to any single city in the nation.
- Considering the target audience, the website CSS’s design is responsive from mobile width and auto-adjusting as the screen size increases.
- Color Palette:
█ #fff9e3 █ #dd3333 █ rgba(42, 77, 97, 0.8) █ #a1d274 █ #1e73be
- Considering the audience’s conventional method of posting ads outside of Mexican businesses, the website layout features an ‘online cork board’ with sections in a three-column layout categorized into distinct boxes such as ‘Events’, ‘Neighborhood Announcements’, ‘Financial Literacy’, ‘For Sale’, and most importantly ‘Local Civic Action’.
- Utilized Twitter’s API to request tweets using specific hashtags and keywords such as #NOT1MORE etc.
- The default widget provided by Google YouTube makes too many external requests, so I opted for using a .js that first pulls a video’s thumbnail from Google servers to display on this website. Only when the image thumbnail is clicked on by the user will the widget make its usual external calls. This reduced the website load time tremendously.
- Made html-only share buttons, again reducing the amount of external calls to Facebook, Twitter, Linkedin etc.
- Each subdomain that hosts a specific city in the nation displays in its header/banner a distinct image (for example the page on Sacramento shows the city’s iconic Tower Bridge across the Sacramento River while each other city subdomain displays a self-iconic representational image of its own city).
Snapshot of Homepage: