Skip to content

Instantly share code, notes, and snippets.

View riteshgurung's full-sized avatar
🏠
Working from home

Ritesh Gurung riteshgurung

🏠
Working from home
16 followers · 19 following
View GitHub Profile
@riteshgurung
riteshgurung / instructions.md
Last active January 13, 2023 02:24 — forked from skluck/instructions.md
Installing Homebrew in $HOME

1 Ensure xcode is up to date

Download the latest version from the Mac App Store

2 Install Command Line Tools

Either run xcode-select --install or if that fails, manually download them from the Apple Developer Site.

@riteshgurung
riteshgurung / settings.local.php
Created May 29, 2022 17:22 — forked from keopx/settings.local.php
Drupal 8 Redis settings.local.php
<?php
/**
* Set redis configuration.
*/
/** @see: https://docs.platform.sh/frameworks/drupal8/redis.html */
if (extension_loaded('redis')) {
// Set Redis as the default backend for any cache bin not otherwise specified.
// $settings['cache']['default'] = 'cache.backend.redis';
@riteshgurung
riteshgurung / checkForUndefinedCSSClasses.js
Created June 16, 2021 04:32 — forked from broofa/checkForUndefinedCSSClasses.js
ES module for detecting undefined CSS classes (uses mutation observer to monitor DOM changes). `console.warn()`s undefined classes.
/**
* Sets up a DOM MutationObserver that watches for elements using undefined CSS
* class names. Performance should be pretty good, but it's probably best to
* avoid using this in production.
*
* Usage:
*
* import cssCheck from './checkForUndefinedCSSClasses.js'
*
* // Call before DOM renders (e.g. in <HEAD> or prior to React.render())
@riteshgurung
riteshgurung / for-snook.md
Created February 23, 2021 09:53 — 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.

@riteshgurung
riteshgurung / MonolithicComponentsComposableComponents.md
Created February 23, 2021 09:53 — forked from busypeoples/MonolithicComponentsComposableComponents.md
Monolithic Components, Composable Components

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.

@riteshgurung
riteshgurung / react.md
Created February 23, 2021 09:52 — forked from lpalmes/react.md
React and Reconcilers in Reason

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:

@riteshgurung
riteshgurung / everything-i-know-about-routing.md
Created February 23, 2021 09:52 — forked from ryanflorence/everything-i-know-about-routing.md

Everything I Know About UI Routing

Definitions

  1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
    1. pathname - The "file/directory" portion of the URL, like invoices/123
    2. search - The stuff after ? in a URL like /assignments?showGrades=1.
    3. query - A parsed version of search, usually an object but not a standard browser feature.
    4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
    5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.
@riteshgurung
riteshgurung / Reach Philosophy.md
Created February 23, 2021 09:51 — forked from ryanflorence/Reach Philosophy.md

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

  • Accessible
  • Composable
  • Stylable
@riteshgurung
riteshgurung / _1_"script async defer" blocks "load" event.md
Created February 23, 2021 09:51 — 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

@riteshgurung
riteshgurung / async-defer-module.md
Created February 23, 2021 09:46 — forked from jakub-g/async-defer-module.md
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)