Skip to content

Instantly share code, notes, and snippets.

Vasa vasanthk

Block or report user

Report or block vasanthk

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View everything-i-know-about-routing.md

Everything I Know About UI Routing

Ingredients

  1. Location
    1. pathname
    2. state
    3. search/query
    4. hash
  2. Path
@vasanthk
vasanthk / react.md
Created Jan 1, 2019 — forked from lpalmes/react.md
React and Reconcilers in Reason
View react.md

React

This is the base of all projects and it will include the foundation for all potential react-based projects in Reason.

This base package should include a ReasonReact api to promote collaboration and familiarity with people using a ReasonReact, and for the modern world of React this should also include a Hooks api that currently revery uses.

React module

All blocks in Jsx are of type React.reactElement. This reactElement should represent:

View MonolithicComponentsComposableComponents.md

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.

View 0 basics.md

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' };
View for-snook.md

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.

@vasanthk
vasanthk / README.md
Created Dec 15, 2018 — forked from roachhd/README.md
EMOJI cheatsheet 😛😳😗😓🙉😸🙈🙊😽💀💢💥💏👫👄👃👀👛👛🗼🔮🔮🎄🎅👻
View README.md

EMOJI CHEAT SHEET

Emoji emoticons listed on this page are supported on Campfire, GitHub, Basecamp, Redbooth, Trac, Flowdock, Sprint.ly, Kandan, Textbox.io, Kippt, Redmine, JabbR, Trello, Hall, plug.dj, Qiita, Zendesk, Ruby China, Grove, Idobata, NodeBB Forums, Slack, Streamup, OrganisedMinds, Hackpad, Cryptbin, Kato, Reportedly, Cheerful Ghost, IRCCloud, Dashcube, MyVideoGameList, Subrosa, Sococo, Quip, And Bang, Bonusly, Discourse, Ello, and Twemoji Awesome. However some of the emoji codes are not super easy to remember, so here is a little cheat sheet. ✈ Got flash enabled? Click the emoji code and it will be copied to your clipboard.

People

:bowtie: 😄

@vasanthk
vasanthk / 1. bad.js
Created Dec 14, 2018 — forked from jasnell/1. bad.js
Avoid Creating Unnecessary Promises!!
View 1. bad.js
const { promisify } = require('util')
const timeout = promisify(setTimeout)
async function bar() { await timeout(1000) }
// The idea here is that we don't know if foo
// is going to return a Promise or not, so just
// in case, force it to return a Promise.
// Unfortunately, doing it this way creates
// quite a few additional unnecessary Promises
View _1_"script async defer" blocks "load" event.md

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 / CordovaDevtools.md
Created Aug 6, 2018 — forked from Mohamed3on/CordovaDevtools.md
Inspect Cordova/Ionic apps with Chrome Devtools
View CordovaDevtools.md
  1. Connect your Android device
  2. Make sure it's working correctly with adb and you can find it when you run adb devices
  3. In the directory of your app, run cordova run android --device, Now the app will run on your device
  4. Go to chrome://inspect/#devices on your Chrome browser, and select your app and click inspect
  5. Now you can inspect the HTML/CSS, and debug your JS with ease!
@vasanthk
vasanthk / git_submodules.md
Created Jul 10, 2018 — forked from gitaarik/git_submodules.md
Git Submodules basic explanation
View git_submodules.md

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.
You can’t perform that action at this time.