AUTHOR

Connor Rothschild

In the [Better Data Visualizations with Svelte](/courses/better-data-visualizations-with-svelte) course, not only will
you learn to enhance beeswarm plots with filters and peripheral elements, but you will also learn how to:

- **Build a Scatterplot with a Tooltip**
- **Build a Rotating Globe Visualization**
- **Build an Interactive Scrollytelling Scatterplot**

If you enjoyed the free course, then check out the [Better Data Visualizations with Svelte](/courses/better-data-visualizations-with-svelte) course below!

svelte

In this free, one hour course, we will learn how to create a dynamic, physics-based beeswarm plot with Svelte and D3. Beeswarm plots offer an elegant and dynamic way to display distributions, outliers, and patterns within our datasets. Whether you're a seasoned developer or a curious beginner, this course will guide you step-by-step through the process of creating a stunning and interactive beeswarm plot that will captivate your audience.

We will start by scaffolding a new Svelte project. Then, we will cover the fundamentals of `d3-force` and the underlying force simulation that arranges nodes, which are represented as circles, in a physics-based, D3 force layout. This approach will automatically position nodes in clusters via a chosen categorical variable and prevent node collisions/overlap. Svelte will handle the rendering of these nodes to the DOM.  

As we progress through the course, we will come across common problems that developers encounter when integrating Svelte with D3's `d3-force` module, and we will learn how to address them using Svelte's reactivity system. Finally, we will dynamically color and size the nodes in the beeswarm plot based on specific dimensions of our dataset.

This course aims to be an introductory guide to creating a dynamic, physics-based beeswarm plot with Svelte and D3 from scratch. By the end of the course, you will know how to bring your beeswarm plots to life with Svelte's declarative syntax and D3's data manipulation and mathematical capabilities.

Learn how to create a dynamic, physics-based beeswarm plot with Svelte and D3. This free course contains three lessons that cover everything from the basics of d3-force for positioning circles in a beeswarm plot (via a force layout) to dynamically styling and sizing circles in a beeswarm plot. By the end of the course, you will have built a simple beeswarm plot that visually summarizes a distribution of data.

Building a Beeswarm Chart with Svelte and D3

Build a dynamic, physics-based beeswarm plot with Svelte and D3.

Explore the basics of D3 force simulations.

Perform updates via Svelte reactive blocks.

How to create a dynamic, physics-based beeswarm plot for the web

The importance of enforcing clear separation of concerns (Svelte for the DOM, D3 for mathematical calculations)

How to integrate Svelte and D3 to create interactive beeswarm plots

Differences between the imperative (pure D3) and declaractive (Svelte and D3) approaches to building modern data visualizations

What problems using Svelte in D3 data visualizations can solve

How to create a beeswarm plots that allow you to better understand the extent and distribution of your data

Costa Alexoglou

In this course, we will dive into the world of design systems. We will learn how they can help developers increase their productivity, create consistency across a company's products, and ultimately speed up the development process.

We will start by covering the fundamental concepts of design systems, then move on to the architecture of a monorepo codebase. We will set up shared configurations for TypeScript, ESLint, and Prettier, and create a foundation package for hosting and distributing design tokens and assets.

Next, we will create a React package with demo components that are styled using our design system's style tokens. We will also create a Storybook package and learn the best practices for developing and documenting components with TypeScript. We will focus on styling our components in two ways: using CSS-in-JS with styled-components and JavaScript design tokens, as well as Tailwind CSS classes.

Finally, we will learn how to create tests for our React components using React Testing Library and AXE, and manage releases using changesets and set up a CI pipeline with GitHub Actions.

This course aims to be a comprehensive guide, or a cookbook, to building a complete company design system from scratch. By the end of the course, you will have the knowledge and skills to create a practical and maintainable design system for any organization.

This course is a comprehensive guide to publishing your first component library and design assets using React, TypeScript, Storybook, Tailwind CSS, and Styled Dictionary. You’ll create a flexible, enterprise-grade design system library that your co-workers will actually enjoy.

Build a Complete Company Design System

Transform design tokens with Style Dictionary.

Manage an enterprise design system monorepo with Yarn workspaces.

How a simple monorepo works with Yarn workspaces

What design tokens are, and how to generate them with Styled-Dictionary

Automate testing for accessibility issues (Axe) and visual changes (Chromatic)

Develop and document our design system with Storybook

How to publish with Github Actions and Changesets

How to provide a Tailwind configuration for other teams

Web Form submitted

Attend a weekly, 2-3 hour live session and receive first-hand instruction from Connor

Over the course of 6 weeks, you will learn to build data visualizations with Svelte and D3 alongside other cohort students.
Each week's 2-3 hour session will be taught in a virtual livestream by Connor. 
During each live session, you will collaborate with fellow cohort students in group activities and exercises. 
Upon completion, you will receive a certificate from newline!

Receive First-Hand Instruction From Connor Rothschild

Join an Upcoming Cohort

The Better Data Visualizations with Svelte course is a comprehensive online program designed to help senior software engineers master the
art of building stunning visualizations that make complex information easy to understand. With **6 modules**, **36 lessons** an nearly 
**10 hours of video content**, this course provides a deep dive into the world of Svelte and D3 data visualizations. Here's  what
you can expect to learn with Better Data Visualizations with Svelte:

After completing Better Data Visualization with Svelte, students now possess the skills to build amazing data visualizations with Svelte and D3.

What the Students are Saying

How to add interactive tooltips to a Svelte globe configuration

How to add filters and hover effects to style svelte visualizations

Connor explains how setting the CSS property `pointer-events` to `none` allows users to hover over elements behind a tooltip in SVG data visualizations.

Hovering over elements behind a tooltip

Connor explains how to use Svelte's dimension bindings , `clientWith` and `clientHeight`, to handle responsiveness.

Making Svelte data visualizations responsive

Connor explains how to map data dimensions to values that can be visually represented with D3's linear scale

D3 linear scales in under a minute

Tell the stories hidden within your data with Svelte and D3.

36 Video Lessons on Svelte and D3

Interactive, Live Project Demos

Complete Project Source Code

### Overcoming Common Challenges When Learning to Build Data Visualizations with Svelte and D3

If you're new to building data visualizations with Svelte and D3, you may have encountered some common challenges that can make it difficult to get started or progress in your learning. Here are some of the problems and frustrations that you may have experienced:

- Lack of clarity on how to select, modify, and join data to create visualizations.
- Difficulty in understanding how to work with Svelte and D3 to create responsive and interactive charts.
- Limited access to code examples and real-world projects to learn from.
- A need for a structured learning experience that builds on the fundamentals of data visualization.
- No community to connect with and learn from other students and experts.

Learning how to build data visualizations with Svelte and D3 can be overwhelming, especially without a clear path or guidance.
This course aims to solve these common problems and challenges by providing a structured learning experience with code examples and real-world projects, access to a community of fellow students and experts, and a clear path to mastering the fundamentals of data visualization.

We hope that this course will help you overcome these challenges and provide you with the skills and confidence to build stunning data visualizations with Svelte and D3.

### 5 Advantages of Learning Data Visualizations with Svelte and D3 in Today's Environment

If you're considering learning data visualizations with Svelte and D3, there are many advantages to doing so in 2023. Here are five reasons why you should consider learning these skills today:

1. **Data is more important than ever**: With the growing importance of data in today's world, there is a greater need for professionals who can effectively communicate insights through visualizations. Learning how to build data visualizations with Svelte and D3 can help you stand out in a crowded job market and make you a valuable asset to any team.
2. **Svelte and D3 are popular and in-demand**: Svelte and D3 are widely used in industry and have become increasingly popular in recent years. By learning these technologies, you'll be gaining skills that are relevant, in-demand, and can help you advance in your career.
3. **The power of declarative programming**: Svelte and D3 are declarative frameworks, meaning that you can focus on what you want to achieve rather than how to achieve it. This makes it easier to create complex visualizations with less code, which can save you time and reduce the likelihood of errors.
4. **Responsive and interactive visualizations**: With Svelte and D3, you can create visualizations that are both responsive and interactive, meaning that they can adapt to different screen sizes and allow users to interact with the data. This can make your visualizations more engaging and effective at communicating insights.
5. **Community and resources**: The Svelte and D3 communities are active and supportive, providing a wealth of resources and opportunities to learn from others. By learning these technologies, you'll be joining a community of like-minded professionals who can help you grow and develop your skills.

By learning how to build data visualizations with Svelte and D3 in 2023, you'll be gaining skills that are relevant, in-demand, and can help you advance in your career. With the power of declarative programming, responsive and interactive visualizations, and a supportive community, you'll be well-equipped to create stunning data visualizations that communicate insights effectively.

Build Powerful, Performant and Interactive Data Visualizations

Learn how to declaratively build responsive, interactive data visualizations with Svelte and D3.
This course contains dozens of lessons, each complete with live coding examples for students to study and build upon. 
By the end of the course, you'll have finished four production-ready, professional data visualizations, and you'll have learned many industry best practices.

Better Data Visualizations with Svelte

Build a rotating globe visualization with Svelte and D3.

Build a responsive, interactive scatterplot with Svelte and D3.

How to create the best data visualizations on the web

The importance of declarative chart construction

How to integrate Svelte and D3 to make more intuitive data visualizations

Differences between 'old-school' and modern approaches to data visualization

What problems a framework-driven approach to visualization can solve

How to create charts that wow your audience

Maksim Ivanov

Fullstack React with TypeScript Masterclass

Steve Belovarich

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

There are several books about Web Components, but none go into how to integrate Web Components in a typical enterprise web development workflow. This book is designed to help you learn Web Components and integrate it into your work.

In this book, we cover the basics of Web Components, how to code complex user interfaces with custom elements in Storybook, how to test and maintain UI libraries built with custom elements, and how to build web applications entirely with Web Components and browser specifications. It comes with complete code examples. We walk through the entire process step-by-step.

It's taught by Stephen Belovarich, a software engineer and web developer. Stephen has provided what he's learned about UI libraries and web applications while working at Ubiquiti Networks, Norton, Nike, NBC Universal, and Workday, that can benefit other developers, students, and anyone making a website.

The Complete Guide to Building UI Libraries with Web Components

In this book, we will learn Web Components through the lens of a JavaScript developer.

Fullstack Web Components

The basics of working with and manipulating Web Components

The best practices for maintaining a UI library made of custom elements

How to create a micro-library for Web Components with TypeScript Decorators

What problems Web Components can solve in everyday development

How to build web applications entirely from Web Components and JavaScript

Spencer Miskoviak

node.js

In this course, we'll start with the fundamentals of abstract syntax trees (ASTs) and learn the basic mental models. This general AST knowledge can be translated to almost any tool that works with ASTs.

## Why this course?

Understanding and using ASTs unlocks the ability to make sweeping changes in a safe and reliable way in any size codebase.

## Course topics

Throughout this course, we'll have converted source code into ASTs, traversed, mutated, and generated ASTs. With these concepts we'll then explore several practical applications including things like code audits (static analysis), code transformations (codemods), and linting.

### Module 1

We'll learn the fundamentals of abstract syntax trees. 

- What is an AST?
- How to explore an AST
- Examples of JavaScript tools that work with ASTs

### Module 2

We'll learn how to work with ASTs.

- How to turn code into an AST
- How to programmatically navigate any AST 
- How to leverage TypeScript to prevent runtime errors

### Module 3

We'll learn how to statically analyze, or "audit" code to understand the state of the codebase using abstract syntax trees.

- An introduction to an example codebase and refactor
- Understanding the state of the current codebase
- When to use an AST-based tool versus doing something manually

### Module 4

We'll learn how to transform, or "codemod" code from one state to another using abstract syntax trees.

- How to make changes to an AST
- How to change ASTs with [jscodeshift](https://github.com/facebook/jscodeshift)
- How to test a code transform

### Module 5

We'll learn how to write rules, or "lint" code using abstract syntax trees.

- How to create rules for code
- How to create custom rules with [ESLint](https://eslint.org)
- How to test a rule

In this course, you'll learn the fundamentals of abstract syntax trees, what they are, how they work, and dive into several practical use cases of abstract syntax trees to maintain a JavaScript codebase.

Practical Abstract Syntax Trees

JavaScript tools that work with abstract syntax trees

How to parse, traverse, and generate abstract syntax trees

Practical skill set for maintaining large JavaScript codebases

asp.net

react

typescript

sass

mobx

sqlite

Welcome to Learnify! Learnify is an e-learning application like Udemy where you will find all commonly used features of an e-learning application. I have seen a lot of tutorials on how to create an e-commerce application or blogging application, but I did not find anyone teaching how to build an e-learning application. In this course, you will learn how to create, sell and play courses.

We will be using dotnet framework to build our server. Dotnet framework is an open-source developer platform on which you can create a broad range of applications, especially Enterprise level applications. Our frontend is built on the most popular frontend framework, React. For type safety, we will also be using Typescript. In a big application like this, we need state management for which we will be using Redux toolkit.

In this course, we will focus on almost every aspect of an e-learning application. We will start by discussing and designing properties of a course and setting up an API to fetch them from the database.

We will then take the response and display our courses on the homepage. We will also work on a navigation bar where we will have an option to log in, search for a course, and look at our cart items count. We will also work on filtering, sorting, and pagination features. The homepage will look like this.

![Showing the homepage](./images/homepage.png)

After we have all the information about the course, we will create our description page which will have some more information about the course such as learnings, requirements, description, number of students, level, language etc. This is how our description page will look like.

![Showing the description page](./images/description-page.png)

We are going to use Redux toolkit quite extensively in our course. We will be storing course details, and user's details including the courses in their cart. When a user clicks on the cart icon, they'll be redirected to the basket page which will look something like this.

![Showing the basket page](./images/basket-page.png)

For user registration and login, we will use Identity framework which will take care of all the requirements, such as verifying the email or storing user credentials in the database. We will then work on our frontend to take user's credentials. This is how our login page will look like.

![Showing the login page](./images/login-page.png)

Since we are building a real-world application, we need to take care of payments as well. We will use Stripe to accept payments. We just need to provide Card details and click on Make Payment. Once the payment is successful, user will be able to see purchased courses on their profile.

![Showing the payment flow](./images/flow.mp4)

Once a user has purchased a course, we want them to be able to see it as well. We will start by seeding some sample course data which will be displayed to the users. Later on, we will design our backend to accept course sections and lectures from our client. For video player, we are going to use YouTube's embedded player. This is how the video player will look like.

![Showing the course view page](./images/video-player.png)

Finally, we will see how a user can become an instructor and create a course of their own. We will create one page for basic course details and another one for creating sections and lectures. We will give an option to publish course as well. After the course is published, it will be available to all the customers to purchase.

![Showing the Course Page for details](./images/course-page-1.png)
![Showing the Course Page for Sections and Lectures](./images/course-page-2.png)

I would highly recommend this course for developers who want to become fullstack developers. You will learn how to create a fullstack application from scratch and how to break down and manage frontend and backend work.

In this course, you will learn how to build an e-learning application like Udemy using React and Asp .Net.

The newline Guide to Fullstack ASP.NET Core and React

How to set up React project using Typescript

How to create one to many relationship and many to many in ASP .NET

Using AutoMapper to shape data in Asp .Net

Setting up axios to make API calls in React

How to centralize state in React using Redux toolkit

How to use Identity Framework in Asp .Net

How to deploy Asp .Net projects to Heroku

Mikael Vesavuori

storybook

Among developers and architects, "continuous integration and delivery/deployment" (CI/CD for short) has increasingly become the norm for almost two decades. And while frontend development has gone through the framework revolution, going from design to code with the speed expected of CI/CD is still a pain. But it doesn't need to be!

This 10-module course is taught by Mikael Vesavuori, an architect and developer who has helped companies like Polestar redefine their technology and design processes, tooling and ways of working.

In the course, we will create a full component-based React-driven application with Figmagic, underpinned by Storybook, good documentation, and with CI and automated testing.

We will bring the dev-designer collaboration to its current state-of-the-art with a DevOps-inspired life cycle, which could be called “continuous design” (after continuous integration/deployment or CI/CD).

While there is a pre-defined, specific toolset that we’ll use, the end goal of the course is to teach you a wider perspective of what it means to work end-to-end with design systems. Nearly all individual tools are exchangeable: we’re more interested in the capabilities enabling our desired way-of-working than the specific tools chosen to get there.

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, underpinned by Storybook, good documentation, and with CI and automated testing. Learn senior-level system architecture skills for frontend React code; skills you can apply broadly in working on any frontend application.

The newline Guide to React Component Design Systems with Figmagic

How to set up a continuous design pipeline from code to CI/CD, using some of the best services out there

What Figma, Figmagic, and design tokens are and how they enable you to be more productive

How design tokens can function as a contract between designers and developers, setting up powerful new ways of working

The history of design/code tooling and how to argue for process and tooling change

Understand the value of documentation, using Storybook and Figma to document your work

Aleksandra Sikora

next.js

### The newline Guide to Full Stack Comments with Hasura and React

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

### Why this course

Many developers would like to add a comments section to their website or blog for users to post comments or hold discussions. While it's possible to use existing hosted solutions such as Disqus or Facebook Comments, they often charge a fee and impose their UI leaving little to no control for modifications or customization. 

Another option is to build your own from scratch — which is what we'll do in this course. We’ll use Hasura, which generates GraphQL API from a database so that the backend part is as easy and the least time-consuming as possible. Along the way, we’re going to learn about databases, GraphQL, building UI components with React and TypeScript, and more.
By the end of this course, you’ll have a commenting system added to a website we’ve called, Why comments?, with all comments stored by Hasura. We'll also publish the fetching and adding comments logic as a library to NPM.

This course focuses on building a commenting widget, however, the skills you’ll acquire will allow you to build any fullstack widget you can think up for your application.  You’ll be able to contribute to fullstack React, GraphQL, and Hasura projects at work, in open source, or your own projects. You'll discover that this stack not only eliminates the need for having large teams of backend developers, but it lets your projects move faster.

### Your Instructors

Hi, I'm Aleksandra, and I'm your instructor for this course. I’m the former tech lead of Hasura console and lead maintainer of Bliz.js. This course combines my knowledge in a few areas such as TypeScript, React, Hasura, GraphQL, and general application development.

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

The newline Guide to Full Stack Comments with Hasura and React

Implementing pagination and optimistic updates

Importance of tests, and how to test React components

Paige Niedringhaus

In this course we'll dive into all the ways to modernize an existing React application - from tooling and linting, to testing and Hooks. React is a powerful, extremely popular JavaScript framework, but keeping applications up to date with all that it has to offer is tough - especially when dealing with the larger, enterprise-level business applications many developers are responsible for.

## Why this course

The newline Guide to Modernizing an Enterprise React application will cover everything you need to know to confidently work on a React application of any size, in any state, and leave it better than when you found it. 

While many React tutorials start with the latest version of React, or gloss over all the other things required to make sure apps vital to a company's success keep running, this course does not. In 54 lessons spanning 10 modules, it tackles head-on, the many things that must be considered when building and maintaining large, complex React apps.

## Course modules 

As you progress through this course, you'll gain a deeper understanding for how and why React Hooks came to be, the importance of various types of automated testing and project configuration, and how to leverage design systems to improve your application. You will gain a detailed understanding of how to modernize a React app in a real-world scenario, bringing it in line with today's development standards. 

![Home page of the Hardware Handler sample React application](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-modernizing-an-enterprise-react-app/module_10/lesson_00.00/public/assets/hardware-handler-home-page.png)

### Part one: tooling and setup

The first part of this course will consist of getting familiar with our example application, and doing the behind-the-scenes work to set it up for success. 

We'll learn about why React Hooks came about and how to use them, how to upgrade an outdated React app successfully, and how to use tools like Volta, ESLint and Prettier to improve the app's code and development experience.

- Module 0: Meet Hardware Handler - our outdated, but promising React application.
- Module 1: [React Hooks](https://reactjs.org/docs/hooks-intro.html#motivation) - why they were created, the issues they solve and how the most common ones work.
- Module 2: Upgrading a React app - our app needs an upgrade to use Hooks, and we'll streamline development with [Volta](https://volta.sh/).
- Module 3: Project configuration - adding [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) to our app will dramatically improve code quality.  

### Part two: refactoring the code

With our app configured for success, we'll get down to the business of refactoring Hardware Handler. 

I'll show you my strategy for converting class components to functional ones, and we'll go file-by-file keeping the app's functionality intact while upgrading it to use hooks - including custom hooks, and the Context API. 

- Module 4: Classes to functions - we'll take every class component and turn it into a functional component.
- Module 5: [Custom hooks](https://reactjs.org/docs/hooks-custom.html) - we'll identify where custom hooks can simplify our functional components further.
- Module 6: [Context API](https://reactjs.org/docs/context.html) - a few strategically placed React contexts will round out our code improvements.

### Part three: testing

An updated application is only half the battle for enterprise-level apps; development teams must also be confident in their continued success as the apps expand in size and scope. 

We'll add automated testing to our app using the widely accepted testing frameworks React Testing Library and Cypress.

- Module 7: Integration testing - the popular combination of [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) will be used to unit test smaller pieces of our app.
- Module 8: End-to-end testing - the ease of writing e2es with [Cypress Studio](https://www.cypress.io/) will blow you away.

### Bonus: design systems

Finally, I've included a special bonus module about how to incorporate design systems into an already existing application, and switch out components in a systematic way. Design systems and component libraries are quickly gaining ground - especially in big orgs with lots of apps and development teams. 

Being able to effectively use one is an important skill to learn.

- Module 9: [Ant Design](https://ant.design/) - we'll swap in the robust design system's components to handle our app's more complex interactions for us.

![Product page of the Hardware Handler sample React application](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-modernizing-an-enterprise-react-app/module_10/lesson_00.00/public/assets/hardware-handler-product-page.png)

## Bottom Line

In 10 modules, we'll go step-by-step taking an app from outdated in every way to up to today's high standards, giving you ample practice and hands-on examples along the way. 

If you've been wanting to get more confident in your React skills _and_ see what it takes to build enterprise apps in today's world, this is the course for you.

![Checkout page of the Hardware Handler sample React application](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-modernizing-an-enterprise-react-app/module_10/lesson_00.00/public/assets/hardware-handler-check-out.png)

In this course, you'll learn all the pieces that go into modernizing an existing React application so it can take advantage of the latest framework features and run well for years to come.

The newline Guide to Modernizing an Enterprise React App

How to modernize an existing React application according to today's standards

How React Hooks work compared to class components

How config tools Volta and Node engines simplify development

How to set up ESLint and Prettier to improve code quality

How to upgrade an existing React app and refactor the app as you go

How to write integration tests with React Testing Library to ensure app functionality

How end-to-end tests with Cypress can test mission critical user flows

How to incorporate a component library to speed up design and development time

Victor Engmark

Bash is everywhere. It has grown to be the most popular shell on \*nixes – including Mac OS X and Windows Subsystem Linux (WSL). 

*The newline Guide to Bash Scripting* is an exploration of the Bash shell, scripting language and related tools. It’s aimed at developers who want to get the job done right the first time, and make sure maintenance is a breeze. Topics include:

- how to find help on arbitrary commands
- how to structure a robust and maintainable script
- editing commands and interacting with the terminal efficiently
- tools for dealing with version control, JSON, XML, text encodings, images and compressed files
- quality assurance
- … and much more

The goal of this book is to give you the tools and techniques to write Bash scripts which will stand the test of time, and to give you the means to explore the vast shell scripting ecosystem to find the tools you need right now.

### Audience

Bash is *the* Linux glue language, so this book is aimed at software developers mainly working in some other language. We assume that you have working knowledge of programming concepts like variable assignments, loops and files, and at least a passing familiarity with interactive shells.

If you're comfortable with web development, but not–so–comfortable on the commandline then this course is perfect for you.

Bash is the most popular shell and here we'll teach you popular tools, techniques, pitfalls and workarounds. Bash is simple to get started with, hard to master, and you can do incredible things with a line or two – inside we'll teach you how.

The newline Guide to Bash Scripting

How to create robust, maintainable scripts

The importance of error handling settings

Richie 

react-native

react-native-elements

react-native-nfc-manager

react-native-paper

## What we will cover in this course

First, I will provide an overview of NFC technology, so you can understand basic concepts and terms. After that, we will build three apps throughout this course.

### App 1: Tag Counter

![image](https://user-images.githubusercontent.com/10307875/148626752-38646752-bb16-4db2-8324-9fc19efdef04.png)

App 1 is a game app to count how much time a user needs to scan five NFC tags. You will learn:
- how to properly set up an NFC project 
- how to trigger NFC scanning
- the difference from iOS and Android regarding NFC feature

### App 2: Tap-and-Go

![image](https://user-images.githubusercontent.com/10307875/148627270-2dc43df8-8d5c-479d-8dd6-041b236d7009.png)

App 2 is about NFC Data Exchange Format (NDEF), which is the standard NFC data format supported by both iOS and Android. NDEF can be used for almost any NFC tag. We will build an NDEF reader-writer app, and you will learn:
- how to write specific NDEF URI into NFC tags 
- how to read NDEF URI and trigger corresponding actions, for example, opening an URL, making a phone call, or sending a message. 
- how to use deep linking with NFC tags.

### App 3: NFC Pokemon

![image](https://user-images.githubusercontent.com/10307875/148627203-562e742d-973e-406c-8e9e-a871ccdaf6d9.png)

App 3 dives into low-level NFC programming, which directly manipulates the NFC tag’s internal memory and uses proprietary NFC commands. 
The app we'll build is called "NFC Pokemon," which is a digital identity management platform. It can seal a specific Pokemon, for example, a Pikachu, into an NFC tag. 

When building this app, you will learn:
- how to use low-leve tag command to directly manipulate NFC tag's internal memory
- how to create digital signatures in React Native
- how to use proprietary password protection command for NXP NTAG 213 / 215

NFC technology is everywhere in our daily life, from transportation, access control, to payment system. However, understanding NFC is still a hard topic because of its wide technology landspace. 

So in this course, We will guide you from the simplest case like using common NDEF format, all the way to a complex digital identity management app which leverages some unique NFC features.

The newline Guide to NFCs with React Native

How to integrate NFC feature into your React Native app

How to handle the differences between Android and iOS regarding NFC feature

Understand NDEF and use it across iOS and Android

Understand low-level NFC programming and communicate with NFC tags directly

How to use asymmetric cryptography library with React Native

How to use password protection commands from NTAG 21x NFC tags

Nat Welch

Steve McCarthy

golang

In this book we will show you the some of the concerns of backend web development through the lens of Go.

It is taught by Nat Welch (formerly an SRE at Google) and Steve McCarthy (Etsy), two Go developers who have been writing software for more than 25 years combined.

In the course, we'll be covering the creation and concerns of a number of fundamental backend building blocks or larger applications:

- A key value server, including the use of distributed consensus algorithms
- A canary deployment server
- A real time chat service
- Testing and monitoring

Regardless of your background, Go can make you a _better backend developer_, but learning Go is challenging because the language looks simple on the outside, but you won't get its full benefit unless you know what it can _really_ do. 

**By the end of the first chapter, you'll already _have built a key-value server reminiscent of similar systems like Redis and memcached._** The subsequent chapters will dive into more hands-on projects and Go concepts including:

- How to test your Go systems with unit tests and integration tests
- **Project**: create a **distributed version of the key-value server** in order to solve the typical problems of server systems such as _node failure_
- How to solve the **problem of "consensus"** in distributed Go systems
- How to write code to **keep data in sync** when running a system for servers located around the globe
- Implementing **black box and white box monitoring** systems for Go servers
- **Project**: building a **load balancer server** from scratch
- Why and how to implement a **canary deployment server** for bug-free gradual deployments
- How to build a **configuration server** to allow zero-downtime deploys 
- Understanding the various tradeoffs in the **design decisions** for Go server systems
- **Project**: build a Go chat server system from the ground up 
- **Database modeling** for backend development as part of your chat server project
- **and a lot more**...

## A Key-Value Server Like Redis And Memcached

n the early chapters of the book we learn how to build a Golang version of a key-value server that works in a manner similar to Redis and Memcached. You'll implement each of these features in Go:

- set and retrieve values by key
- adding persistent storage
- using data encodings such as `JSON` and `base64`
- testing the server with unit tests and integration tests

In these chapters, we also learn how to build a more advanced solution for the problem: **a distributed version of the key-value server**. You will learn how to use **consensus algorithms** in Go to solve the problem of keeping distributed servers in sync. The solid grounding you get in programming Go in these first chapters readies you for more complex Go projects.

## A Real-Time Chat Service

A real-time chat server implemented in Go gives you the opportunity to bring together systems thinking as well as concerns common for web apps:

- relational data modeling with SQL
- authentication
- implementing RESTful resources

Working through this comprehensive project will give you **a high degree of confidence about using Go to implement a huge project from scratch**. You will feel ready to use Go with relational databases such as PostgreSQL or MySQL, and databases in general.

## A Canary Deployment Server And Load Balancer

The work you do in the chapters covering building a canary deployment server and load balancer will open your eyes to the full power of Go. Gradual deployments are a commonly used strategy for code deployments, and the projects you build in these chapters get you familiar with building this kind of **infrastructure software**. 

Your load balancer will implement _random-per-request_ as well as _round-robin_ load balancing. These projects will give you a thorough immersion in systems problem solving with Go. You'll be able to show off your skills on bold projects of your own, in job interviews, and on the job when collaborating with colleagues.

## This book is the _fastest_ way to learn modern backend Go development

With _The newline Guide to Reliable Webservers with Go_, you won't waste time reading shallow blog posts that can't go beyond showing you the simplest Go examples or Todo apps. Instead, **within the first chapter** you'll be well on your way to creating a **Redis-like key-value server**, and the complexity of the systems you're able to build only accelerates from there.

This book opens the door to **more effective backend development** and utilizing the full power of Golang for **microservices**. As Go transforms the systems development landscape, you can use this book and the skills it teaches you to contribute to a faster, more effective systems development experience for your team.

With _The newline Guide to Reliable Webservers with Go_ you can **go from novice to proficiency in Go in a predictable way, without wasting time, and without picking up bad Go coding habits**.

So grab a copy now to advance your journey with Go.

In this book we show important concepts in backend web development through the lens of Go.

Reliable Webservers with Go

The importance of testing your web servers

How to apply distributed consensus algorithms to your key value server

Dylan Paulus

esbuild

In this course, we'll cover what it takes to write, maintain, and publish a React library from scratch. 
In the 2020 State of JS survey, an annual survey conducted of the frontend JavaScript community, React came in as the most used framework for frontend development. Because React is so popular, building libraries in it can open you up to a wide range of users, contributors, and possibilities!

## Why this course

Building a library is so much more than just the code. 
We need to know the ins and outs of versioning, deploying, building, documenting, dependency management, module types, tooling, and more. 
This is a daunting task for just one tutorial to cover. Creating React Libraries from Scratch will teach you everything you need to know to succeed in creating a library.

Don't worry if you're not a React wizard. This course is designed for beginner/intermediate developers who have never deployed a library before and have minimal React experience. However, you should be familiar with JavaScript.

## Course Topics
 
Throughout Creating React Libraries from Scratch we'll develop a React Hook called Scroller that will provide a utility for scrolling around web pages—taking advantage of window.scrollTo. 
We'll start in module 1 with an empty directory; adding documentation files, installing dependencies, and setting up GitHub. Right away, you'll have a project that could be deployable as a fully functional library!
In module 2 we'll implement scroller while taking advantage of Storybook to visually test our code. By module 3 Scroller will be deployed to npm in multiple JavaScript module formats.
Finally, in module 4, we'll look at different tools and techniques in software development to maintain a library. This includes linting, unit tests, TypeScript, and Lint-Staged!
By the end of this course, you'll be able to run _npm install scroller_, and take advantage of React code __you__ wrote in future projects.

Creating React Libraries from Scratch will dive into:
- initializing a new npm package
- maintaining code quality
- publishing to npm
- keeping contributors on track
- exposing modules that work in NodeJS and the Web
- unit-testing
- Storybook for demoing components
- exposing typing using TypeScript
- and more!

In this course we'll cover what it takes to maintain, write, and publish a React library from scratch.

Creating React Libraries from Scratch

Creating a React library from `yarn init` to deployed on npm

The different types of JavaScript dependency types and versioning

Setting up documentation for contributers and consumers

Keeping up with code quality while multiple people work on a project

Brittany Chiang

express

axios

dotenv

Have you ever been curious to see what your Spotify data looks like? How a round-up of your listening habits gets compiled every year? Or even wanted to see metadata of your favorite tracks? Luckily, Spotify makes a ton of interesting data like this accessible via the Spotify API. For example, there is data available for every users’ [top tracks and artists](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-users-top-artists-and-tracks) of all time and [audio features](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-several-audio-features) like danceability and tempo for every single track.

## Why this course

If you're interested in accessing personalized Spotify data like we mentioned above, Spotify requires your app to be authorized. And to get authorization, you'll need to implement something called OAuth. This course will walk you through every step of the OAuth flow in a concise, easy to follow way. Unlike YouTube tutorials that only cover a few concepts and leave you with half-baked GitHub repositories, we'll cover everything from explaining what REST APIs are to implementing Spotify's OAuth flow to fetching data from the Spotify API in React hooks. Split into seven modules, each lesson includes clear, detailed explanations and complete code examples. By the end of the course, you'll have an app deployed to the internet that you can share with your friends and add to your portfolio.

## What we’ll build

**On the front end**, we’ll build out a professional, responsive user interface with [React](https://reactjs.org/), React Hooks, and the popular CSS-in-JS library, [Styled Components](https://styled-components.com/). We’ll pull in data from the Spotify API using modern ES6 [async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) methods and display that data in an engaging way.

**On the back end**, we’ll learn the basics of [REST APIs](https://en.wikipedia.org/wiki/Representational_state_transfer), [HTTP requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods), and [OAuth](https://oauth.net/). We'll lift the veil on how to [authorize an app with Spotify](https://developer.spotify.com/documentation/general/guides/authorization-guide/), and then build a Node server with the [Express framework](https://expressjs.com/) to handle our authentication requests. Finally, we’ll deploy our app to the internet using [Heroku](https://www.heroku.com/).

![Top Artists](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-1.png)

![Top Tracks](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-2.png)

![Playlist tracks sorted by tempo](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-3.png)

Learn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.

Build a Spotify Connected App

Principles of REST APIs and how they relate to the Spotify API

How to implement the Spotify OAuth flow with JavaScript

How to use local storage to store auth tokens

How to fetch data from the Spotify API in a React app

How to handle async code with React hooks and async/await

How to efficiently style an app with Styled Components

How to deploy an app with a React front-end and Node.js back-end to Heroku

Travis Waith-Mair

CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

What it means to compose layouts and why you should do it

How to apply the principles of Encapsualted CSS in our React components

The foundational layout primitives that every developer should know

Halvard

deno

In this course, we will learn how to work with [Deno](https://deno.land) to create a REST API using TypeScript with the web framework [Oak](https://github.com/oakserver/oak) and the migration tool [Nessie](https://github.com/halvardssm/deno-nessie). 
Deno is a JavaScript runtime created by [Ryan Dahl](https://tinyclouds.org), the same creator for Node, as an attempt to simplify the JavaScript landscape by strictly following the WebAPI specs. 
If you are interested in learning more about the motivation behind Deno, you can watch this video where Ryan Dahl explains "[10 Things I Regret About Node.js](https://www.youtube.com/watch?v=M3BM9TB-8yA)"

We will explore how to create an application using the powers of TypeScript, and learn how to traverse the Deno ecosystem which is much like the native web ecosystem. 
There are 5 modules that will take you from installing Deno and running your first lines of code, to working with web frameworks and databases, and in the end, deploying your application to a web server using a deployment pipeline.

Throughout this course, you will experience all the different aspects of Deno which you will need to create your own application in the future. 
And from this course, you will get a good feeling for if Deno is ready to be your next default for new projects.

In this course, we will learn how to create and deploy a REST API with Deno from scratch.

Build and deploy a REST API with Deno

Integrating databases into your application

Importance of database migrations in production applications

Deploying Deno applications to production using CICD

Austin Green

This course will teach you how to create a flexible, private, enterprise-grade component library using React.

Since its introduction in 2013, React has become one of the [most used front-end frameworks](https://2019.stateofjs.com/front-end-frameworks/). Its component-based architecture and flexibility has made it the framework of choice for those needing to share code across multiple teams.

However, the same flexibility that has helped React grow in popularity also creates many challenges when creating shared assets and tooling. Some of the most commonly asked questions include:

- What components should be shared?
- How do I choose which dependencies to include in my library?
- Which component APIs and design patterns allow for the most flexibility?
- How do I document and build my components?
- How should I be testing my library?
- Where do I deploy my components for internal use?

This course will teach you how to create a flexible, private, enterprise-grade
component library using React.

The newline Guide to Building a Company Component Library

How to identify potential shared components in an existing codebase

Importance of choosing your libraries dependencies

How to create an NPM library from scratch with TypeScript and Storybook

Basic and advanced API patterns for shared components

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Explore newline courses

Masterclasses

Tutorials

Fullstack React with TypeScript