WAI-ARIA: the dark art of accessibility?
Getting better insight into how to make something like a carousel ARIA ready. - https://goo.gl/DH9ZoG
#html #area
Getting better insight into how to make something like a carousel ARIA ready. - https://goo.gl/DH9ZoG
#html #area
How 'display: contents' Works
display: contents makes an element’s children appear as direct children of the element’s parent, ignoring the element itself. This explains how it works and why you might want to use it. For now, it’s only in the current releases of Firefox & Chrome but support is growing. - https://goo.gl/yBcewV
#css
display: contents makes an element’s children appear as direct children of the element’s parent, ignoring the element itself. This explains how it works and why you might want to use it. For now, it’s only in the current releases of Firefox & Chrome but support is growing. - https://goo.gl/yBcewV
#css
bitsofcode
How display: contents; Works
As I frequently mention, every element in the document tree is a rectangular box. Broadly speaking, this "rectangular box" consists of two sections. First we have the actual box, which consists of the border, padding, and margin areas. Second, we have the…
A tale of Webpack 4 and how to finally configure it in the right way - https://goo.gl/zB13q8
#webpack
#webpack
Working with the New CSS Typed Object Model
The CSS Typed Object Model brings types, methods, and a flexible object model to working with CSS values in JavaScript. - https://goo.gl/tkqYp5
#css
The CSS Typed Object Model brings types, methods, and a flexible object model to working with CSS values in JavaScript. - https://goo.gl/tkqYp5
#css
Google Developers
Working with the new CSS Typed Object Model | Web
| Google Developers
| Google Developers
CSS Typed Object Model (Typed OM) brings types, methods, and a flexible object model to working with CSS values. Shipped in Chrome 66.
Key Lessons from Google’s JavaScript Style Guide
An attempt to extract some lessons from Google’s JavaScript style guide. These aren’t hard and fast rules but merely suggestions to make life easier. - https://goo.gl/k8uqcw
#javascript
An attempt to extract some lessons from Google’s JavaScript style guide. These aren’t hard and fast rules but merely suggestions to make life easier. - https://goo.gl/k8uqcw
#javascript
freeCodeCamp
13 Noteworthy Points from Google’s JavaScript Style Guide
For anyone who isn’t already familiar with it, Google puts out a style guide for writing JavaScript that lays out (what Google believes to…
Introducing the 'react-testing-library'
We linked to the project itself two issues ago, but Kent has now written up why you should give his new light-weight solution for testing React components a try. - http://bit.ly/2JQMjzt
#react
We linked to the project itself two issues ago, but Kent has now written up why you should give his new light-weight solution for testing React components a try. - http://bit.ly/2JQMjzt
#react
kentcdodds
Introducing the react-testing-library 🐐
A simpler replacement for enzyme that encourages good testing practices.
The Status of JS Libraries and Frameworks: 2018 and Beyond
Thoughts, data and updates on React, Vue, Angular, Polymer, TypeScript and jQuery. - https://goo.gl/asqkiR
#javascript
Thoughts, data and updates on React, Vue, Angular, Polymer, TypeScript and jQuery. - https://goo.gl/asqkiR
#javascript
Medium
The status of JavaScript libraries & frameworks: 2018 & beyond.
Libraries and frameworks are one of the intense competitiveness on front-end development.
Building a ConvertKit Opt-in Form with Vue.js
Adam Wathan is building a ConvertKit based subscribe-form from jQuery to Vue.js. - http://bit.ly/2H0mI9w
#vue #video
Adam Wathan is building a ConvertKit based subscribe-form from jQuery to Vue.js. - http://bit.ly/2H0mI9w
#vue #video
YouTube
Building a ConvertKit Opt-in Form with Vue.js
Bringing Interactive Examples to MDN
Mozilla has been working on a project to bring interactive examples to pages on the wildly popular MDN Web Docs site. - https://goo.gl/MVLrVK
#css
Mozilla has been working on a project to bring interactive examples to pages on the wildly popular MDN Web Docs site. - https://goo.gl/MVLrVK
#css
Mozilla Hacks – the Web developer blog
Bringing interactive examples to MDN – Mozilla Hacks - the Web developer blog
Over the last year and a bit, the MDN Web Docs team has been designing, building, and implementing interactive examples for our reference pages. The motivation was to do more ...
Color: From Hexcodes to Eyeballs
Why do we perceive background-color: #9B51E0 as this particular purple?…This is one of those questions where I thought I’d known the answer for a long time, but as I inspected my understanding, I realized there were pretty significant gaps…Through an exploration of electromagnetic radiation, optical biology, colorimetry, and display hardware, I hope to start filling in some of these gaps… - http://bit.ly/2ES4iBT
#color
Why do we perceive background-color: #9B51E0 as this particular purple?…This is one of those questions where I thought I’d known the answer for a long time, but as I inspected my understanding, I realized there were pretty significant gaps…Through an exploration of electromagnetic radiation, optical biology, colorimetry, and display hardware, I hope to start filling in some of these gaps… - http://bit.ly/2ES4iBT
#color
Zero Wind :: Jamie Wong
Color: From Hexcodes to Eyeballs
If you're curious about rainbows, colorimetry, gamma encoding, and experiments run in the late 1920s, then this is the post for you!
How to Build a Chat App with React and Pusher Chatkit
A pretty neat and extensive walkthrough, though it relies on a third party in-beta service. - http://bit.ly/2qzzzV2
#react
A pretty neat and extensive walkthrough, though it relies on a third party in-beta service. - http://bit.ly/2qzzzV2
#react
GitHub
pusher/build-a-slack-clone-with-react-and-pusher-chatkit
In this tutorial, you'll learn how to build a chat app with React, complete with typing indicators, online status, and more. - pusher/build-a-slack-clone-with-react-and-pusher-chatkit
The Comprehensive Guide to JavaScript Design Patterns
Design patterns are reusable solutions to commonly occurring problems in software design. In this post Marko Mišura takes a look at some of the categories and then dives into the nitty gritty - https://goo.gl/j5zuoT
#javascript
Design patterns are reusable solutions to commonly occurring problems in software design. In this post Marko Mišura takes a look at some of the categories and then dives into the nitty gritty - https://goo.gl/j5zuoT
#javascript
Toptal Engineering Blog
The Comprehensive Guide to JavaScript Design Patterns
Design patterns are reusable solutions to commonly occurring problems in software design. Let's take a look at how they work and explore some popular JavaScript design patterns.
Vue.js and Webpack 4 From Scratch
A walkthrough of creating a Webpack 4 build for a Vue.js “Hello World” application including linting, testing, and hot module reloading. - http://bit.ly/2qDoDWu
#vue #webpack
A walkthrough of creating a Webpack 4 build for a Vue.js “Hello World” application including linting, testing, and hot module reloading. - http://bit.ly/2qDoDWu
#vue #webpack
ITNEXT
Vue.js and Webpack 4 From Scratch, Part 1
Part 1: Up and running
Iron Man’s Arc Reactor Using CSS3 Transforms and Animations
Kunal Sarkar shows how to create an animated Arc reactor from Iron Man’s suit using CSS. - https://goo.gl/KZtepD
#css
Kunal Sarkar shows how to create an animated Arc reactor from Iron Man’s suit using CSS. - https://goo.gl/KZtepD
#css
CSS-Tricks
Iron Man’s Arc Reactor Using CSS3 Transforms and Animations | CSS-Tricks
Alright Iron Man fans, fire up your code editors! We are going to make the Arc Reactor from Iron Man’s suit in CSS. We'll walk through every step so you can see exactly makes what happen.
Build Your Own Vue.js Router
In this four-part series, Alex Jover Morales creates a front-end router from scratch with VueJS to help you understand the concepts behind this important component of single-page apps. - http://bit.ly/2HHPRna
#vue
In this four-part series, Alex Jover Morales creates a front-end router from scratch with VueJS to help you understand the concepts behind this important component of single-page apps. - http://bit.ly/2HHPRna
#vue
Vue.js Tutorials
Creating Your Own Router - Vue js Tutorials and Courses
Probably you've been using routers in the frontend world for a while, but... have you ever written one by yourself? Do you know the foundations of a router? It might seem like it just works, but under the hood a router must take care of several things. A…
Examples of Everything New in ES2016, 2017, and 2018
This is a worthwhile roundup of all the new bits and pieces in recent ECMAScript specs, but note that SharedBufferArray support has been disabled in most runtimes due to Spectre, so give that a miss. - http://bit.ly/2H2ZBv7
#javascript
This is a worthwhile roundup of all the new bits and pieces in recent ECMAScript specs, but note that SharedBufferArray support has been disabled in most runtimes due to Spectre, so give that a miss. - http://bit.ly/2H2ZBv7
#javascript
freeCodeCamp
Here are examples of everything new in ECMAScript 2016, 2017, and 2018
It’s hard to keep track of what’s new in JavaScript (ECMAScript). And it’s even harder to find useful code examples.
Vue Login Animation
Implementing super smooth animations in your Vue App.
- http://bit.ly/2qH0Wh9
#vue
Implementing super smooth animations in your Vue App.
- http://bit.ly/2qH0Wh9
#vue
GeekyAnts Blog
Vue Login Animation
Implementing super smooth animations in your Vue App