Performance is one of those areas where perception is just as important as reality, particularly in mobile environments where the browser is only part of the equation, you have to take into account how long will it take for the device to wake up, to initiate the wireless connection, and many other thins that are beyond our control as front-end developers. I used to think that this wasn’t important until I started looking at what the performance does to users perception and engagement with web content. The Akamai studyhttp://www.akamai.com/html/about/press/releases/2009/press091409.html released in 2009 concluded that: - 47% of people expect a...
Now that we’ve generated the CSS files form our SASS content there are a few things left to do. Autoprefixerhttps://github.com/postcss/autoprefixer takes care of one of the most tedious tasks in writing CSS: adding vendor prefixes. Daniel Glazman walks through the history of CSS vendor prefixeshttp://www.glazman.org/weblog/dotclear/index.php?post/2015/07/30/CSS-Vendor-Prefixes in his blog but the general idea is that vendor prefixes allowed browser and other user agent vendors to implement CSS features undergoing standardization without impacting any future work from the CSS working group. The problem is that, as the features became widely deployed, it became impossible to withdraw the prefixed features. Furthermore, when specifications...
Ever since I saw it for the first time I’ve been in love with SASShttp://sass-lang.com/. It’s a clever, elegant and powerful superset of CSS and CSS 3 that provides powerful programming features to create your styles. The original version of SASS was written in Ruby and it requires the Ruby ecosystem Ruby itself and the Rubygem dependency management system installed in your computer. The Ruby dependency may put a damper in your plans to use and enjoy SASS particularly in Windows so the folks who created SASS have implemented a C version and called it libSASS. LibSASS is not as...
Transpilation allow us to use features of an input language into another. Recently Javascript has become a favorite target for Transpilers. The languages I’ve chosen to add are: ES6http://www.ecma-international.org/ecma-262/6.0/ through Babelhttp://babeljs.io/: ES6/ES2015 is the current specification for Ecmascript / Javascript standard. Because it is not evenly supported we still need to transpile it into ES5 which is better supported on browsers today. The ES6/Babel transpilation requires both gulp-babel and babel-preset-es2015. Install them with the following command: npm install --save dev gulp-babel babel-preset-es2015 The task looks like this: // Transpiles ES6 to ES5 using Babel gulp.task'babel', function { return gulp.src'app/es6//.js' .pipe$.sourcemaps.init...
In the next sections we’ll go through a gulpfile I use to work with my athena-shell project. The directory structure for the project is like this: js . ├── app │ ├── bowercomponents | ├── coffee │ ├── css │ ├── elements │ ├── es6 │ ├── images │ ├── js │ ├── scss │ └── styles ├── bowercomponents ├── dist └── nodemodules The app directory is our source, as you can see it has more directories than those in the dist destination directory. We have different sources for Javascript transpilation and CSS transformation. Most of the sources will end...
I haven't always advocated the need to have a build system but I've always used one: Makehttps://www.gnu.org/software/make/, Anthttps://www.gnu.org/software/make/, RAKEhttps://www.wikiwand.com/en/Rakesoftware, shell scripts and other tools sought to make compiling code and building projects easier and less error prone by taking human typing and human memory out of the equation. JavaScript has several task runners for accomplishing the repetitive or tedious tasks. When I started researching task automation with JavaScript the only alternative was Grunt.jshttp://gruntjs.com/ and it was good if a little too verbose. Over time other tools emerged: Gulphttp://gulpjs.com/, Broccolihttp://broccolijs.com/ and Brunchhttp://brunch.io/ among others but I stuck with Grunt because I...
In the last example we saw how we could make two separate animation players. In this example we’ll see how we can do multiple animations in the same object the pen below, based on code from Dan Wilson in Codepenhttp://codepen.io/danwilson/pen/PqxvJo/. HTML for this animation is a sequence of 20 empty div tags. I’ll spare you the details. The SCSS looks like this: scss $background: e45349; $light: efefff; body { background: $background; display: flex; justify-content: center; } div { width: 5vw; height: 5vh; background: $light; border-radius: 1vh; } I’ll break the WAAPI Javascript code below. The first thing we need to...
Let’s get started with a single animation. It is similar to the example form our introductory section but it does move the object in this case a div in a straight line in increments of 100 pixels and then moves the object back using the same animation. See the Pen Web Animations API by Carlos Araya @caraya on CodePen. We can also move multiple elements and control them individually like in the pen below where control each object independently from the other. The Pen below creates two animation players, one for each object being animated. We can add multiple animations...
> Thanks to Rachel Nabors who first clued me in to the API and to Dan Wilson who provided the final kick in the butt with his articles on WAAPI to finally get me studying and learning. If you work with SVG you know that can animate SVG with SMILhttps://www.w3.org/TR/SVG/animate.html . CSS Transitionshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSTransitions/UsingCSStransitions and keyframe Animationshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSAnimations/UsingCSSanimations allow to animate some CSS properties. requestAnimationFramehttps://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame gives the browser a way to request an action be performed before the next frame executes. But each of these animation techniques have their issues. Browsers are phasing out SMIL. Chrome has had a long discussion on...
The title of this post comes from the fact that I own three physical web beacons that I got at the Chrome Dev Summit last year. I hadn’t had much time to think about what I wanted to do with it and late last year I did a moon idea posthttps://publishing-project.rivendellweb.net/conected-city/ about what a large scale deployment may look like. This is a scaled down more realistic and easier to implement I hope idea. I heard about the Physical Webhttps://google.github.io/physical-web/ last year during the Chrome developer summit. It presents a different take on IoT and it involves the web and...
