Code articles

WebVR is an amazing way to create immersive 3D Virtual Reality experiences in the browser. It’s an experimental specification of Javascript API’s and has a lot of backers and people pushing it forwards, with Mozilla being a big part of that. With the explosion of VR headsets coming to market and more on the horizon, now is a great time to experiment and see what awesome things you can create in WebVR. The open web is becoming an exciting hotbed...

With all the talk lately of finally being able to use CSS Grid, it got me thinking: What other amazing CSS features can I use now? CSS Variables was the one that instantly sprung to mind. It’s been a while since I’ve heard anything about CSS Variables and it adds a whole new toolset and way of thinking to front end development that excites me. A Refresher on CSS Variables CSS Variables have been knocking around for a few years now but don’t seem...

There’s a lot you can do with just CSS and a web browser. Great developers love to push the envelope and show just how much is possible. While experimental projects aren’t always useful on production sites, they are incredibly inspiring and educational. We’ve organized a handful of CSS projects that showcase the true power of CSS. These are all hosted on CodePen so you can even study and clone the source code to see how they work. 1. Gradient...

You do not have to start—and finish—every new website design from scratch. Seriously! Before you scowl, think about it for a minute. How many times have you done the exact same thing to start a project? How many times have you created the exact same icons or user interface elements with subtle changes? That’s where a design kit or template can come in and totally change the way you work. For many designers the benefits can outweigh some of...

UX has been the focal point of modern web development for quite some time now. This is influenced by several factors, including page loading speed, readability, usability, and design. But now that more users prefer mobile web browsing over using desktops, any website—be it a niche blog or an e-commerce store—should start prioritizing mobile friendliness. Nowadays, it’s easy to apply a mobile-responsive theme and use tools like...

Data is all around us, and its visualization has already become an essential part of our lives. Charts, infographics, maps, and dashboards are in great demand today because they present information to us in a way that can be easily interpreted. The good thing is that charting does not require great skills or special knowledge from web developers, designers, or anybody else. In this article, we’ll show you the basics and explain how to handle...

As a web designer, you already know that great design is essential for a website—it’s the concept of design you trust, unless a website looks absolutely amazing, it’s going to be hard for new visitors to trust that site. That’s how essential great design is to a website. However, there’s another essential part of having a trustworthy website, the positive UX which comes with a fast, snappy website. After great design, speed is one...

Vue.js is a micro JavaScript framework for creating reusable and reactive components on your site. Front-end frameworks vary widely in both size and scope, where Vue.js stands out is in its minimal design and focus on adaptability. You have the choice of building your entire site using Vue.js, just a making a single element of your site reactive, or anything inbetween. Because of this, it is very approachable with a shallow learning curve....

SVG is winning the race when it comes to graphics that scale on the web. Designers and developers are choosing SVG in lieu of icon fonts, raster images, and raster sprites. The benefits of using SVG are numerous but to me, it boils down to scalability. Using SVG can be as simple as copying and pasting the exported code from a vector-based program. From there the problem lies with delivering those graphics in the most efficient manner. Enter SVG...

Building email templates is down right hard. Building responsive emails is even harder. Luckily, the kind folks over at Zurb have developed a fantastic framework that makes the process of building responsive emails easier than it has ever been before. Foundation for Emails (formerly Ink) is a framework tailor fit for a modern designer/developer looking to use the tools and technologies of today to build responsive email templates for tomorrow....

In keeping with Google’s tendency to always debut new initiatives for developers, the latest in the company’s plan is its new mobile certification for web developers. Recently launched, this program is essentially an accreditation from Google to mobile developers, confirming that they’re skilled at mobile site creation. You can access the certification program here. To attain certification, you’ll have to pass a special exam,...

At the end of 2016, I put out the 2016 Front-End Tooling Survey. The response has been phenomenal. Thank you to all of you who have taken the time to do so. The aim was pretty straight-forward; to find out more details about the tools front-end developers are currently using in their own workflows. In our industry, it’s all too easy to take for granted what people are using based on your own knowledge. This survey aims to give more of an insight into...

Whether you love them or hate them, conversational interfaces have started making a significant impact in the business/brand communication landscape. Though many businesses have realized that conversational interfaces are likely to cause a major shift in brand communication there are many who are skeptical about CIs.  CIs have limitations, but they are here to stay and they will get better and more advanced, and that the current issues...

January is the time most of us cease reflecting on the year gone by, and start looking to the months ahead. It seems everyone has different ideas on what to expect in 2017 (you’ll read ours next week) and one of the most anticipated changes this year, is the introduction of CSS Grid Layout. Grid Layout allows us to define areas of a page, and determine how they stretch, scale, and respond to the viewport. Developed as a mature layout solution for...