Tales From The Frontend

By C Brown | Everything a frontend developer needs to stay on top of what's happening in the industry!

How to Use Google Analytics to Improve Your Web Design Projects

You’re aware there’s competition out there. And you know the key to success is differentiating yourself from your peers in order to stand out and win …

Analytics

How to use Flexbox to create a modern CSS card design layout

Thanks to Flexbox, a new layout mode in CSS3, we can get all of our cards in a row, literally. Card layouts have grown in popularity over the past …

The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery) — SitePoint

Whenever we need to perform DOM manipulation, we’re all quick to reach for jQuery. However, the vanilla JavaScript DOM API is actually quite capable …

Let’s Build a Web App with Vue, Chart.js and an API Part II

Part of a series<p>In case you missed the first part, you can find it here. First of all, wow! Thanks for all the feedback and twitter messages! 💝 I …

JavaScript

Airbnb’s new open source library lets you design with React and render to Sketch

Today, Airbnb’s design team open sourced its internal library for writing React components that easily render directly to Sketch. Instead of trying to get Sketch to export to code, the Airbnb team spent its time on the opposite — putting the paintbrush in the hands of the engineer.<p>Everyday …

Airbnb

Jekyll For Wordpress Developers

Jekyll is gaining popularity as a lightweight alternative to WordPress. It often gets pigeonholed as a tool developers use to build their personal …

Web Design

Facebook turned a JavaScript framework into a VR creation tool

Facebook launched React VR today, an open source JavaScript framework for building VR experiences that was announced back in October. It's based on React, which is the user interface code that powers websites like Facebook and Instagram. React VR lets you import 360 panoramic images and 3D models …

JavaScript

New Google tool helps developers pick the right colors for their apps

With its Material Design guidelines, Google set out to create a unified set of ideas for how it wants developers to think about all the different aspects of their applications’ design, ranging from the basic layout to how to use animations effectively. As part of those guidelines, it also offered …

Material Design

How we built Twitter Lite

We’re excited to introduce you to Twitter Lite, a Progressive Web App that is available at mobile.twitter.com. Twitter Lite is fast and responsive, …

JavaScript

Smashing Magazine just got 10x faster

Listen to our journey with Smashing Magazine<p>Smashing Magazine has always been a platform developers trust. They provide a place to go to find the …

Common Async/Await Design Patterns in Node.js

Async/await in Node.js opens up a host of powerful design patterns. Tasks that used to take complex libraries or intricate promise chaining can now …

vue-notes

Demo notes app using Vuejs + Vuex<p>Running demo at http://colynb.com/vuejs-notes-demo-app/<p>Build Setup<p>For detailed explanation on how things work, …

Google's new reCAPTCHA system is so smart, you won't even know it's there

During the time you’ve spent as a denizen of the internet, you’ll have doubtlessly come across plenty of Completely Automated Public Turing tests to …

How to schedule posts for static site generators (Jekyll, Hugo, Phenomic etc.)

Like many static site's we use markdown + github for all of our blog content.<p>Having content under version control comes with some great benefits:<p><b>It's</b> …

Benchmarking Codswallop: NodeJS v PHP

Oh goody, a framework versus language post. Let's try and chew through this probable linkbait.<p>This is more of a benchmark test than example.<p>Ok so …

Creating Non-Rectangular Headers

Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, …

Software Development

Interneting Is Hard

Learning to code shouldn’t be hard. We’re making it easier by putting together a comprehensive set of web development tutorials to help transform …

Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of

Have you ever wanted to use a particular CSS feature but didn’t because it <b>wasn’t fully supported in all browsers</b>? Or, worse, it was supported in all …

Web Design

The 10 Best Web Development YouTube Channels

YouTube makes it pretty easy to waste time. Hours can slip by as you watch skits or snicker at cat videos.<p>But if you’re ever on the site and in the …

Skills certification coming for Node.js developers

The IT industry has long used professional certifications to verify proficiency in technologies from companies like Microsoft and Novell. Now, …

JavaScript

JavaScript Clean Coding Best Practices - Node.js at Scale

<b>Writing clean code is what you must know and do in order to call yourself a professional developer.</b> There is no reasonable excuse for doing anything …

JavaScript

10 minute JavaScript: Library development in ES6 with Babel, Mocha and npm scripts

JavaScript has a thriving ecosystem of libraries delivered as packages on npm. Node has a high degree of compatibility with ES6 but it doesn’t have …

Why We Chose Vue.js

I had a great conversation with an interviewee a few weeks ago about how one should go about choosing a JavaScript framework.He pointed out that when …

JavaScript

Vue 2.0 is Here!

Today I am thrilled to announce the official release of Vue.js 2.0: Ghost in the Shell. After 8 alphas, 8 betas and 8 rcs (a total coincidence!), …

Common CSS Mistakes (And How To Fix Them)

These are some common causes of design, scalability, performance and maintainability issues I find when refactoring CSS for clients:<p><b>Using units for</b> …

Web Development

Using WebP Images

<i>A version of this article was first posted on Jeremy's blog. It was Jeremy's idea to repost here to spread the good word about WebP and the</i> …

Web Design

A Case Study on Boosting Front-End Performance

<i>The following is a guest post by Declan Rek, who works as a developer at De Voorhoede, a front end tech agency. A version of this article was</i> …

Web Development

karma-browserify-vuejs

An example VueJS application using Karma/Jasmine for Testing<p>Scripts<p>Run Karma Test Runner (with Jasmine and Browserify) - in watch mode<p>Run Karma Test …