articles

Build Your Own JavaScript Micro-Library Using Web Components: Part 4/4

In this capstone tutorial, we're going to actually use the micro-library in app code so you can see how the micro-library makes things easier for developers in real world development. In the previous steps of this 4-part tutorial, this is what we accomplished: In this final tutorial, we will now…Feb 4th 2025

Build Your Own JavaScript Micro-Library Using Web Components: Part 1

If you've ever wondered how libraries like React, Preact, or Svelte work under the hood, this is a great exploration of what you need to know. Using Web Components means that your own micro-library, which we build in this series, will work easily with any JavaScript codebase. This achieves greater…Jun 20th 2022

Build Your Own JavaScript Micro-Library Using Web Components: Part 2/4

As we covered in the previous tutorial, a micro-library helps developers implement common features more quickly than using the web APIs directly. Now in this tutorial, we will code our class decorator that allows our classes to instantly gain new features without writing the code for them every…Feb 4th 2025

The newline Guide to Building a Company Component Library Coming Soon

The newline Guide to Building a Company Component Library is coming soon (May 2021) 🎉May 10th 2021

Build Your Own JavaScript Micro-Library Using Web Components: Part 3/4

Here is Part 3/4 of our tutorial series on building a JavaScript micro-library for creating your apps with Web Components. As I pointed out in previous lessons, the micro-library eases the path to development with Web Components, automating a lot of the work so developers can build their apps…Feb 4th 2025

Fullstack Web Components is now LIVE 🎉

Web Components are a standard JavaScript technology whose adoption has soared in recent years. Since it enables your components to work in any JavaScript code base, whether you are using frameworks/libraries like React, Angular, Vue, or vanilla JavaScript, you can use Web Components everywhere.…Jun 17th 2022

Form-associated custom elements FTW!

Before Shadow DOM, you needed a framework to encapsulate component templates or styling. Shadow DOM was a game-changer because it allows you to code UI components without their logic clashing with other components using just the web platform. Shadow DOM poses challenges when HTML elements…Jun 21st 2022

The newline Guide to Storybook for React Apps is Now Available 🎉

Learn how to use Storybook in your projects alongside React, Redux, and all the other tools you already use. You will see how to leverage Storybook's addons to tie Storybook into your workflow with design tools, testing tools, and routing tools. 🔖 Yann Braga - a core Storybook maintainer, teaches…May 22nd 2022

Fullstack React with TypeScript Masterclass is LIVE 🎉

The Fullstack React with TypeScript Masterclass is now live! 🎉 This Masterclass teaches you practical React and TypeScript for developing apps from idea to completion, along with all the important tools in the React ecosystem. It expands on the material taught in our comprehensive book, Fullstack…May 3rd 2022

The newline Guide to Storybook for Building React Apps - COMING SOON!

The newline Guide to Storybook for Building React Apps is coming soon (May 2022). 🎉Apr 20th 2022

The newline Guide to React Component Design Systems with Figmagic Is Live 🎉

Hi folks! The newline Guide to React Component Design Systems with Figmagic (Minibook) is live 🎉 🪄 This course is a comprehensive guide to building a React component library based on a well-architectured design system. You'll create a full component-based React-driven application with Figmagic,…Mar 19th 2022

Figma And Figmagic For React: Your First Workflow

In this post, we'll keep it short and sweet and make a sort of "hello world" implementation. This should get you a good sense of how things work when starting from scratch. Let's recap very briefly what we know about design systems, design tokens and Figmagic: Start Figma. Create a new design file…Mar 8th 2022

Work Effectively With Figmagic - File Organization 

Working effectively with Figmagic means understanding how and what it actually parses from a document. In this post, we will demystify exactly how a Figmagic-compliant Figma file needs to look for it to work as intended. On a high level, there are three page names that Figmagic looks for:Mar 6th 2022

Design tokens and why design systems need them?

One magic, simple concept (design tokens) and a one-stop shop (Figmagic) to contain our design make one hell of a powerhouse. Let's learn what design tokens are and how you can work with a “structured design” approach using Figmagic, a command-line interface tool that extends what we can do with…Mar 6th 2022

Static Site Generation with Next.js and TypeScript - Project Overview

Many of today's most popular web applications, such as G-Mail and Netflix, are single-page applications (SPAs). Single-page applications deliver highly engaging and exceptional user experiences by dynamically rendering content without fully reloading whole pages. However, because single-page…Mar 2nd 2022

useContext Hook - A Primer

Managing state in large React applications is difficult. Determining what state belongs locally to a component, what data a component receives from props, how much logic needs to be decoupled from a component, etc. directly affects an application's maintainability. One issue most developers face…Mar 2nd 2022

Create a React Native Login

Here's a new YouTube tutorial for quickly getting started developing mobile apps with React Native. React Native helps you start developing Android and iOS apps without wasting any time learning the native programming languages for those platforms. The challenge is that many project examples assume…Feb 16th 2022

An Introduction to Hasura and GraphQL

You might have heard about Hasura, the new technology that lets you quickly create GraphQL APIs to access data in your databases. Here's a quick tutorial that will help you understand why technologies like GraphQL and Hasura are so important for API development. For an example of where you might…Feb 16th 2022

The newline Guide to Modernizing an Enterprise React App is Now Live!🎉

Creating large, long-lived React apps, such as those required in large enterprises, poses unique challenges. Most developers lack the knowledge of how to build apps that scale gracefully and use the latest React techniques, such as React Hooks and React Testing Library, to modernize React apps in…Oct 28th 2021

Paige Niedringhaus Teaches You React Hooks In All New 6 Part Series

We have a special 6-part YouTube tutorial series to share with you today that demystifies React Hooks and shows you how to build your apps with them. Hooks are so key to understand because, conceptually, React components have always been closer to functions. This will be the first of 6 lessons in…Jan 12th 2022

courses

FranchescaW hasn't published any courses

books

FranchescaW hasn't published any books