 Resources from Artem Sapegin in 2022

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webpack’s css-loader, you’ll see an error: ”TS2307: Cannot find module './styles.css'”.  [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) is a drop-in replacement for css-loader that works with TypeScript and generates typings for CSS on the fly.

You’ll need to install dependencies first:

```
npm install --save-dev css-loader typings-for-css-modules-loader
```

Import CSS Modules with TypeScript and webpack

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

When you merge code in Git using a command line, it’s easy to miss merge conflicts. iTerm has a feature, named *triggers*, that may help.

Regular expression I’m using to match conflicts in Git merge results: `CONFLICT \([^)]*\)`.

Highlight Git Merge Conflict Messages with iTerm Triggers

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

JetBrains IDEs have a very good code completion for JavaScript code but you can do it even better by adding TypeScript typings, even if you don’t use TypeScript in your project. Should work in WebStorm, PhpStorm, RubyMine, PyCharm and others.

Improve JavaScript Code Completion in WebStorm with TypeScript Typings

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Learn how to style [Gatsby](https://www.gatsbyjs.org/) sites with CSS in JS library [styled-components](https://www.styled-components.com/). You’ll learn how to setup styled-components with Gatsby using [gatsby-plugin-styled-components](https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/), and we’ll refactor the header component from the default Gatsby started to styled-components.

This lesson is compatible with Gatsby v1 and v2.

Style Gatsby sites with styled-components

Learn how to define typography styles for [Gatsby](https://www.gatsbyjs.org/) sites with [Typography.js](http://kyleamathews.github.io/typography.js/). You’ll learn how to setup Typography.js with Gatsby using [gatsby-plugin-typography](https://www.gatsbyjs.org/packages/gatsby-plugin-typography/), how to use Typography.js themes to improve styles of your site, and how to create your own themes.

This lesson is compatible with Gatsby v1 and v2.


Create beautiful web typography with Typography.js in Gatsby

Bite-size video tutorials for badass web developers.

egghead

In this lesson we’ll create a generic text primitive component, that we could use to render any text in our app. We’ll use [Styled System](https://styled-system.com/) and its `variants` feature to create this component.

[Styled System variants](https://styled-system.com/variants) allow us to change multiple style attributes with a single component prop. We’re going to use variants to switch between different text styles.

There are two ways to define variants in Styled System: [in the theme file](https://github.com/tamiadev/tamia/blob/master/src/components/Text.tsx), and in the component file. The first method is good when you want to later redefine styles for a part of your app using nested theme providers, or want to reuse the same component on several apps. The second method is a bit simpler, so we’re going to use it in this lesson.

The number of variants depends on your app. You’ll need to find the minimum number of text styles to cover most use cases. Talk to your designer, they may already have what you need. In this lesson we’ll implement a few basic styles that are often used in web applications.

**We’ll use following libraries:**
* [styled-components](https://styled-components.com/)
* [Styled System](https://styled-system.com/)

You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project:

```
npm install styled-components styled-system
```

**Useful links and documentation:**
* [Styled System docs](https://styled-system.com/getting-started/)
* [Styled System variants docs](https://styled-system.com/variants)
* [An example of defining variants in the theme file](https://github.com/tamiadev/tamia/blob/master/src/components/Text.tsx)


Create a Generic Text Component Using Styled System Variants

Cascading Style Sheets bring order and beauty to our applications.

CSS is a great language and has improved a lot in the past decade but it still has the same global nature as in its early days. CSS was designed to style documents, which causes issues in large scale applications. Naming conventions, like BEM, CSS Modules and later CSS in JS significantly improved the maintainability of styles, but we can go one step further. Using components to create responsive Flexbox and Grid layouts can simplify code, improve the developer experience and feels natural in React. In this talk, we’ll explore how to create any kind of page layout with just three components.


Say hello to Box, Flex and Stack: layouts in the component age

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

[React Styleguidist](https://react-styleguidist.js.org/) works with any React project, and supports [Create React App](https://create-react-app.dev/) out of the box. You’ll only need to tell it the location of your components, if it’s different from `src/components`. That’s enough to have basic documentation for all your components based on PropTypes, TypesScript  or Flow type annotations.
