Skip to content

Instantly share code, notes, and snippets.

View AdarshKonchady's full-sized avatar
🐶
Working on Web stuff !

Adarsh Konchady AdarshKonchady

🐶
Working on Web stuff !
View GitHub Profile
@tsiege
tsiege / The Technical Interview Cheat Sheet.md
Last active July 20, 2024 16:44
This is my technical interview cheat sheet. Feel free to fork it or do whatever you want with it. PLEASE let me know if there are any errors or if anything crucial is missing. I will add more links soon.

ANNOUNCEMENT

I have moved this over to the Tech Interview Cheat Sheet Repo and has been expanded and even has code challenges you can run and practice against!






\

@paulirish
paulirish / what-forces-layout.md
Last active July 22, 2024 06:32
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
anonymous
anonymous / index.html
Created March 30, 2016 09:00
JS Bin // source http://jsbin.com/kokoxe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
@siddharthkp
siddharthkp / reactivconf-2017-proposal.md
Last active February 25, 2024 10:06
Building applications for the next billion users
@kakadiadarpan
kakadiadarpan / reactiveconf-2017-async-in-redux-cfp.md
Last active February 25, 2024 10:05
Different approaches to handling asynchronous Redux actions.

Async in Redux

This is a CFP for ReactiveConf open call for lightning talks. If you'd like to see this talk become a reality, please ⭐️ star this gist. #ReactiveConf

If you're on your phone, please request the desktop site to star this gist 😇

@manjula-dube
manjula-dube / ReactiveConf-CFP.md
Last active January 5, 2024 20:17
CFP: Reactive Conf: Jest & Enzyme complement each other.
This is a proposal for ReactiveConf 2017 open call for Lightning talks. If you'd like to make this talk happen, please 🌟 this gist and retweet my tweet. 🙏

If you're on your phone, please request the 🖥 desktop site to star this gist 😇

I would talk about some myths on Jest & Enzyme. Moreover to stop the comparison of Jest and Enzyme. Instead would focus on how they can work together to test well your React Components. The talk would focus on "How Jest and Enzyme complement each other" and can help you test React components in a better way.

  1. If you are writing tests: you are already winning.
  2. If you are not writing tests:let me encourage you to start.
  3. Jest.
  4. Snapshot Testing.
@threepointone
threepointone / 0 basics.md
Last active March 21, 2023 01:53
css-in-js

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' };
@pmeenan
pmeenan / worker.js
Created November 8, 2021 20:21
Adding Priority Hints with Cloudflare Workers
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
});
async function handleRequest(request) {
const url = new URL(request.url);
const host = request.headers.get('x-host');
if(!host) {
return new Response('x-host header missing', {status: 403});
}
@pmeenan
pmeenan / wpt-hints.md
Last active March 18, 2023 16:48
Testing Priority Hints with WebPageTest

Priority Hints is rolling out to Chrome in the 101 release which is currently available in the Dev/Beta channel of Chrome and available in WebPageTest when using the Chrome Canary browser selection.

To make it easier to experiment with priority hints (particularly for LCP images) without making production changes, I set up a couple of public Cloudflare Workers that can be used dynamically with WebPageTest to inject priority hints into existing pages and to preload arbitrary images when combined with WebPageTest's overrideHost script command.

Injecting Priority Hints

There is a cloudflare worker at hint.perf.workers.dev that will take a CSS selector from the x-hint HTTP header and add fetchpriority=high to any elements in the HTML that match the selector. The easiest way to experiment with this is to use Chrome's dev tools locally, identify the element that hosts the imag