Toolsday

Resources Element Queries Resize Observer :focus-within nth-child pseudo spec blend modes Art The Web — Tutorials on Blend Modes Online backdrop filter Editing Images in CSS (Talk) CSS Subgrids Custom Scrollbars in Webkit Popping Hidden Overflow Thanks to today's Sponsor: Linode Instantly deploy and manage an SSD server in the Linode Cloud. Get a server running in seconds with your choice of Linux distro, resources, and node location. Check them out today at linode.com/toolsday to get a $20 credit when you use promocode: toolsday2018 Shout out to our continued supporter: Webflow Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

Una and Chris go over the thousand and one options developers have today to get their apps into the cloud Get Your App in the Cloud ASAP Netlify Now Platforms as a Service Google Cloud Platform AWS IBM Cloud Linode Digital Ocean Tutorials Puppeteer in Google Cloud Functions Past Shows Netlify Gatsby Thanks to today's Sponsor: Linode Instantly deploy and manage an SSD server in the Linode Cloud. Get a server running in seconds with your choice of Linux distro, resources, and node location. Check them out today at linode.com/toolsday to get a $20 credit when you use promocode: toolsday2018 Shout out to our continued supporter: Webflow Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

Generative Art Generative Artistry Generative Art: Speedrun Other Resources Tutorial Markdown Tim Holman Home Twitter Codepen Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Shout out to our continued supporter: Webflow Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

Is Redux dead? Twitter seems to think so, but listen in to hear us talk about why people use Redux, and whether we think they'll keep using redux in the future. Resources Apollo Link Redux MobX Articles Is Redux Dead? Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Shout out to our continued supporter: Webflow Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

React Native Getting Started React Native Express React Native Getting Started Understanding CLI Resources and Examples Expo React Native CSS Modules Example React Native Linear Gradient React Native Starter Kit Native Base JS Coach - React Native Components Awesome React Native List Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Also sponsored by Webflow Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

Ideating is hard! We talk about getting inspired to build things, and the process we go through to hone in on what we're creating. Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

VS Code Visual Studio Code VS Code Settings Settings we talked about "files.defaultLanguage": "markdown" "editor.formatOnSave": true "editor.renderIndentGuides": true "editor.tabSize": 2 "editor.wordWrap": "on" Themes Grey Matter Night Owl Cobalt2 Fonts Dank Mono Plex Mono Operator Mono Plugins Live Share Prettier Stylelint Resources Wes Bos VS Code Tip Thread VS Code Can Do That Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

CSS Blocks CSS Blocks OptiCSS Chris Epstein Twitter Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

Tools Emotion.js Styled Components JSS CSS Modules Blog Posts CSS Modules Series by Robin Rendel CSS Modules by Glen Maddern Wha't Wrong with CSS in JS by Brad Frost Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday Get A Transcript Today's episode has a transcript and it can be found here: 72: CSS in JS Transcript

Tutorials D3 Listed Tutorials D3 with Michael Menz D3 and React, Together - Shirley Wu D3js Workshop (Intro Into Creative Visualizations with SVG and D3) Articles and Podcasts Data Visualizations, Fast & Slow - Elijah Meeks D3 V4 changes - Irene Ros Deep Dive on D3.js with Ben Clinkinbeard and Elijah Meeks Playgrounds Bl.ocks Block Builder Obserable Public Data Sets Kaggle Awesome Public Datasets People to Follow Shirley Wu Nadia Bremer Elijah Meeks Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

In today's episode, we talk about JavaScript's animation in transition libraries which we shortened down to interactions....or libraries Tools and Libraries Mentioned React Animation React Transition Group AnimeJs chenglou/react-motion third party React Motion demos Reacto Overdrive Popmotion Popmotion Pose npm react collapse animejs.com React Spring Surge Articles Flip Your Animations Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14-day free trial and don't forget your T-shirt! Get in touch Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday Transcript We're testing out a new service Sonix for transcriptions and this is the very first episode using it - if you want a transcript of today's episode grab it here: JS Interaction Libraries Transcript

This episode features the great Jason Lengstorf and we're talking about Gatsby! Links to things Mentioned Today: GatsbyJS Plugins Gatsby Starters Gatsby Image Toolsday GraphQL episode Shannon Soper Jason on the Web Twitter Website Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14 day free trial and don't forget your T-shirt! Get in touch! Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday Transcript We're testing out a new service Sonix for transcriptions and this is the very first episode using it - if you want a transcript of today's episode check it out here: https://sonix.ai/r/eXFs5qndr8hT8zge31jqCnEK

This episode features Una getting overly hyped about Houdini: the future of writing CSS via web worklets. Resources Houdini: Maybe The Most Exciting Development In CSS You've Never Heard Of Say Hello to Houdini and the CSS Paint API Houdini Drafts [official] Is Houdini Ready Yet? Demos iamvdo's CSS Houdini Experiments Google Chrome Houdini Samples Thanks to today's Sponsor: Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14 day free trial and don't forget your T-shirt! Get in touch! Find both of us on Twitter @Una or @chrisdhanaraj and don't forget to follow the show @toolsday so you know when new episodes hit the air! Want to ask us questions about this episode specifically? We've got a Spectrum Community channel set up just for that. Find, follow and join conversations here: Spectrum.chat/specfm/toolsday

This week we talk about the in-progress JavaScript and CSS features we can't wait to see supported! Things Mentioned JS: Mutation Observer CSS: Text Decoration CSS: Subgrids & display: contents CSS: Media Queries Level 4 CSS: font-display CSS: Variable Fonts Axis Praxis Variable Fonts Variable Font Demo by Microsoft JS: Interseciton Observer CSS: Houdini JS: Pipeline Operator Thanks to Today's Sponsor: Kobiton Stop using mobile test labs that overcharge & underwhelm! Kobiton is your one portal to test on any platform or device… in-hand, on-site AND in the cloud. At 30% the cost of AWS, Sauce Labs and Perfecto. Right now, get double the trial minutes just for signing up! That’s 4 hours of testing for FREE. Go to kobiton.com/toolsday or kobiton.com and enter the promo code TOOLSDAY to get started today!

Today we're learning about Netlify and joining us is the incredible Phil Hawksworth to share his tips and tricks around it all. A few links from Phil Netlify 10 Netlify features to surprise and delight - An article I wrote on Medium Netlify blog and examples - lots of resources here Static site generators galore! - Netlify can build using pretty much any static site generator Headless CMS resources - A great companion for static or JAMstack sites JAMStack - What is JAMstack and resources for building this way Phil's site - hello! Phil's twitter - @philhawksworth Sponsors Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14 day free trial and don't forget your T-shirt!

Resources Creating a Vue.js Serverless Checkout Form Stdlib Build a “Serverless” Stripe Store in 5 Minutes with Node.js and StdLib Serverless Microsoft Azure Functions IBM Cloud Functions Amazon Lambda Sponsors Datadog Datadog is a SaaS-based monitoring platform that provides dev and ops teams with a unified view of all their systems, apps, and services. Check them out today at Datadog.com/toolsday to start your 14 day free trial and don't forget your T-shirt!

This week we explore the pros and cons of Stylus: the hipster CSS preprocessor written to work smoothly with JavaScript. Resources Stylus Try Stylus stylus-loader

It's time to wrap up the year and welcome 2018. So in this episode, Chris and Una go over their favorite tools and apps from 2017! Resources Visual Studio Code Workspaces Downshift CSS Grid Stylus Coinbase Robinhood Wealthfront Bullet Journaling Panobook Rhodia Pads Nuuna Notebook GoCD Egghead.io Advanced React Patterns Bubble Level Joule - ChefSteps Prettier Bracket Pair Colorizer Sponsors Webflow

CUBS is back with an episode on the Preact CLI! Chris and Una try it out for their own projects and discuss. Resources PreactJS Preact CLI PRPL Preact Router Differences between Preact and React People to follow Jason Miller Sponsors Webflow

We take a quick look through the different graphing and svg libraries you can use to build your own data visualizations Libraries D3 Svg.js Snap.js Chartist Victory Learning Resources D3 with Frontend Masters and Shirley Wu Bl.ocks - codepen for data viz Legacy Libraries Paper.js Raphael.js Sponsors Webflow

This week, Chris and Una take on the challenge of extending Slack (the messaging system) with their own bots! General Resources Slack API Slack Events API Slack Slash Commands API Slackbots NPM module Slack client module Slack Dev Kit for Node.js Slack App Directory What We Made ASL Bot Tutorials BotWiki on Slackbots Build a Chuck Norris Slackbot Slackbot in 40 Lines of Code Sponsors EmpireConf Webflow

Electron.js lets you build desktop apps using web technologies. It’s pretty rad! In the first episode of our new CUBS series, we explore Electron ourselves! Resources Base electron tutorial Electron Builder Awesome Electron Create React App with Electron Egghead.io Electron Course Sponsors Manifold Webflow

This week we have Rachel Nabors teaching us all about the future of the Web Animations API! Rachel Nabors Home Twitter Codepen Courses Resources Rachel Nabors Web Animation Kickstart Web Animation API Web Animation Demos Promos Promo Code: TOOLSDAY Animation at Work Sponsors Webflow

This week, we’re wrapping our heads around Headless Chrome with Tim Holman! Our Guest: Tim Holman Twitter Home GitHub CodePen Resources Getting Started with Headless Chrome Puppeteer Chrome Remote Interface Serverless Chrome Chromeless Headless Firefox Sponsors EmpireConf Webflow

If you’ve ever wondered what its like to live and work around the world, this is the show for you. This week we talk to Nicole Dominguez about running her own business as a digital nomad. Nicole Dominguez Website Twitter Blog Resources Starter Island Startup Bus Nomadlist Meetup Remoteok Trello Hello Bonsai Cushion App Private Internet Access (VPN)

This week we talk with the awesome Kat Marchán about her new tool NPX and how it can improve your NPM workflow. Our Guest Kat Marchán on Twitter Tools npx Node Package Standard create-choo-app Resources [npx Announcement Post](https://www.npmjs.com/package/npx https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) Awesome npx People Rebecca Turner Kate Miháliková Daijiro Wachi npx modules happy-birthday benny-hill okimdone workin-hard Sponsors EmpireConf Webflow

This week we talk getting started with RxJS and its data streaming possibilities with David Khourshid. RxJS with David Khourshid Twitter Codepen Resources An Animated Intro to RxJS The introduction to Reactive Programming you've been missing Introduction to Reactive Programming - Egghead Cycle.js RxCSS Material Motion XStream Bacon.js People André Staltz Tracy Lee Ben Lesh Sponsors Shade App Webflow

This week we discuss writing! An essential tool to get your voice heard and work seen in the dev community. Writing Tools VS Code Light theme VS Code Dark theme iA Writer Scrivener Gitbook Other Una's blog Writing a thesis

CSS variables are so freaking useful and their fast adoption has us more than excited. In this short episode, we discuss implementation and some use cases. CSS Variables Using CSS Variables Getting Reactive with CSS Why You Should Care CSS Variables Demos David Khourshid CSS Variables Collection Mike Ruthmieler - Using CSS Variables Other Notes Edge supports css grid behind a flag @supports Codesandbox Glitch

What happens when our shiny design system has its first birthday? Chris and Una discuss lessons learned from their years in the field Related Links Carbon Design System Post on DO Design System First Episode on Design Systems Tools aXe react-a11y React Storybook ESLint Stylelint Prettier

Tune in this week to hear us ford through unfamiliar waters as we tackle GraphQL! We go through why you should get excited about this new way of dealing with APIs. Resources GraphQL GraphQL Spec GraphQL for Express Awesome GraphQL Star Wars GraphQL API example GitHub GraphQL Writing an API with GraphQL

Live from JSConf.EU, we speak with Nadieh Bremer & Shirley Wu about their incredible data sketches project and their experiences with data visualization. Data Sketches Data Sketches @datasketches Shirley Wu Twitter Homepage Every Line in Hamilton Analyzed Nadieh Bremer Twitter Homepage Olympic Feathers Data Visualation Resources D3 Frontend Masters Interactive Data Visualization for the Web DJ in Action

We blast through our top four tips, tricks, tools, and things to optimize your website for peak performance. Una's Tools Will-change Property Picture element PictureFill CSSstats CSS Dig ImageOptim Chris' Tools Code Splitting Code split with React Router Offline Plugin Performance Budgets with Webpack CommonsChunk Plugin for Webpack Debounce Event Listeners Event Delegation

We talk with Suz Hinton about how to write software interconnected with physical objects. How cool is that wizardry!? Our Guest: Suz Hinton Twitter Twitch AVR Girl Boards Arduino Espruino Tessel Raspberry pi Community nodebots.io international nodebots day platformio.org Other Tessel Router Web Assembly Mosca (MQTT)

Everyone’s talking about CSS Grid—the latest spec to surface in modern browsers. Listen up on why its so great! Resources Grid By Example Grid minmax Jen Simmons Mondrian Art CSS Tricks Grids Rachel Andrew talk on Grids People to follow Rachel Andrew Jen Simmons

What's super trendy in tech right now? Virtual Reality. We break it down this week at SXSW. VR Devices Oculus HTC Vive Google Daydream WebVR frameworks A Frame Altspace React VR VR Frameworks Unity Unreal

We talk to Jason Ormand about gifv! The latest in image performance technology. No, but really, it's pretty cool Our Guest: Jason Ormand Twitter Vox Media GIFV Tools Thumbor Additional Information Imgur: What is GIFV? iOS Video Announcement Performance Bankruptcy

Git is something we use every day—this week we talk about some tools, tips, and tricks to make it better. Our Configs Chris .gitconfig Chris .gitignore Una .gitconfig Una .gitignore Tools Kaleidoscope Git Tower Husky Validate-Commit-Msg Semantic-Release Angular Commit Convention Tutorials Automatic Releases with semantic-release

What is Windows up to these days? Una and Chris give you the down low of developing on this operating system in 2017! Windows Surface Book Shells Power Shell CMDER HyperTerm Bash for Windows Tools Chocolatey NVM Windows Visual Studio Code Git Tower AquaSnap Remove MAX PATH

This week we sit down and talk with Sean Larkin about newly released Webpack 2! ES6 modules, tree-shaking, and more fun things in this episode. Sean Larkin Twitter GitHub Medium Webpack 2 GitHub Repo Docs Transition Guide Other Broccoli Rollup

CSS in JS: is it the next big thing? We break down some techniques with Glen Maddern. Glen Maddern Twitter Front End Center CSS in JS CSS Modules CSS Modules demo Styled Components Radium Other Next Vue

Every year introduces new tools. We recount our favorite discoveries from 2016. Una Atom VS Code Stylelint Format IA Writer Chris React Storybook Babel Preset Env Jest Travis CI Other The Case Against Progressive Enhancement ESLint

This week we learn about animation in UI: basics, libraries, performance considerations, and more with Sarah Drasner Sarah Drasner Twitter Web Animation Workshops Codepen CSS Tricks Native Javascript Web Animation API Animation Libraries GSAP Mo.js React Motion Velocity.js Demos React Motion Demo Spring Parameters Chooser Other Snap.svg

We care about you! This week we talk about tools that can help you stay healthy and productive. Fitness Tools! FitBit Charge HR 2 HeadSpace Pzizz MyFitnessPal MapMyRun Nike Fitness Club Zombies Run SkyFit Pokemon GO Couch to 5k StrongLifts 5x5 Workout Stand Instant Heart Rate

This week's episode is full of image optimization tooks, formats, and some fun facts about images! ImageOptim ImageAlpha SVGO Gulp ImageMin SVG Symbols SVGOMG WEBP FLIF

We rapid fire through our top eight Chrome extensions Una's Extensions aXe Accessibility Developer Tools DevTools Author OneTab Honey Panda Save to Pocket Send to Kindle Stayfocused Chris' extensions Refined GitHub Wapplyzer Postman React Developer Tools Reddit Enhancement Suite uBlock Origin JSONView Other Sindresorhus GitHub Ember Inspector LiveReload Awesome Screenshot

Chris interviews Una on her experience as a conference speaker and how you can become one too! Talk Tools Reveal.js Caniuse Component Code Mirror Resources @callbackwomen Technically Speaking

We stray off the beaten road of Atom and Sublime, and instead discuss our new favourite editor, Visual Studio Code, and our top five extensions for it. Visual Studio Code VS Code Chris' Extensions ESLint Atom JavaScript Grammar Debugger for Chrome Project Manager Beautify Una's Extensions HTML CSS Support Path IntelliSense Spelling and Grammar Checker Code Spellchecker Color Picker

We’re back! With an overview of what people have been talking about lately: the abundance of tools in web development. State of Javascript How It Feels to Learn Javascript Chasing Tools How it Actually Feels Yarn

We highlight thirteen conference talks that dazzled us, inspired us, and drove our careers forward Una's picks Simon Swain on his JS Cavas Cold War Mark Robbins — CSS & Email Brenna O’Brien — JS Community: The Good Parts Dan Mall — Proper Etiquette for the Adv. of Design Camille Fournier — Cloning Yourself Isn’t an Option Bruce Lawson — How to Destroy the Web Jake Archibald — Building Progressive Web Apps Chris' picks Paul Irish - Web Application Development Workflow Addy Osmani - Gone in 60 FPS Jaffar Hussein - Async Programming in ES7 Elijah Manor - Eliminate JavaScript Code Smells Monica Dinosaurescu - Practical Lessons from a year of building web components Paul Lewis - High Performance Web Interfaces