Blog

Adding CSS framework classes to PHP generated Code

Integrating HTML into WordPress (WP) for a custom WP theme is fairly straightforward…until I went to style my creation using CSS. I was looking at my navbar which I wanted to style differently. To achieve what I wanted I consulted the documentation for the CSS framework I am using in this project which is Materialize. The documentation indicates this change is easy, I only needed to add a class.

I tested the class quickly using my developer tools in Google Chrome. The desired outcome was achieved and went to my header.php file to add the class. It was different because it is really easy to add classes to static pages and my previous experience with custom WP themes has not had this particular puzzle to solve. A little trial and error indicated it would not work to simply wrap the portion of PHP that was generating the code I wished to manipulate with a div of that class.

A picture of the php code as modified
The last line ‘menu_class’ => ‘classes-go-here’, add the Materialize CSS framework styling into the webpage.

I did a little Googling and found a single line of code should solve my puzzle. I added it and enjoyed the satisfaction of seeing the results when I tested it out.

Success! ūüôā

Magento 2 Adventures

I’ve had a rough start in my experiments with Magento 2. My first try was running locally on MAMP. The install went fine, but there were some configuration issues I was having difficulty resolving. I then installed it on my secondary database through my hosting. That went okay, but there was the indexing problem previously¬†blogged about which ended up being a hosting company problem. After re-indexing things seemed okay but glitch-y. Since a new version had just been released I was waiting for the update through the vendor the hosting company contracts with for the install. I got started on a virtual box on my home machine. That worked wonderfully until the file went corrupt. The update still wasn’t available and it had been over a week. Since I could just install it, and had not made much progress on my site anyway. I did a reinstall.

The good news is, despite my M2 experiments getting started very roughly, I finally got the latest latest version is playing nicer with my hosting and my computer.

Creating Simple Products

Catalogue -> Products -> Add Product -> Simple Product

Creating Configurable Products

Catalogue -> Products -> Add Product -> Configurable Product

Create Bundle Product

Catalogue ->Products -> Add Product -> Bundle Product

Creating a Custom Attribute

Size

Setup SSH Access for Website. 

Reasons:

Re-indexing

Custom theming

 

Launch my Demo Site

Magento 2 Adventures: Cron Jobs

Wanting to explore other CMS’s, I downloaded and installed locally Magento 2, community edition. Some research and playing around locally allowed me to create various types of products including simple and configurable. I then proceeded to create a little store. I wanted to take it further, so I freed up one of my databases through my online hosting company, installed Magento 2 on a subdomain, and voila: my own online store.

Immediately after logging into the site I was greeted with error messages. I tried to systematically meet each of their needs, but there was one I was unable to clear up. It reads:

“One or more¬†indexers¬†are invalid. Make sure your¬†Magento cron job¬†is running.”

Some digging on the Magento dev docs lead me to this answer:

bin/magento indexer:reindex

I then looked up How to Run a Cron Job with my hosting provider.

I followed the steps and looked at the other cron jobs currently running which were set-up by the installer.

I came up with the following:

php /home/myusername/mysubdomain.amybaldwindev.com/bin/magento indexer:reindex

It didn’t work. I emailed the hosting provider for further support, but they indicated my¬†question was out-of-scope.

I charged on, and started creating items for my store but ran into several¬†other errors, such as products not appearing in the storefront. It’s not clear if these problems are stemming from this error, but it seems a good start before troubleshooting¬†further.

Yes We Can — My first Proof of Concept

I’m currently working on the User Interface for an open source robot project. While at a work session last night, someone asked if it was possible to add a live video stream to the interface. I stated it absolutely was possible. The next question, “how hard is it?”

Let me check…

I found some code that only relied on basic HTML and a little JavaScript. It was empowering to be able to look at the code and feel confident it wasn’t malicious in any way. I created a new file on my computer and opened the HTML document. It didn’t work. I remember that while using JavaScript in the past I have utilized various task runners. Task runners accomplish many things including compiling and minifying files, check for changes and updating the browser. I quickly set up the files to utilize Gulp and ran it again.

My beautiful face back at me on the screen.

It’s my first proof of concept!

There are many steps between the final goal, and what I could achieve in a half hour on my Mac. My Mac already has a webcam and my preferred dev environment installed. It will be quite a different task as I anticipate several learning curves. One example I know will come up as a learning curve is my text editor of choice (Sublime) won’t work on a Raspberry Pi, but I’m excited by the challenge. Additionally, I expect I’ll have to install the webcam into the Pi and configure it using command line interfaces, but that is speculation.

My Prefered Dev Environment

Personal notes for fresh install set-up presented without commentary

Mac or Linux OS

Bash User Prompt:

Google Chrome
Firefox
CyberDuck
Mamp
Sublime Text: Set up symlink
Microsoft Office 365
Photoshop Elements
duet app

Ruby
https://www.learnenough.com/dev-environment-tutorial#sec-native_os_setup

Git — either auto installed on Mojave or installed with xcode
setting up your username & email

ssh key
github, heroku

Slack
Photoshop Elements

A Few of my Favorite Tech News Sites

Built in LA¬†¬†is one of my favorite tech news sites because I live in Los Angeles, and want to know what advances, companies, and other changes are happening locally. This site keeps up-to-date with local companies and start-ups, their news, their fundraising, etc. It’s a great source to look around at potential employers and to keep tabs on what innovation is happening locally.

True to their mission of simply explaining the news without bias,¬†Slate’s Technology section also explains the news.¬† You won’t frequently find information here about the latest startups, but you will see articles about topics like net neutrality and¬† basic explanations that break down how if passed the landscape of the internet will change.

I’m a fan of traditional journalism so I really like the¬†LA Times Technology¬† and the¬†Washington Post Technology¬†sections. These news sections generally cover press events, mergers or purchases of significant amounts of stock by companies, CEO changes, that the other sources cover so they can be scanned over quickly, but peppered into these sources are¬† interesting articles documenting our ever changing relationship with technology.¬† This is where I find articles about a young child who has added Amazon’s Alexa to his vocabulary before ‘mama’.

Summer App Space Talk by Dr. Corbett Moran

Last Thursday, I headed to the SGV Linux Users Group to listen to a lecture about Summer App Space, a summer program led by Dr. Corbett Moran where LA Students and teachers were selected to participate in a coding apprenticeship program.

Application Selection

Anonymous interviews were conducted on every applicant via a interviewing platform. Those who did well, moved on to an additional platform similar to CoderPad (Google Docs for code), finally 12 applicants were selected out of 120.

All selected students were hired on at CalTech and paid minimum wage. For many of these students it was their first job.

Along with high school students, high school teachers were also selected to participate in the program. This was by design as an experience of multigenerational learning, and as a way to try to get teachers acquainted with programming as teachers who possess programming skills are rare because their skill sets can gain them a much higher pay elsewhere. This portion of the experience had mixed success as high school students often have the expectation their instructors know everything, and the teachers were learning alongside their students so they did not. There was a ratio of one teacher to every three students.

The first four weeks of the program were ran as a bootcamp. Due to facility constraints lectures were held at 8 in the morning. Dr. Corbett Moran stated if she were able to do this again, she would not hold lectures at 8 am, but rather have a flipped classroom, meaning students watch lectures at home.

The final two weeks were for projects.Special emphasis was placed on Teamwork in software engineering.

Dr. Corbett Moran said one particularly important aspect of her philosophy was to ensure the students knew they deserved to be here, we’re not going to filter you out. It was important to treat people like they’re smart and deserve to be there, people tend to rise to the challenge.

Students wrote daily learning journals.

Final Projects

Students were told to make a project using Nasa Satellite Data and human health factors. Their project compared rates of Athesma to air pollution.

Another project was to program a way to classify galaxies using machine learning. Humans still do a better job, for now.

Students also competed in Data Science Competitions on Kaggle.

Closely related positions for Front End Web Developers

As I enter the last 33 % of my bootcamp program, jobs after bootcamp are starting to become at the forefront of my mind. My program focuses on front end web development but there are a number of titles that are closely related to that job. They are:¬† project manager, user experience, web designer, front end developer, quality assurance, content manager/editor. To break it out I’ve defined each role below.

A project manager is responsible for the project’s completion. The project must not only be delivered on time but must meet its scope and be within its budget. The good project manager is likely a skilled communicator who can correctly identify which deliverables need to be produced, advocate for their team, motivate their team, and direct resources to areas of the project that may be falling behind, or prioritize them to fit the changing needs of the project.

A user experience designer is concerned with how the product feels. They explore a multitude of solutions to solving specific user problems. Their deliverables may include sitemaps, storyboards, and wireframes. Common tools of the trade include Sketch, Photoshop, and Illustrator.

A web designer creates the layout, features, look, and feel of a website. Additionally, they determine the required content and ensure it is part of a site. They may assist with ongoing additions or maintenance to the website or hand it off to the clients. They typically see a project from conception to finish, create wireframes, sitemaps, style tiles and code the components.

A front end web developer is responsible for creating the elements people see and interact with on a web page. They work closely with back end engineers who develop content and databases and server-side integration. Tools of the trade include HTML5, CSS3, JavaScript and associated libraries, Photoshop (or similar software), version control such as git, and server-side preprocessing platforms.

Someone who works in Quality Assurance will be working with the program to look for bugs. Entry level positions are likely in manual testing which entails trying to physically figure out all the ways a user might try to use a product and find the places it breaks. This is an essential step before automating the test. QA will then document how things broke by producing a bug report. The report is then sent along to the engineers who may try to replicate the problem.

Web content editors are responsible for creating, editing, and publishing website content.

I really like the more technical aspects of my bootcamp so I think I’m best suited for QA, front end developer, or related role, even perhaps Javascript developer could be particularly strategic as I aspire to become a software engineer.

Reflections on UX and thoughts about Dark Patterns

The user experience, also known as UX, is how the user feels about the application or website. The information architecture is how the website is organized, and the User Interface design is how the user and the application respond to each other. The UX process can be used to create an honest interface or a more devious one in which the user may agree to something they did not intend to because they were tricked.

After reading about dark patterns and started learning what they were I started thinking about my own experiences with some companies that have used them. In general, interacting with websites that employ dark patterns has left me in a range from annoyed to losing my business, but has never increased my favorability towards the company. I interacted with one business who employed dark patterns whose representatives claimed since other businesses operate in a similar manner there was nothing wrong with what they were doing. In short, even though it’s quite inconvenient for me to transfer to a different company for that particular service the combination of the dark pattern of the website and the follow-up customer service is motivation enough to make a switch to pretty much any other company even if they cost more or the product isn’t as good.

For me, I think the user flow is one of the most interesting parts of the UX process. Who is visiting your site? Why are they there? How is the information going to be arranged and presented to help them achieve their goals? What are the business goals for their users? If your site cannot serve the user goals as well as the business, what should be changed so it does?

Creating a sitemap is one of the most surprising parts. I did not realize how large a small site needs to be, and as I went how I needed to add more pages and parts. I will be sketching it out on paper and working out the details before I start working on Sketch.

Learning from other designers

I’ve been spending time looking around at websites that have won awards as well as those in the running. Below, are three websites with my notes of parts of the design that stood out to me.

Website one: Proyectos archivo РNectar Estudio

What I like: This design is a clean and high contrast design making use of ample whitespace so the page doesn’t look too cluttered. The page makes uses of just 3 colors which are black, white, and a vibrant green. The menu at the top is limited to five options plus a language option which makes sense as the company is based in Spain. Link hover helps define when you’ve selected a menu option and portfolio makes use of two columns of pictures highlighting recent work as well as a table with links to a handful of other key projects.¬† Overall, seems well thought out and design and usability translate well to mobile design as well.

Website two: bacter | creative infection Рby elephant stone

What I like:  Menu is clearly accessible from left. This is a totally different feel with the heavy use of JavaScript. The user scrolls through the various menu options to view portfolio, projects, contact, etc. The overall design is very clean, while relying heavily on pictures with titles. Titles are included in high contrast colors to the dark background (white).

What I think could be better: the experience is completed by the use of a basic sound that starts playing when you open the page. I personally don’t know a single person who wants sound when they open a webpage that is not Youtube, Pandora, or similar service. I’m also unsure how this page translates responsively but google’s developer’s tools did not paint an optimistic picture.

 

Website three: Lemon Lemon | 7UP

What I like: The imagery on this amazing. While presumably the pictures were provided by Pepsi Co. the photo on the landing page is balanced by large high contrast text explaining the product¬† (7 up in the Dutch market) in just a few words. The menu/navigation is accessible from the right or by pressing the number 7. Throughout the site, as you navigate around there are little circles in the color scheme going towards the top of the page reflecting the beverage’s carbonated nature.¬† A big interactive button labeled discover takes you directly to the product pages. The text is chosen carefully, and is concise making the user experience clear, easy to use, and simple.