"Working with the new CSS Typed Object Model": Calling this .className => .classList, but…
Working with the new CSS Typed Object Model | Web | Google Developers
CSS now has a proper object-based API for working with values in JavaScript.
el.attributeStyleMap.set('padding', CSS.px(42)); const padding = el.attributeStyleMap.get('padding'); console.log(padding.value, padding.unit); // 42, 'px'
The days of concatenating strings and subtle bugs are over!
IntroductionCSS has had an object model (CSSOM) for many years. In fact, any time you read/set .style
in JavaScript you're using it:
// Element styles. el.style.opacity = 0.3; typeof el.style.opacity === 'string' // Ugh. A string!? // Stylesheet rules. document.styleSheets[0].cssRules[0].style.opacity = 0.3;
... read the whole story at developers.google.com.basicScroll: Parallax Scrolling with CSS Variables -
Parallax scrolling with CSS variables
import * as basicScroll from 'basicscroll' const instance = basicScroll.create({ elem: document.querySelector('.box'), from: 'top-top', to: 'bottom-bottom', direct: true, props: { '--r': { from: '0', to: '1turn' }, '--tx': { from: '-100px', to: '100px' } } })
.box { width: 5em; height: 5em; background: linear-gradient(135deg, #3cdddd, #ff1ac6); transform: translateX(var(--tx)) rotate(var(--r)); transition: transform .1s linear; will-change: transform; }
(x-post from r/Web_Design) Stripe Engineer explains design behind their landing page and provides tutorial.
Connect: behind the front-end experience
619
15
17
15
148
details
Share on
Facebook,
Twitter or
Google+
We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.
In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.
CSS Grid Layout ... read the whole story at stripe.com.
My approach to using z-index
My approach to using z-index – Hacker Noon
39
100+
44
2
6
details
Share on
Facebook,
Twitter or
Google+
So, how do the rules from the start of this post help solve these problems? First let’s take a look at the elements that we applied a z-index
to and work out if they fall into the ‘local’ or ‘global’ category.
- The full-screen modal is global
- The drop down menu is global
- The header could go either way, but I’ll say global
- The product list item is local
When it comes to global stacking, we care about how two elements stack relative to each other when they’re both on the screen at the same time. Since the relationship is important, the only sensible thing to do is to record the z-indexes for each of these elements in the same place.
... read the whole story at hackernoon.com.Ending the debate on inline functions in React
Ending the debate on inline functions in React – Flexport Engineering
Optimizing React Rendering (Part 3) — Introducing reflective-bind
Using inline functions in React is convenient but can be contentious because of their perceived impact on performance. Today Flexport is introducing our solution to the debate: a Babel transform called reflective-bind
.
But first, some background…
An inline function callback is a function that is defined within the render
method of a component and passed down to a child component as a prop. They typically manifest themselves in the form of arrow functions and calls to Function.prototype.bind
:
- Easier to write — no need to define a function handler somewhere else.
Using Filters in Vue.js
Using Filters in Vue.js
Filters are an interesting way to deal with data rendering in Vue but are only useful in a small amount of cases. The first thing to understand about filters is that they aren't replacements for methods, computed values, or watchers, because filters don't transform the data, just the output that the user sees. As of Vue 2.0, there are no built-in filters, we need to construct them ourselves.
We can use filters locally or globally, but it's worth mentioning that if you declare a Vue filter globally it should come before the Vue instance. In both cases, we would pass the value in as a parameter.
//global Vue.filter('filterName', function(value) { return // thing to transform }); //locally, like methods or computed filters: { filterName(value) { return // thing to transform } }
... read the whole story at css-tricks.com.Making Custom Properties (CSS Variables) More Dynamic
Making Custom Properties (CSS Variables) More Dynamic
CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone.
Most of the power comes from two unique abilities of Custom Properties:
- The cascade
- The ability to modify values with JavaScript
Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like
... read the whole story at css-tricks.com.Making Custom Properties (CSS Variables) More Dynamic
Making Custom Properties (CSS Variables) More Dynamic
CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone.
Most of the power comes from two unique abilities of Custom Properties:
- The cascade
- The ability to modify values with JavaScript
Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like
... read the whole story at css-tricks.com.There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you're interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support, there's never been a better time to start working with SVGs. Snap Animation States is a JavaScript plugin built around Snap.svg to help create and extend icon libraries with scaleable, editable SVG icons. Snap Animation States makes it easy to load and animate those SVGs with a simple schema.
Lets start with a basic SVG hamburger menu. This one was made using
... read the whole story at css-tricks.com.The Different Logical Ways to Group CSS Properties
The Different Logical Ways to Group CSS Properties
449
13
27
1
17
details
Share on
Facebook,
Twitter or
Google+
Here’s a bit of CSS:
.module { background: rgba(198, 148, 72, 0.75); color: #222; clear: both; margin: 0 0 2rem 0; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 2px solid black; border-radius: 4px; padding: 1rem; font-family: sans-serif; font-size: 0.9rem; line-height: 1.4; opacity: 1; transform: opacity 0.2s ease-in-out; transform-origin: right center; }
That looks a lot like CSS I write. I’ll admit, I traditionally haven’t had much of an opinion about the ordering of CSS properties. I just add what I need. I think they end up largely “grouped” by related things, because that’s just how my brain spits them out.
... read the whole story at mediatemple.net.CSS Animations vs the Web Animations API: A Case Study
CSS Animations vs the Web Animations API: A Case Study
Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is!
Introduction to the Web Animations APIAs with last week, I'll start this off with an introduction to the Web Animations API. The Web Animations API provides a way for developers to directly manipulate the browser's animation engine using JavaScript.
Creating an Animation
To create an animation using the Web Animations API, we use the Element.animate()
function, which takes two arguments; keyframes
How to Build an Image Library with React & Cloudinary
Build an Image Library with React & Cloudinary
React is a good tool when it comes to building flexible and reusable UI components. However, it's "one of those libraries" that cannot handle all the tasks involved in building a full fleshed UI project. Other supporting tools - such as a recently announced React SDK from Cloudinary - are available to provide solutions that the React core cannot.
In such cases where media (images and videos) becomes a heavy task to handle, Cloudinary simplifies the process with the new React SDK. Let's build and image library with Cloudinary and React using the Cloudinary React SDK.
The only requirements for using Cloudinary in your existing React project are to install the React SDK and the upload widget. If you do not have an existing React project and want to try these examples, take the following steps:
... read the whole story at cloudinary.com.Awesome Babel - - A list of Babel plugins, presets, tooling etc. Some interesting plugins…
GitHub - babel/awesome-babel: A list of awesome Babel plugins, presets, etc.
readme.md
Awesome BabelA list of awesome Babel plugins, presets, etc. Many of these are from the community, but some are lesser-known plugins in the Babel organization that may be useful to you.
As always, use caution when trying out Babel plugins, especially those marked as 🔧 experimental or 🔧🚧 under construction.
If you want to contribute, please read the contribution guidelines.
Parsers- babel-eslint - ESLint using Babel as the parser.
- Note: ESLint now lints most ES6+ syntax. This parser is only necessary if you are using Flow types or other experimental features.
How I stopped worrying and learned to animate #SVG
How I stopped worrying and learned to animate SVG – Prototyping: From UX to Front End
So you want to create animated icons for your site?
after illustrating some icons for my personal site, I had the notion of animating them. icons should be relatively small part of the site, so lets make a GIF.
- sigh -
Oh man, that means recreating all my vectors to after effects and then exporting animation to photoshop only to come up with a pixelated ugliness..
That was the time I started seeing that web developers who knows what their doing, are using inline svg’s as icons. some are creating very neat stuff using only live SVG.
first, I’ll have to say, SVG’s arent good for everything. and as always you should ask yourself what about alternaties like
... read the whole story at medium.com.Animating your hero header
Animating your hero header
30
43
4
13
1
1
details
Share on
Facebook,
Twitter or
Google+
If you’ve ever arrived on a website and been greeted by a large image or video, and some titles on top, then you’ve encountered the “Hero Header”. It’s a popular way to introduce a website, and can be a great opportunity to help people quickly understand what it is your site does.
For many visitors it’ll be their first impression of your brand, so you’ll want to make the most of this moment to shine.
Here’s what we’ll be putting together.
See the Pen Landing page with animated foreground elements (staggered and cubic bezier and wedge).
Standing out from the restWe can use animation to add polish to that first moment when the content appears, as well as use it to control the order in which information appears and draw the eye to what matters.
... read the whole story at cssanimation.rocks.How to create loading image using CSS only
How to create loading image using CSS only
Then a crazy sheet of CSS, but its not that complicated as it looks like. ;)
.pswp__preloader__icn { opacity:0.75; width: 24px; height: 24px; -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; } /* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */ .pswp__preloader__cut { position: relative; width: 12px; height: 24px; overflow: hidden; position: absolute; top: 0; left: 0; } .pswp__preloader__donut { box-sizing: border-box; width: 24px; height
Achieve 60 FPS Mobile Animations with CSS3
Achieve 60 FPS Mobile Animations with CSS3
191
11
10
1
1
43
details
Share on
Facebook,
Twitter or
Google+
This article was originally published on OutSystems. Thank you for supporting the partners who make SitePoint possible.
Animating elements in your mobile application is easy. And animating elements in your mobile applications properly is easy, too… if you follow our tips here.
While everyone uses CSS3 animations in mobile these days, many do so incorrectly. Developers often disregard best practices. This happens because people don’t understand the reasons why those practices exist and why they are so vigorously endorsed.
The spectrum of device specifications is wide. So if you don’t optimize your code, you will deliver a sub-par experience to the highest share.
... read the whole story at www.sitepoint.com.Just in case you need CSS border transitions (and animations).
CSS Border transitionscssAudio
//Colors $background: #fefefe; $text: #4b507a; $cyan: #60daaa; $yellow: #fbca67; $orange: #ff8a30; $red: #f45e61; $purple: #6477b9; $blue: #0eb7da; // Basic styles button { background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 2px $red; // Using inset box-shadow instead of border for sizing simplicity color: $red; font-size: inherit; font-weight: 700; margin: 1em; padding: 1em 2em; text-align: center; text-transform: capitalize; // Required, since we're setting absolute on pseudo-elements position: relative; vertical-align: middle; &::before, &::after { box-sizing: border-box; content: ''; position: absolute; width: 100%; height: 100%; } } .draw { transition: color 0.25s; &::before, &::after { border: 2px solid transparent; // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts width: 0; height: 0; } // This covers the top & right borders (expands right, then down) &::before { top: 0; left: 0; } // And this the bottom & left borders (expands left, then up) &::after { bottom: 0; right: 0; } &:hover { color: $cyan; } // Hover styles &:hover::before, &:hover::after { width: 100%; height: 100%; } &:hover::before { border-top-color: $cyan; // Make borders visible border-right-color: $cyan; transition: width 0.25s ease-out, // Width expands first height 0.25s ease-out 0.25s; // And then height } &:hover::after { border-bottom-color: $cyan; // Make borders visible border-left-color: $cyan; transition: border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border width 0.25s ease-out 0.5s, // And then exanding width height 0.25s ease-out 0.75s; // And finally height } } // Inherits from .draw .meet { &:hover { color: $yellow; } // Start ::after in same position as ::before &::after { top: 0; left: 0; } // Change colors &:hover::before { border-top-color: $yellow; border-right-color: $yellow; } &:hover::after { border-bottom-color: $yellow; border-left-color: $yellow; transition: // Animate height first, then width height 0.25s ease-out, width 0.25s ease-out 0.25s; } } // Does not inherit .center { &:hover { color: $purple; } // Set up base styles, we're going to scale instead of animating width/height &::before, &::after { top: 0; left: 0; height: 100%; width: 100%; transform-origin: center; // Ensure scaling is done from the center (expands outwards) } // scale3d(<scale-horizontal>, <scale-vertical>, <scale-depth>); &::before { border-top: 2px solid $purple; border-bottom: 2px solid $purple; transform: scale3d(0,1,1); // Shrink only width } &::after { border-left: 2px solid $purple; border-right: 2px solid $purple; transform: scale3d(1,0,1); // Shrink only height } &:hover::before, &:hover::after { transform: scale3d(1,1,1); // Show full-size transition: transform 0.5s; } } // Border spins around element // ::before holds three borders that appear separately, one at a time // ::after holds one border that spins around to cover ::before's borders, making their appearance seem smooth .spin { width: 5em; height: 5em; padding: 0; &:hover { color: $blue; } &::before, &::after { top: 0; left: 0; } &::before { border: 2px solid transparent; // We're animating border-color again } &:hover::before { border-top-color: $blue; // Show borders border-right-color: $blue; border-bottom-color: $blue; transition: border-top-color 0.15s linear, // Stagger border appearances border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s; } &::after { border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing } &:hover::after { border-top: 2px solid $blue; // Shows border border-left-width: 2px; // Solid edges, invisible borders border-right-width: 2px; // Solid edges, invisible borders transform: rotate(270deg); // Rotate around circle transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s; // Solid edge post-rotation } } .circle { border-radius: 100%; box-shadow: none; &::before, &::after { border-radius: 100%; } } .thick { color: $red; &:hover { color: #fff; font-weight: 700; } &::before { border: 2.5em solid transparent; z-index: -1; } &::after { mix-blend-mode: color-dodge; z-index: -1; } &:hover::before { background: $red; border-top-color: $red; border-right-color: $red; border-bottom-color: $red; transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s; } &:hover::after { border-top: 2.5em solid $red; border-left-width: 2.5em; border-right-width: 2.5em; } } /* Page styling */ html { background: $background; } body { //background: $background; color: $text; font: 300 24px/1.5 Lato, sans-serif; margin: 1em auto; max-width: 36em; padding: 1em 1em 2em; text-align: center; isolation: isolate; } h1 { font-weight: 300; font-size: 2.5em; }
Digital Transformation with the Node.js Stack
Digital Transformation with the Node.js Stack
In this article, we explore the 9 main areas of digital transformation and show what are the benefits of implementing Node.js. At the end, we’ll lay out a Digital Transformation Roadmap to help you get started with this process.
Note, that implementing Node.js is not the goal of a digital transformation project - it is just a great tool that opens up possibilities that any organization can take advantage of.
Digital transformation is achieved by using modern technology to radically improve the performance of business processes, applications, or even whole enterprises.
One of the available technologies that enable companies to go through a major performance shift is Node.js and its ecosystem.
... read the whole story at blog.risingstack.com.