All posts by Carlos

CiviCRM Dashboard Redirects

CiviCRM 4.6.4 in vagrant with apache.

Opening the CiviCRM dashboard auto redirects to an ISP page. Turns out the site cannot call itself. Vagrantfile has

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  config.ssh.forward_agent = true
  config.vm.network "private_network", ip: "29.29.29.29"

To solve, edit the vm’s /etc/hosts and in addition to the 127.0.0.1 localhost, add the Vagrantfile’s private_network ip:

echo '
29.29.29.29 www.donate.site
29.29.29.29 donate.site
' | sudo tee /etc/hosts > /dev/null

Theme from scratch vs WP-Types Toolset

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:

Before

Load time: 1.95s
Memory: ~58MB
SQL Queries: 93

The original load time was actually 3-4seconds! The 2seconds here is after I turned off some toolset features.

After

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!)
Memory: ~25MB
SQL Queries: 40

Save A Rescue Contest Plugin

About

This online app supports the mission to help dog/cat lovers discover rescue organizations.

Request

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

  1. Use existing website architecture, to program the contest as a WordPress plugin.
  2. 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.
  3. Equip contestants to share their entry with a personalized link through several social media outlets.
  4. Contain the entire contest into a single landing page for contestants and voters.
  5. Show the Rescues/Shelters that have signed up for the contest & how many votes they have every day.
  6. Clean
  7. Powerful
  8. Modern

My Solution

  • 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

Original Contest

The original contest was a simple form.

New Contest Plugin

My custom plugin was interactive by displaying up to the minute votes. The plugin further allowed multiple contests to be created as needed.

The Mansion

An unfair look at the products presented at the Apple Special Event of September 2015.

iPad Pro. One step closer to converging desktop and mobile devices?

tvOS. Can musicians create an iOS app containing a music album?

How can the music industry be impacted?

How does copyright play part?

Does the musician receive 100% profit in this scenario along with Apple?

Can indie movie producers push movies through tvOS apps? What is the response from Comcast, Sony and CBS?

In both music and video scenarios, Indie artists and amateur producers have the method to distribute their original content to a global audience without regard or consideration about country restrictions. Although, pioneers such as Comcast, Sony, CBS etc. hold valuable assets such as actors and actresses, indie artists can match primetime television quality.

More questions to consider:

Is an album app competing with Apple’s music service on the same device (contradiction).

What about the cost of keeping the movie/music app updated for newer versions of iOS?

How does microdata play any part in Technology while Siri AI can recognize and search for all kinds of content and information, again: can Google play in this?.

Suppose for a moment that opening apps on a television will replace a web browser (airBNB, clothes shopping apps).

Siri, meet Sherlock search engine.

Games, complementing game consoles Nintendo, xbox, Wii etc.?

How can tvOS assist social? Game Center? Sharing?

Orchestrated Story #1

Microsoft says to his son, The Surface Pro to stay at home while Dad goes to a work meeting.

A Mansion houses roommates Apple, Timer Warner, Sony, CBS Corporation, 21st Century Fox, Viacom, The Walt Disney Company, and Comcast.

Under the roommate’s watch is a delightful library and a fashion center for shopping. The courts for sport have Crossy Road, GuitarHero and more.

Commonly, viewers such as myself and you view through a “Window” at the theatrical plays composed by the roommates.

Apple creates a gatekeeper (tvOS) and hires a butler (Siri). The Mansion is open to the world to host audio/video performances, books, sports etc.

The roommates get nervous at the thought of being displaced. Comcast calls up his buddy NBC Universal.

The city takes note of the utility pipes (APIs) that pave way into The Mansion.

RE: SEMANTIC MICRODATA

Hi Micah,

Thank you for sharing your thoughts on microdata in Episode 7 of Design Vs Dev.

I have a few theories as to why we need to use microdata. In a nutshell, Microdata encourages Google’s vision of searching for information. For example, if every food recipe website has microdata defined content, then Google can easily help a user search for requested information.

Also, Google currently supports a few microdata types (less than 10 at the time of this writing). In Google’s defense, it makes sense for everyone to adopt microdata in bite size pieces vs. a dumping of a complete new scheme.

Microdata is a stepping stone in making the web replace traditional operating systems (theory #1).
Extreme example: The 9/11 Commission Report states that we should prepare our game to counter any future attacks. Think about how useful the web can be as our main desktop (our files and information living in the cloud). If terrorists at all use technology to communicate (talking over the phone [voice recognition transcribes] or e-mail messaging), then the microdata in a web chatting app can make it easier for Skynet to search through microdata tagged communications between drug cartels or whatever other evil.

Microdata can encourage the production of useful and unique information (theory #2), ultimately google can be one front face of the entire internet without people having to visit individual websites (think how Google can be the next social platform).

Reminders:
We’re all very social animals.
We make technology work for us.
Collective intelligence (why have multiple recipe websites or multiple websites for quotes? repetitive vs. unique and innovative knowledge for everybody)
Knowledge is power.
Marcel Masse’s quote is a fact:

The more the world is specialized the more it will be run by generalists.

California Driver License Smartphone App

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:

Yosemite Notifications — Annoying

Mostly a rant here. So Apple introduced “pop-up” notifications on the desktop O/S. The new notifications appear distracting to the user because they clutter the overall UI experience of the OS GUI. These notifications are not new to the OS, but they do certainly appear for new reasons like Software Updates.

Additionally, these notifications are annoying because they remind us of Microsoft’s introduction of the taskbar notifications (Notification Tooltips) in Windows XP.

OS X Yosemite introduces a GUI from iOS. A more subtle method of notifying users of updates could be with a numeric badge in the top right of the screen. Noticeable yes, less intrusive as well.

Screenshot showing notification method introduced in OSX Yosemite side-by-side with Microsoft’s Windows XP taskbar notification:

Screenshot showing a less clever, although practical way of visually cuing the end-user of notifications:

QvoGente.com Website

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.

Website requirements:

  1. Open-source foundation (for community on community platform),
  2. Multi-city functionality,
  3. No-brainer registration for participation (posting),
  4. Mobile-first streamlined approach,
  5. Colorful and Spanish-feel (design),
  6. Design layout similar to cork boards commonly found outdoors of Mexican stores and supermarkets,
  7. Display tweets from all of Twitter using specific keywords,
  8. Display specific videos from YouTube,
  9. Social Media share buttons to share almost any posting or page,
  10. City-specific header/banner images

Solutions:

  1. Future-proofing the maintenance (considering developers with little to advanced skills) of the platform foundation geared towards choosing WordPress Multisite.
  2. Each city is under a site within a subdomain, eg: Sacramento is found at http://sacramento.qvogente.com/
  3. 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.
  4. Considering the target audience, the website CSS’s design is responsive from mobile width and auto-adjusting as the screen size increases.
  5. Color Palette:
    █ #fff9e3 █ #dd3333 █ rgba(42, 77, 97, 0.8) █ #a1d274 █ #1e73be
  6. 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’.
  7. Utilized Twitter’s API to request tweets using specific hashtags and keywords such as #NOT1MORE etc.
  8. 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.
  9. Made html-only share buttons, again reducing the amount of external calls to Facebook, Twitter, Linkedin etc.
  10. 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: