Skip to content

Instantly share code, notes, and snippets.

View vasanthk's full-sized avatar

Vasa vasanthk

2.1k followers · 32 following
View GitHub Profile
@busypeoples
busypeoples / FlowTutorial.js
Last active July 17, 2023 10:12
Flow Fundamentals For JavaScript Developers
//
// MIT License
//
// Copyright (c) 2018 Ali Sharif
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
@acdlite
acdlite / coordinating-async-react.md
Last active March 20, 2022 12:27
Demo: Coordinating async React with non-React views

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

@developit
developit / *state-machine-component.md
Last active February 6, 2021 00:44
265b lib for building pure functional state machine components. https://github.com/developit/state-machine-component

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

@bigsergey
bigsergey / review-checklist.md
Last active May 8, 2024 20:01
Front-end Code Review Checklist

Review checklist

General

  1. Does the code work?
  2. Description of the project status is included.
  3. Code is easily understand.
  4. Code is written following the coding standarts/guidelines (React in our case).
  5. Code is in sync with existing code patterns/technologies.
  6. DRY. Is the same code duplicated more than twice?
@troch
troch / choosing-a-css-in-js-library.md
Last active October 18, 2020 17:52
Choosing a CSS in JS library

Choosing a CSS in JS library

Check comments below, this is only my opinion and a choice specific to my use case

We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.

Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:

@lazywithclass
lazywithclass / blog-post.md
Last active July 30, 2018 05:23
On tests, take home problems, and a HackerRank bookmarklet

On tests, take home problems, and a HackerRank bookmarklet - lazyblog

So recently I've been interviewing and as you can imagine that means doing take home problems and online tests.

I am not pointing fingers (so please continue hiring me lol), I am addressing the problem in the industry, because almost everyone is doing it in the same way, so you could say no one is directly responsible. Even though willingness to have a better process should be a thing.

@didi0613
didi0613 / update-app-to-react15.5.md
Last active May 30, 2017 20:22
Update to React 15.5

Update App to React 15.5

Pre Upgrade Steps

  1. Run a gulp build and take note of the bundle sizes.
  2. Make sure your dependencies/components are using component-archetype version13 and above.

React Code Changes

  1. Replace the following in your application/components:
@threepointone
threepointone / glam-for-css-folks.md
Last active September 4, 2022 07:43
why css purists will love glam

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

@davidhund
davidhund / performance-budget-notes.md
Created April 21, 2017 14:07
Performance Budget

Front-end Performance

The Case for FED Performance Optimisation

A fast website is essential for a good user experience (UX), conversion and findability.

Performance == User Experience == Conversion

For real-world examples of this see https://wpostats.com/

@DavidWells
DavidWells / css-with-react-checklist.md
Last active November 21, 2018 22:56
Lots of talk about different CSS solutions for React. This gist attempts to shed light on pros/cons of approaches.

Here is a checklist of all the things I need my CSS solution to handle.

I can explain any of the points. Leave a comment on the gist or tweet @DavidWells

Challenge: Take your favorite CSS solution and see how the checklist holds up.

  • Has ability Localize classes
  • Has ability to use global classes
  • Has ability to write raw CSS
  • Syntax highlighting and auto completion