JavaScript Goals for 2017

I thought I’d share what I recently watched that inspires me.

Jennifer De Walt shares her experiences (at JS Conference 2014) of how she learned to code by creating 180 websites in 180 days. It’s inspirational to see how she shares her successes and failures with the audience. Jennifer also mentions that with every site she creates, it is accompanied by a blog post (for each day) and the code is in a GitHub repository. In the past, I’ve tried to demonstrate what I’ve learned using CodePen in addition with GitHub.

As a result, I’ve decided I really want to learn more about JavaScript before delving deeper into jQuery. There are many posts that debate which to learn first. Below are a few examples;

As much as I love to copy and paste jQuery scripts, I would like to gain a better understanding of the fundamental reasons of why I should be coding in a certain way and to know the background of what I’m doing instead of merely copying and pasting scripts (Thank you Stack Overflow!)

Another reason to learn JavaScript was that, Matt Mullenweg (CEO and Founding Developer of WordPress) recently made this comment at the 2015 State of Word Conference, “learn JavaScript, deeply”.

What do you want to learn today?


CSS Architecture

I’m attempting to compile a comprehensive list of how developers and front-end engineers structure their CSS using the SMACSS (Scalable and Modular Architecture for CSS) approach.

What is SMACSS?

SMACSS stands for Scalable and Modular Architecture for CSS, and is more a style guide than a CSS framework. On a high level SMACSS aims at changing the way we are turning designs into code. Instead of working in a page mentality where you try to turn a single page design into code, SMACSS aims to identify repeating visual patterns. Those patterns are then supposed to be coded into flexible/re-usable modules, wich should be independent as possible from the individual page context. This is not a revolutionary point-of-view for a programmer, but in the web design world this is indeed a newer way of thinking.”

Continue reading

CSS, Framework

CSS3 Background-Image

While creating a prototype for a project (using Bootstrap), I added the Jumbotron component which is described as: “a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site” and found that my background image wasn’t responsive at all.

Continue reading

Productivity, Workflow Tools

Grunt build error behind proxy

While working on a project, I used the Yeoman webapp generator and selected; Bootstrap Sass, jQuery and Modernizr. Everything has worked well, the ‘grunt serve’ and ‘grunt test’ commands, however when I want to run the ‘grunt build’ command to upload the contents of my ‘dist’ folder to a web server, I get prompted with the following error:

Looking for Modernizr references in dist/styles/main.css >> svg
Downloading source files
A server error occurred attempting to download a file: 
Fatal error: connect ETIMEDOUT

I’m not sure if it’s something to do with my bower components or the proxy that I’m sitting behind?

At the moment, the workaround I’m using is to manually add the scripts (jQuery, Modernizr and Bootstrap) to the scripts folder then to link it to my html files. But surely there is a better way to do this?!


CSS3 Grayscale Filter

I stumbled upon a quick video on YouTube on how to use the CSS3 grayscale filter when hovering on an image.

The results can be seen via this Codepen CSS3 Grayscale Filter

Click on the CSS tab in the Codepen example above to see how this filter effect can be implemented in your CSS.

“Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.” – Can I Use

“It’s worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6.” – CSS3 Filters