February Tutorials Round-Up
Hey everyone! 👋👩💻👨💻
This month's newsletter includes three new videos in our "Up & Running with Gatsby" series plus helpful links from the community on topics related to Gatsby, React, JS, CSS, Animation and Workflow.
Happy coding!
— Michael, Up & Running Tutorials
GATSBY
Up & Running with Gatsby #3: Gatsby's Default Files and Folders — In this third video in our "Up & Running with Gatsby" series, we walk through what each file and folder in a new Gatsby project is for so you can start customizing your site. 📂🗃️👍
Up & Running with Gatsby #4: Writing HTML in a Gatsby Project — If you want to use Gatsby to learn React, this video is for you! In this video, we take our first look at React and how we can use it to break our HTML markup into reusable components. 📜➡️📦
Up & Running with Gatsby #5: Adding Pages to a Gatsby Project — In this fifth video in our "Up & Running with Gatsby" series, we learn how to add new pages to a Gatsby project and how to navigate between them using Gatsby's Link component. 📝🗺👌
Gatsby Tutorials — This community-updated collection of video, audio and written GatsbyJS learning resources includes 176 tutorials and counting. Check it out! 👩💻👨💻
GatsbyJS: Dynamic Apps, Static Files, Unreal Performance — "Pre-rendered progressive web apps are the future...and the future is fast." 👩💻⚡️
REACT
Simple Code Reuse with React Hooks — "Code reuse is very necessary for scaling. We’ll be looking at what React hooks are and how we can use them to keep our components D.R.Y." ⚓️ 🔄 😄
Styling React Components — "How to style React components is a controversial subject." You can say that again. 🎨🤷♀️
Thinking in styled-components — "As the name suggests, styled-components allows us to think about styles as…components. 🤯 This requires a shift in how we approach CSS." 📦 👩🎨
JS
A regex cheatsheet for all those regex haters (and lovers) — "I have always stayed far away from regex...it is safe to say I am not afraid of regex anymore!" 👀
CSS
CSS-in-JS Explained — In this video, Dustin Schau and Chris Coyier discuss how CSS-in-JS helps solve real problems like dead code elimination, scoping styles, naming concerns, critical CSS and maintaining a component-based design system. 🎨🤓
When and How to Use CSS Multi-Column Layout — "In all of the excitement about CSS Grid Layout and Flexbox, another layout method is often overlooked..." 🎨🏛
Refactoring with CSS Grid — "Is CSS grid ready for production? Find out from somebody who’s used grid on a large site—all while supporting Internet Explorer." 📐🤓
How I remember CSS Grid properties — "The syntax for CSS Grid is foreign and hard to remember...I want to share how I remember the most common CSS Grid properties today. This will help you use CSS Grid without googling like a maniac." 🎨 🤔
ANIMATION
Why We Animate User Interfaces — "I built many websites with little to no animation and was able to sleep soundly each night... Then I came across some better informed opinions on why animation is important." 🕺👍
Create Animated React Apps With React Spring — "In this tutorial, we'll be looking at how to create simple yet lovely animations in your React apps using an npm package called react-spring." 🎭👩🎨
WORKFLOW
Never feel overwhelmed at work again: how to use the M.I.T. technique — "A Most Important Task (MIT) is a critical task that will create the most significant results. Every day, create a list of two or three M.I.T.s, and focus on getting them done as soon as possible." ✅ 👍
Learn the Basics of Git in Under 10 Minutes — "If you want to get started on learning about Git technology, you’ve come to the right place. This is a comprehensive beginner’s guide to Git." ↕️ 🤓
6 Keys To Valuable Code Reviews — "When a less experienced developer reviews the code of a more experienced developer, it's an opportunity for them to see new ways of doing things and get exposure to new areas of a codebase." 👩💻👨💻