In 2012 Rebeca Murphey wrote A baseline for front-end developershttp://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers as a minimum of what people should know to work in front-end development back in the day. I went back to the article and was surprised at how well it holds up 7 years after it was written; the tools may have changed but we need to keep the discussion going. What does it take to do front-end development in 2019? What tools we need to do it?. Javascript I won't advocate specific frameworks or technologies. I believe we should all start from a basic understanding of the language in...
CSS Custom Properties, also known as CSS Variables allow you to do awesome things. In this post, we'll explore the different types of CSS Custom properties, what they are, how they work and which one to use in what circumstances. The current version The current version of CSS Custom Properties is a W3C Candidate Recommendationhttps://drafts.csswg.org/css-variables/ that define a way to set custom properties for our CSS content that we might want to dynamically change or that we want to reuse throughout the stylesheet. What they are and how they work The idea behind custom properties is to give developers the...
One of the things I've always had a problem understanding is the CSS box model. I'm writing this, based on content from MDN to try and understand it better. When laying out a document, the browser treats each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties of these boxes. Every box is composed of four areas: content, padding, border, and margin. !https://www.w3.org/TR/css-box-3/images/box.png Different box models in CSS The content area contains the "real" content of the element, such as text, an image, or a video player. Its dimensions...
I'm an old school developer. The first website I made dates back to 1995 when a friend and I built our school's first website for independent study credit. The web has come a long way from those early days but with all the good has come to, some separation and arguments that never seem to end. The latest one seems to be about the role of a front-end developer and what is front-end development as a discipline. The rest of the post will work on the following assumptions: - Front-end developers should be equally proficient with HTML, CSS and vanilla...
There have been new additions to the promise arsenal that warrants a deeper look so we're ready to use them when they are stable enough to do so. What we started with promise.allhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Promise/all returns a single Promise that resolves when all of the promises passed resolve. It rejects with the reason for the first promise that rejects. Promise.racehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Promise/race returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise. What we got recently Promise.finallyhttps://publishing-project.rivendellweb.net/promise-finally-finally/ Promise.finally ensures that code will run once, regardless of...
Making web content work across locales, each with it's own way to display dates, time is a challenge. Most of the time, when I hear about internationalization or locale aware data manipulation I hear about Moment.jshttps://momentjs.com/ or date-fnshttps://date-fns.org/. Both libraries are awesome, they allow you programmatically control how certain portions of text are presented to the user based on their locale either a default or one they've provided. However, there is also a built-in way to do these presentations. The Intlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Intl object is the namespace for the ECMAScript Internationalization APIhttps://www.ecma-international.org/ecma-402/, which provides language sensitive string comparison, number formatting, and date,...
One of the limitations of the World Wide Web is the lack of fonts for all the world languages. Even if we were to find fonts for all the languages we want to use it's unlikely that we'll find fonts that work well together. Google has developed and released as open source a family of fonts that cover all the languages covered in the Unicode standardhttps://unicode.org/. They are not quite up to the intended goal of full Unicode support but they are getting close. The idea is to have a set of fonts for Unicode languages that work well together...
There are times when working with non-English languages on the web can be a real problem. We'll look at what's the historical background for the issue, how different encodings have tried to solve it, and how Unicode addresses the problem. The web and the larger Internet started in the US in English and, as such needed, only 7-bit characters to represent all the characters needed for the English alphabet. This character set was known as ASCIIhttps://www.cs.cmu.edu/pattis/15-1XX/common/handouts/ascii.html American Standard Code for Information Interchange. While the web was primarily an American endeavor written in English everything was fine but as the web...
Web performance is hard. There is no one size fits all solution and the amount of work we do to make our content performant is more than what we may want to do. This post will explore the process of creating and enforcing a performance budget, why it's important and how will this improve the bottom line. The following figures show how much stuff measured by the median number of requests and size in kilobytes have grown in a 3-year period from 2016 to March 2019 data is taken from the HTTP Archive's state of the webhttps://httparchive.org/reports/state-of-the-web report. !Timeseries of...
a-frame addresses a different problem space in VR and AR: Authoring WebGL is really hard. We will skip the raw WebGL version, don't want to scare readers away by talking about shaders and compiling them into Javascript and how to use them. Instead, we'll move straight into the abstractions. I prefer to use three.jshttps://threejs.org, a very powerful abstraction on top of native WebGL implementations... but even as an abstraction the code is still not easy to understand if you're not familiar with 3D concepts. The code below assumes you've already downloadedhttps://cdnjs.com/libraries/three.js and linked the library using script tags. js //...
