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...
All the talk I hear about front end web development has to deal with frameworks, the best way to optimize Javascript and CSS and the best way to minimize the number of HTTP requests. But that’s not the only thing that happens. The early web was text and text only. The the first draft of CSS was released in 1994https://www.w3.org/People/howcome/p/cascade.html and the first Javascript implementation didn’t come around until 1995https://www.w3.org/community/webed/wiki/AShortHistoryofJavaScript with the first beta release of Netscape Navigator 2.0. And it became a technological competition and it hasn’t really ended, just shifted from browsers and what technology they support to...
> Specification and API subject to change. Be aware that the specification is not finalized and it may change in incompatible ways. Do not use responsive images in production yet. If you do you do so at your own risk Once upon a time we were cool by just putting an image or more in our web content. Brownie points if we added a background image… bonus points if the colors in the image did not conflict with the colors of the text or the links :o But now we have to worry about how fast our content loads, whether...
> A grocery store in Melno Park, California sets up a special display to sell jam. At certain times, the display had six flavors to choose from. At other times, the display had 24 choices. Each person who came by the sample booth was given a $1 coupon to purchase. The displays were up for a total of 10 hours. Here are the results: > The display with 24 choices > \ Number of people who stopped by: 145 \ Number of people who bought from the display based on coupon redemption: 4 \ Percentage redemption: 4% > The display...
There are some amazing things we can do with just CSS in modern browsers and some not so modern ones too. I'm documenting some of my favorites for posterity and also because they have an unusually high level of support. CSS3 Selectors New additions to the selector family introduced in CSS3. Includes: foo^="bar", foo$="bar", foo="bar", :root, :nth-child, :nth-last-child, nth-of-type, nth-last-of-type, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :not, general sibling :root The :root pseudo-class represents an element that is the root of the document. In HTML 4, this is always the HTML element. This is also useful...
> This is an update of sorts for Flexboxes and the holy grailhttps://publishing-project.rivendellweb.net/flex-boxes-and-the-holy-grail/ with better code and better explanations > Note: All code examples in this section use autoprefixerhttps://css-tricks.com/autoprefixer/ to avoid writing vendor prefixes by hand and future proofing the code. Codepen allows you to automatically use autoprefixer in all your pens. I was surprised that Flexboxhttp://www.w3.org/TR/css3-flexbox/ is only at the candidate recommendation level as it's been around for a while. It is supported across all modern desktop and mobile browsers according to caniuse.comhttp://caniuse.com/search=flex and even older broser support means we need to use different prefixes and, ocassionally, a different...
