What’s New in Create React App 2.0 Video Series
Earlier this month Create React App 2.0 was released adding a lot of new features. Some of those features include Sass Support, CSS Modules Support, Adding SVGs as React Components, Fragment Short Syntax, and Babel Macros. In this post, I’ll be highlighting the above 5 features.
fridayfrontend  sass  javascript  react  svg  components  cssmodules 
23 hours ago
React Main Concepts
If you prefer to learn concepts step by step, our guide to main concepts is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won’t miss anything as you go along.
react  javascript  tutorials  reference 
2 days ago
Modern JavaScript in React Documentation
If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:
javascript  react  es6  reference 
3 days ago
A re-introduction to JavaScript
Why a re-introduction? Because JavaScript is notorious for being the world's most misunderstood programming language. It is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful language features await. JavaScript is now used by an incredible number of high-profile applications, showing that deeper knowledge of this technology is an important skill for any web or mobile developer.
javascript  es6  tutorials  reference 
3 days ago
Tutorial: Intro to React
We will build a small game during this tutorial. You might be tempted to skip it because you’re not building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.
react  javascript  tutorial 
3 days ago
Getting Started with React – An Overview and Walkthrough – Tania Rascia
1) Learn about essential React concepts and related terms, such as Babel, Webpack, JSX, components, props, state, and lifecycle.
2) Build a very simple React app that demonstrates the above concepts.
react  javascript  tutorials 
3 days ago
A Complete Beginner's Guide to React, by Ali Spittel
For this tutorial, we will be building a Facebook status widget, since Facebook wrote React in the first place!
react  javascript  tutorials 
3 days ago
JavaScript fundamentals before learning React
Most of it boils down to JavaScript ES6 and beyond features and syntax, but also ternary operators, shorthand versions in the language, the this object, JavaScript built-in functions (map, reduce, filter) or more general concepts such as composability, reusability, immutability or higher-order functions. These are the fundamentals, which you don’t need necessarily to master before starting with React, but which will definitely come up while learning or practicing it.
javascript  react  es6 
3 days ago
ES6 Syntax and Feature Overview
ECMAScript 2015, also known as ES6, introduced many changes to JavaScript. Here is an overview of some of the most common features and syntactical differences, with comparisons to ES5 where applicable.
javascript  es6  cheatsheet  reference 
4 days ago
Removing leading whitespace in ES6 template strings
With that in mind I thought OK, I'm going to make a tag to make template strings have no leading whitespace on multiple lines but still handle var interpolation as by default.
javascript  es6  templates  strings  whitespace 
4 days ago
Getting Started with Vue.js
Build apps with the incredibly simple and popular JavaScript framework.
vue  javascript  tutorials 
4 days ago
Unit Test Your First Vue.js Component
In Build Your First Vue.js Component we made a star rating component. We’ve covered many fundamental concepts to help you create more complex Vue.js components. Yet, there’s one crucial point you need to build bulletproof components you can use in production: unit testing.
vue  javascript  components  testing 
4 days ago
Build Your First Vue.js Component
In this tutorial, we’ll build a star rating system component. We’ll visit several Vue.js concepts when we need them and we’ll cover why we’re using them.
vue  javascript  components 
4 days ago
Top Tutorials To Learn Vue Js For Beginners
Vue JS 2 has quickly become incredibly popular, both due to how powerful the JavaScript framework is, but also how easy it is to learn. Vue is much easier to learn than other JavaScript frameworks such as Angular and React, meaning that you can start building your first Vue application in no time.
vue  javascript  tutorials  learning 
4 days ago
The User is Drunk
Hi, my name is Will, and I'm hoping that today I'll get you excited about user interface and user experience design using a method that we call "The User is Drunk."
drinking  ui  ux  design  accessibility  video 
6 days ago
A Beginner's Guide to JavaScript's Prototype
You can’t get very far in JavaScript without dealing with objects. They’re foundational to almost every aspect of the JavaScript programming language. In this post you’ll learn about a variety of patterns for instantiating new objects and in doing so, you’ll be gradually led to understanding JavaScript’s prototype in depth.
javascript  class  prototype  objects 
6 days ago
Vanilla Debounce
Just a simple debounce without all the frills from lodash/underscore
javascript  debounce 
7 days ago
What nobody tells you about documentation
There is a secret that needs to be understood in order to write good software documentation: there isn’t one thing called documentation, there are four. They are: tutorials, how-to guides, explanation and technical reference. They represent four different purposes or functions, and require four different approaches to their creation. Understanding the implications of this will help improve most software documentation - often immensely.
writing  documentation  tutorials  howto  explanations  reference  tech  teaching 
7 days ago
How Will Police Solve Murders on Mars?
Mars P.D. will have to deal with new blood-spatter patterns, different body decay rates, and space-suit sabotage—and they won’t be able to fire guns indoors.
space  mars  police  politics  crime  writing 
7 days ago
RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
tools  regex  programming  reference  testing 
7 days ago
Regex101 - Online regex tester and debugger
Regex101 allows you to create, debug, test and have your expressions explained for PHP, PCRE, Python, Golang and JavaScript. The website also features a community where you can share useful expressions.
regex  programming  testing  tools  reference 
7 days ago
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
In this article, I want to explore how the flexibility of CSS Grid can help implement a horizontal scrolling component while dealing with some of the pitfalls that comes with it.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
7 days ago
Creating Layouts with CSS Grid
CSS Grid is a relatively recent layout specification, shipping in most browsers as of October 2017. Grid allows us to create layouts that were previously impossible, or only possible with lots of DOM operations.
fridayfrontend  css  cssbasics  grids  layout  cssgrid 
7 days ago
Introducing the Button element - HankChizlJaw
How many times have you thought to yourself something like this? "As much as I love making <div> elements buttons, it'd be great if there was an npm package that I could install that would give me keyboard events and focus." Think no more, because I have exciting news. There's a native element called a <button>, and I'm here to talk about it with you today.
fridayfrontend  cssbasics  html  buttons  accessibility 
7 days ago
How I remember CSS Grid properties
The syntax for CSS Grid is foreign and hard to remember. But if you can’t remember CSS Grid’s syntax, you won’t be confident when you use CSS Grid.
fridayfrontend  cssbasics  css  cssgrid  grids  layout 
7 days ago
Use Cases For Flexbox
In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?
fridayfrontend  css  cssbasics  flexbox  grids  layout 
7 days ago
One Invalid Pseudo Selector Equals an Entire Ignored Selector
Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, Webkit and Gecko browsers assume it is valid, not invalidating the selector list.
fridayfrontend  cssbasics  css  pseudo-elements  browsers 
7 days ago
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
fridayfrontend  cssbasics  layout  cssgrid  grids  flexbox  columns 
7 days ago
How I organize CSS in large projects using UFOCSS: Naming Convention
The main purpose of CSS naming conventions is to make the CSS selectors as informative and readable as possible, but defining a convention is not really a piece of cake. Naming is by far one the most debated activities in computer science. We can definitely benefit of a naming convention that helps us to write maintainable and scalable code. On the contrary, poorly written CSS can quickly drive us crazy and turn into a nightmare.
fridayfrontend  css  modular  ufocss  names 
7 days ago
How to Write Accessible JavaScript
While accessibility can be frustrating, you can set yourself, your team, and your client up for success by planning for accessibility from the beginning. Here are four techniques to save you time and trouble when building accessible JavaScript-enabled websites and applications.
fridayfrontend  javascript  accessibility  buttons  keyboard  aria  focus 
7 days ago
Idle Until Urgent
After spending a lot of time thinking about this problem, I realized that the evaluation strategy I really wanted was one where my code would initially be deferred to idle periods but then run immediately as soon as it’s needed. In other words: idle-until-urgent.
fridayfrontend  javascript  idle  urgent  priority  performance  defer 
7 days ago
Preventing a Grid Blowout
Chris Coyer presents a simple layout and talks about how CSS grid handles things when the grid contents are too big for the layout you've described.
fridayfrontend  css  grids  cssgrid  layout 
7 days ago
The Way We Talk About CSS
There is frequently talk about how developers whose main area of expertise is CSS feel that their skills are underrated. I do not think we help our cause by talking about CSS as this whacky, quirky language. CSS is unlike anything else, because it exists to serve an environment that is unlike anything else.
fridayfrontend  css 
7 days ago
How I organize CSS in large projects using UFOCSS - Part 1
Despite of what its name suggests, UFOCSS is the acronym of User Friendly Oriented CSS. This is not an alien-like methodology and it’s not really a new way of thinking about scalable and modular CSS architecture. It’s rather an attempt to focus on the most ‘human’ part of what’s already valuable out there. What does this entail? Let’s break it down!
css  ufocss  modular  architecture 
7 days ago
Decoupling the Front-end with Modular CSS, by Julie Cameron
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.
fridayfrontend  video  css  modular  oocss  smacss  bem 
7 days ago
Motion design doesn't have to be hard
Motion helps make UIs expressive and easy to use. Despite having so much potential, motion is perhaps the least understood of all the design disciplines. This may be due to it being one of the newer members of the UI design family. Visual and interaction design dates back to early GUIs, but motion had to wait for modern hardware to render animation smoothly. The overlap between UI motion and traditional animation also muddies the waters. A lifetime can be spent mastering Disney’s 12 basic principles, does this mean UI motion is similarly complex? People often tell me that designing motion is complicated, or that choosing the right values is ambiguous. I contend that in areas most important to a UI, motion design can and should be simple.
design  animation  material 
7 days ago
You Don't Need Lodash/Underscore
List of JavaScript methods which you can use natively. Lodash and Underscore are great modern JavaScript utility libraries, and they are widely used by Front-end developers. However, when you are targeting modern browsers, you may find out that there are many methods which are already supported natively thanks to ECMAScript5 [ES5] and ECMAScript2015 [ES6]. If you want your project to require fewer dependencies, and you know your target browser clearly, then you may not need Lodash/Underscore.
lodash  underscore  javascript  library  youdontneed 
7 days ago
You Don’t Need X
People choose popular projects, often not because it applies to their problems
youdontneed  javascript  library 
7 days ago
You Don't Need Moment.js
List of date-fns or native functions which you can use to replace moment.js. Moment.js is a fantastic time & date library with lots of great features and utilities. However, if you are working on a performance sensitive web application, it might cause a huge performance overhead because of its complex APIs and large bundle size.
moment  time  javascript  plugins  library  youdontneed  optimization  performance  date 
7 days ago
How to manage your Design Tokens with Style Dictionary
Recently I have come across a tool, called Style Dictionary, developed by Danny Banks at Amazon, that allows you to manage design tokens (or “style properties”) for a design system. I’ve used it to replace the existing tool that we used to process the design tokens for our Cosmos design system. I’ve found the task very interesting, and I’ve decided to document it, so that other people may benefit from what I’ve learned during the process.
designsystem  tokens  patternlibrary  styleguide 
7 days ago
Awesome VScode
A curated list of delightful Visual Studio Code packages and resources.
awesome  lists  vscode  editors 
7 days ago
From Bootstrap to CSS Grid: Move Forward Without Breaking Anything! by Natalya Shelburne
Don’t let still being on a float based layout (like Bootstrap) stop you from using CSS Grid. Learn how the power of CSS combined with feature queries allow you to declare `display: grid` with confidence on any project. Finally, you can get excited about designing for web again!
fridayfrontend  css  grids  layout  cssgrid  bootstrap  video 
10 days ago
Pravatar - CC0 Avatar Placeholder
Generate fake avatars to fill your sample application.
avatars  images  placeholders  stock 
13 days ago
Gentle explanation of this keyword in JavaScript
A lot of time this keyword was a mystery for me and many starting JavaScript developers. It is a powerful feature, but requires efforts to be understood.
javascript  this 
14 days ago
When (and why) you should use ES6 arrow functions — and when you shouldn’t
It is important to understand how the arrow function behaves differently compared to the regular ES5 functions.
javascript  es6  arrow  functions 
14 days ago
React Cheatsheet
great cheatsheet for React syntax
cheatsheet  javascript  react 
14 days ago
Exploring ES6: Upgrade to the next version of JavaScript
This book is about ECMAScript 6 (whose official name is ECMAScript 2015), a new version of JavaScript.
javascript  reference  books  es6  es2015 
14 days ago
30 seconds of code — JavaScript
Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
javascript  reference 
14 days ago
30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
css  reference 
14 days ago
The Shapes of CSS
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.
fridayfrontend  cssbasics  css  shapes 
14 days ago
Lazy Loading Images – The Complete Guide
Now, since we cannot do away with images, we need to make our web pages load really fast with them. In this guide, we will talk about lazy loading images, a technique that helps improve the page load time and reduce page size while still retaining all the images on the page.
fridayfrontend  cssbasics  lazyload  images  performance 
14 days ago
Don't use empty or low content for your design system grid examples
But anyway, say you're setting up a grid that uses mixed values for column widths like this. Don't do that with totally empty columns, otherwise, you'll get a false sense of how those columns will behave.
fridayfrontend  cssbasics  grids  cssgrid  flexbox  layout 
14 days ago
5 Easy Ways to Make Your UI More Accessible
Even if the UI project you’re working on doesn’t have accessibility requirements, it’s worth understanding the implications of your design decisions. If you’re not thinking about accessibility, then you’re not thinking about the full user experience. With that in mind, here are a few simple ways to start incorporating accessibility into your UI designs.
fridayfrontend  accessibility  html  css  contrast  color 
14 days ago
Writing good text alternatives
They say a picture paints a thousand words. Alt text and captions give people who aren’t able to see pictures these words.
fridayfrontend  cssbasics  html  accessibility  alt 
14 days ago
Putting things on top of other things
This is a post about stacking contexts: what they are, when they happen, and why.
fridayfrontend  cssbasics  css  z-index 
14 days ago
Responsive Images
Excellent bit of history from Mat Marquis on why we needed responsive images, and what was wrong with the `img` element in the first place.
fridayfrontend  responsive  images  html 
14 days ago
If Statements Should Cost $10,000 Each
An exciting new thought technology for software project estimation
fridayfrontend  javascript  conditionals  estimation  humor 
14 days ago
The ultimate guide to proper use of animation in UX
While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerning animation of interfaces would be clearly and practically described. Well, in this article I want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.
fridayfrontend  css  animation  ui  ux  design 
14 days ago
5 Tips to Write Better Conditionals in JavaScript
When working with JavaScript, we deal a lot with conditionals, here are the 5 tips for you to write better / cleaner conditionals.
fridayfrontend  javascript  conditionals 
14 days ago
Refresh CSS Bookmarklet v2
Almost 11 years ago, Paul Irish posted this brilliant bookmarklet to refresh all stylesheets on the current page. Despite the amount of tools, plugins, servers to live reload that have been released over the years, I’ve been using this almost daily for a decade. There’s always been one thing that bothered me: It doesn’t work with iframes. After dealing with this issue today once more, I thought “this is just a few lines of JS, why not fix it?”.
bookmarklets  fridayfrontend  javascript  css  reload  refresh  iframes 
14 days ago
Outline Audit: A script to test the heading outline of a document
This small script analyses the heading outline of the document (or given container), and report possible errors. It can be dropped in the DevTools directly, put into a bookmarklet or integrated to a testing suite for example. It’s pretty much up to you.
bookmarklets  javascript  outline  dom  testing 
14 days ago
Here's How To Make The World's Greatest Chocolate Chip Cookies
It took a ton of testing and retesting to get them exactly right — all told I made 38 batches (that's over 900 cookies!) over three months — but I came away with ~four original recipes~ that cover every cookie category:
recipes  cookies  chocolate 
17 days ago
Chicken Hotdish Recipe
A midwest American classic, this Chicken Hotdish is like a chicken pot pie but topped with potato puffs! It bakes up beautifully and reheats well also! Kids love this dish!
recipes  chicken  tatertots 
21 days ago
Staying Safe When You Say #MeToo
The digital defense tips below are for individuals. They address threats against specific people, not the systemic problem of harassment. There’s an important conversation happening about how institutions — from universities to software platforms to law enforcement — handle online threats. In the meantime, though, these are some concrete things that individuals can do to feel a little safer about speaking out and confronting power.
security  twitter  metoo  privacy 
21 days ago
A Queen Bey inspired theme for Alfred, Bash-it, iTerm, Slack, and Visual Studio Code.
colorscheme  themes  vscode  terminal  slack 
21 days ago
Cape Town Is An Omen
Climate change is going to revolutionize politics in cities across the world.
climatechange  globalwarming  politics  water 
21 days ago
The Bottomless Tombs
While a number of the old shaft tombs of the Etturan Dynasty have been found and explored, there is one that remains a well-kept secret amongst sages, masters of dark arts, and the few adventurers who have been there. Possibly the original shaft tomb of the dynasty, or perhaps a strange discovery that became the inspiration for the ones to come – the Bottomless Tombs seem to have earned their name.
dnd  rpgs  maps 
21 days ago
Much Ado About ARIA
With this accessibility beginner series, I am hoping to recapture some of this excitement for learning while introducing you to a variety of topics in the world of digital accessibility. The plan is to keep these articles light, factual, and most of all, give you something practical to add to your daily workflow.
fridayfrontend  cssbasics  accessibility  aria 
21 days ago
I created a copy of Red Onion's Daily Prophet using CSS Flexbox
If you have ever seen Red Onion’s Daily Prophet page then you’d know that it's a really awesome and creative layout which is built using CSS Grid. It’s similar to an old-style print layout which seems quite challenging to replicate on the web. Creating a clone of it using flexbox instead of css grid would be a really good challenge if you want to learn how to use the flexbox layout.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox  harrypotter 
21 days ago
CSS Only Floated Labels with :placeholder-shown pseudo class
In this tutorial, we’re going to build a CSS only solution to the floated label technique using the :placeholder-shown pseudo class.
fridayfrontend  css  cssbasics  forms  html  placeholders  accessibility 
21 days ago
Discover which iOS devices are used on your site
If you’re a web developer and you’ve tried to know the specific iOS devices used by your users, you’ve hit a wall: different devices have the same user agent and screen size. The solution, used on apple.com, is to ask WebGL for the user’s GPU. iOS devices return a string like “Apple A7 GPU”, combined with the screen size that’s enough to differentiate most devices.
fridayfrontend  cssbasics  javascript  ios  analytics 
21 days ago
Unlocking the power of CSS Grid Layout, by Rachel Andrew
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.

In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.
fridayfrontend  css  cssgrid  layout  grids  video 
21 days ago
WAI-ARIA menus, and why you should generally avoid using them
So as a TL;DR, I’d say: Don’t use menu* roles, they’re most probably inappropriate and cause more churn than a good user experience. Exceptions apply, but you’ll probably be told when they do.
fridayfrontend  accessibility  aria  menus 
21 days ago
Having fun with link hover effects
A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy. But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.
fridayfrontend  css  underlines  svg  animation  hover 
21 days ago
A framework for web performance
When it comes to web performance, the eternal question is “What should we measure?” The answer to that question will determine where you then concentrate your efforts—whatever it is your measuring, that’s what you’ll be looking to improve.
fridayfrontend  performance  devops  analytics 
21 days ago
Re-approaching Color – Lyft Design
Sharing a new way to building color systems for accessible UIs that scale: Our existing color system wasn’t working, and we realized for us to be successful with color we would need to do something extraordinarily different. To do that, we had to start from the beginning and scrap everything we knew about color systems.
fridayfrontend  css  color  design  accessibility 
21 days ago
ColorBox by Lyft Design
Colorbox is a color tool to produce color sets.
color  tools  accessibility  design 
21 days ago
ITCSS — Modern CSS: Writing Better, Cleaner, More Scalable Code
Join award-winning front-end architect and speaker Harry Roberts for a groundbreaking class that will transform your approach to CSS. Harry walks through his personal method for embracing its features, avoiding overrides and workarounds, and creating code that scales as you grow. You'll learn how to:
training  video  css  modular  itcss  harryroberts 
21 days ago
Temporarily ignoring files in Git
Usually ignoring files is quite simple with Git. However, you may need to quickly hide changes in a file, perhaps for an entire development session or other reasons. Luckily there’s a simple way around this, thanks to some clever manual diving from Eelco Wiersma.
git  ignore 
21 days ago
Splitting is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!
css  javascript  animation  splitting  variables 
21 days ago
Vapid: an intentionally simple CMS
Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.
cms  dashboard  static  security 
21 days ago
« earlier      
5e accessibility advice agile alignment analytics animation api architecture aria awesome backgrounds bem bestpractices bias books browsers burnout business buttons cards careers characters charts checklist chrome code color comics comments communication components conferences config contrast critical css css-in-js cssbasics cssgrid culture customproperties defaults demos design designsystem development devtools discrimination diversity dnd documentation earthquakes editors email emergency engineering fantasy features feminism filters flexbox fluid focus fonts forms frameworks free fridayfrontend frontend games gender generator git github google gradients grids grunt guidelines harrassment health hiring history howto html icons ie images inclusive inputs inspiration interviews ios iphone javascript jesncin jobs jquery keyboard language layout leadership learning less lint lists mac magic maintainability management maps mediaqueries meetings mixins mobile modular movies myths names navigation oocss optimization osx parenting patternlibrary patterns performance photos plugins politics preparation presentation process productivity programming progressive quickreference quotes racism react readability recipes reference reset responsive reviews rpgs rules rwd safari salary sass science scifi screenreaders scripts scrum security selectors semantics sexism shapes slides smacss social space speaking standards startrek starwars stock styleguide sublime support supports svg syntax tables tech television templates testing themes tips tools transforms transitions tutorials twitter typography ui usability ux validation variables video viewport webapps webfonts windows wordpress work worklifebalance worldbuilding writing

Copy this bookmark: