rockyourcode: Tailwind CSS With Tailwind CLI, Notes on “How to Learn Anything 5x Faster (Joe Eames)”, Notes on “DOM Angular Manipulation Techniques in Depth” by Nir Kaufman
Hello 👋! Thanks for subscribing.
Here are the articles from last week:
Tailwind CSS With Tailwind CLI
Published on: 2021-11-29
tags: CSS, Node.js
How to install Tailwind CSS without a front-end framework
Here’s my cheat sheet to Tailwind CSS with PostCSS and CSSNano. The guide follows the official documentation with a few modifications.
Installation
You’ll need a recent version of Node.js.
npm install -D tailwindcss@latest postcss@latest \
autoprefixer@latest cssnano
PostCSS Configuration
Create a file postcss.config.js:
const cssnano = require('cssnano')
const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')
const plugins =
process.env.NODE_ENV === 'production'
? [tailwindcss, autoprefixer, cssnano]
: [tailwindcss, autoprefixer]
module.exports = { plugins }
Tailwind Configuration
Create a file tailwind.config.js:
module.exports = {
mode: 'jit',
purge: ['**/*.html'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Important: Adjust the purge option to your use case.
I copy/pasted the configuration from somewhere else and Tailwind didn’t work properly for me.
Use Tailwind CLI
1. Without Customization
npx tailwindcss --postcss \
-o <name and location of your css file>.css
Reference the compiled CSS file in your HTML:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/main.css" rel="stylesheet" />
</head>
<body>
<!-- ... -->
</body>
</html>
2. With Customization
Create a stylesheet and add the required utility classes:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* add any custom styles here */
bash
npx tailwindcss --postcss \
-i <above location="" stylesheet="">.css \
-o <name and="" css="" file="" location="" of="" your="">.css
Links
Notes on “How to Learn Anything 5x Faster (Joe Eames)”
Published on: 2021-11-27
tags: Lab
These are my notes on the video How to Learn Anything 5X Faster | ng-conf & Thinkster.io | #ngconf by Joe Eames from thinkster.io.
Concepts
- education is a process: many steps
- content today provides only 1 step (Udemy, Pluralsight, blogs, books)
- you have to do the rest
- retention is KEY: what matters is what you know tomorrow, not what you know today
- motivation: current process is demotivating, as it’s ineffective
- passive learning: retention of 7 - 15%
- active learning: retention of 75 - 90%
- teaching: 90+%
- typing is not coding: mechanical tasks (like typing) even hinder the learning process
- missing piece of education: generation
Role of Teachers
- tutoring/coaching
- teach
- assign proper exercises
Building Knowledge
- like a building
- foundation
- build a framework upon the foundation
- details
Effective Learning Plan
- consume the content
- watch content max. 10 minutes
- take notes (writing down helps processing)
- practice
- take breaks
- personal project
- spaced repetition
tips
- get a “map”/overview
- strategize your learning
Links
Notes on “DOM Angular Manipulation Techniques in Depth” by Nir Kaufman
Published on: 2021-11-23
tags: Angular
Minimal notes from Nir Kaufman‘s talk.
There Is No DOM
- Angular provides an abstraction on the DOM
- creates a “View” object from a (TypeScript) class and a template file
- Embedded views are linked to a template
- Host views are linked to a component
- Angular creates a view hierarchy: the DOM hierarchy can be different!
View Manipulation
- Structure manipulation:
ViewContainerAPI - Property modification:
Renderer2API
Links
- Angular Portal GitHub repository
- Nir Kaufman - Angular DOM Manipulation Techniques in Dept | JS VidCon
Thank you for reading my blog.