Skip to content

Instantly share code, notes, and snippets.

View vasanthk's full-sized avatar

Vasa vasanthk

View GitHub Profile
@vasanthk
vasanthk / for-snook.md
Created December 16, 2018 20:37 — forked from threepointone/for-snook.md
For Snook

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

Monolithic Components, Composable Components

Introduction

Building reusable UI components is a non trivial task, as we need to anticipate a number of things when planing for reuseability. On the one end of the spectrum we want to enable customization and on the other side we want to avoid developers doing the wrong thing, like breaking the component or displaying invalid states.

To get a better understanding of what we need to think about and consider upfront, we will build a non-trivial UI component, that displays tags. Our Tags component will take care of managing and displaying tags.

The following examples are all built with Tachyons and React, but these ideas apply to any UI component and any general styling approach.

Difference between Debounce and Throttle

Debounce

Debounce a function when you want it to execute only once after a defined interval of time. If the event occurs multiple times within the interval, the interval is reset each time.
Example A user is typing into an input field and you want to execute a function, such as a call to the server, only when the user stops typing for a certain interval, such as 500ms.

Throttle

@vasanthk
vasanthk / git_submodules.md
Created July 10, 2018 21:36 — forked from gitaarik/git_submodules.md
Git Submodules basic explanation

Git Submodules basic explanation

Why submodules?

In Git you can add a submodule to a repository. This is basically a repository embedded in your main repository. This can be very useful. A couple of advantages of using submodules:

  • You can separate the code into different repositories.
@vasanthk
vasanthk / draft.md
Created April 25, 2017 23:19 — forked from mpj/draft.md
Feedback for episode draft: 7 critical traits for a normal programmer

7 critical traits for a normal programmer

EARLY DRAFT FOR NEXT EPISODE, PLEASE PROVIDE FEEDBACK

This week I tweeted and tooted this question:

”What do you think are critical traits in a programmer? NOT to be super 10x or anything - just to feel good and function well professionally.”

Link to full threads here: [https://twitter.com/mpjme/status/855691565460848640]

@vasanthk
vasanthk / _1_"script async defer" blocks "load" event.md
Created February 9, 2020 20:59 — forked from jakub-g/_1_"script async defer" blocks "load" event.md
Beware of "script async defer" blocking HTML "load" event

Beware of <script async defer> blocking HTML "load" event

2015.10.07 t

On the importance of simulated latency testing, and bulletproofing your page from the third-party JS load failures

TL;DR

@vasanthk
vasanthk / constants-es5.js
Last active January 11, 2021 13:28
Constants in ES5 - How does this work?
'use strict';
// define favorite as a non-writable `constant` and give it the value 7
Object.defineProperties(window, {
favorite: {
value: 7,
enumerable: true
}
});
// ^ descriptors are by default false and const are enumerable
var favorite = 7;
@vasanthk
vasanthk / RootedTreeTraversal.js
Created December 16, 2015 04:29 — forked from dineshrajpurohit/RootedTreeTraversal.js
Preorder, Postorder,Inorder and Levelorder traversal of rooted trees using Javascript
/**
*
* Dinesh
*
* RootedTreeTraversal
* - Preorder Traversal
* - Postorder Traversal
* - Inorder Traversal
* - Levelorder Traversal
*
@vasanthk
vasanthk / es7-class.md
Created November 18, 2015 08:11 — forked from ericelliott/es7-class.md
Let's fix `class` in ES7

Two Simple Changes to Simplify class

I'm not suggesting drastic action. I don't want to break backwards compatibility. I simply want to make the class feature more usable to a broader cross section of the community. I believe there is some low-hanging fruit that can be harvested to that end.

Imagine AutoMaker contained class Car, but the author wants to take advantage of prototypes to enable factory polymorphism in order to dynamically swap out implementation.

Stampit does something similar to this in order to supply information needed to inherit from composable factory functions, known as stamps.

This isn't the only way to achieve this, but it is a convenient way which is compatible with .call(), .apply(), and .bind().

@vasanthk
vasanthk / books.md
Created January 6, 2016 20:16 — forked from bevacqua/books.md
Books I plan on buying this week

Web Performance

  • High Performance Web Sites: Essential Knowledge for Front-End Engineers
  • High Performance JavaScript (Build Faster Web Application Interfaces)
  • Even Faster Web Sites: Performance Best Practices for Web Developers
  • Designing for Performance: Weighing Aesthetics and Speed

Web Design

  • Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement (2nd Edition) (Voices That Matter)