threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

SaraVieira

In this talk we will be all discussing the origin of the furry fandom. How we will thogheter create a new furry-in-js framework. We will going over how they have changed the current fandom world, our hearts and the js world in 5 very awesome minutes! This talk is to prove a point that stars mean nothing in this case.

https://reactiveconf.com/

tlakomy

In this talk I'd like to use 5 minutes of my time to explain to the audience why jQuery is simply way better than React.

• Does React have a fadeIn() method? Nah, I don't think so. You need to install a react-transition-group package which weighs over 3GB.
• Can you do $.get(https://stackoverflow.com/questions/12345/adding_two_numbers_javascript) in React? NOPE.
• Remember React 3.3.1? Me neither, because they didn't make it. Meanwhile in jQuery land: https://code.jquery.com/jquery-3.3.1.min.js
• Can you learn jQuery for free? Sure! Can you learn React for free? It'll be $500 USD and your left kidney for a conference ticket.

And many, many more.

(This is a completely serious lightning talk proposal, I promise.)

swyxio

3. Clone Open Source Apps

You already know you should be making projects to learn things and potentially add to your portfolio. You've read your Malcolm Gladwell, you know that you need 10,000 hours of deliberate practice. Given you're just starting out, I have a slightly contentious suggestion for you: DON'T make anything new.

Your decision-making is a scarce resource. You start every day with a full tank, and as you make decisions through the day you gradually run low. We all know how good our late-late-night decisions are. Making a new app involves a thousand micro decisions - from what the app does, to how it should look, and everything in between. Decide now: Do you want to practice making technical decisions or product decisions?

Ok so you're coding. You know what involves making zero product decisions? Cloning things. Resist the urge to make your special snowflake (for now). Oh but then who would use yet another Hacker News clone? I've got news for you: No one was gonna use your thing anyway. You

tlakomy

Egghead Workshop Notes

Notes from Build an App with React Suspense, Hooks, and Context Workshop Setup with Michael Chan

• Write a detailed README with contact info, info about the workshop itself, license etc
• Create a folder for each lesson so folks won’t have to struggle with switching git branches every 15 minutes
• Give everyone a minute to process what they’ve learned and to figure out whether they have questions
• Reference the docs so once the workshop concludes everyone knows where to find the resources to refresh what they’ve learned
• As with egghead lessons, guide their eyes - if you’re explaining something, then select it in your IDE (at least hover over it)
• Take a minute to go over the questions from the chat, read the question out loud
• Don’t be afraid to experiment when there’s an interesting question, we’re all nerds here who love to try out new stuff

zehfernandes

Optimize assets

.mov to .mp4

Convert and remove the .mov file from all folders in the given directory.

find . -type f -name "*.mov" -exec bash -c 'ffmpeg -i "$0" -vcodec h264 "${0%.*}.mp4" && rm "$0"' "{}" \;

sarahbethfederman

// // LUI Next Colors
// // LUI Now colors live in @lendi-ui/color package
import hexToRgba from 'hex-to-rgba';

export const isHex = (str: string) => str.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/);

type Shade = Partial<950 | 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 | 25 | 0>;
type Format = 'hexadecimal' | 'rgba';
type Category = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'shade' | 'focus';
type ColorObject = Partial<{ [key in Shade]: { value: string; format: Format } }>;