Skip to content

Instantly share code, notes, and snippets.

View adi518's full-sized avatar
๐ŸŽฏ
Focusing

Adi adi518

๐ŸŽฏ
Focusing
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active June 20, 2025 23:33
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
@vasanthk
vasanthk / System Design.md
Last active June 20, 2025 19:51
System Design Cheatsheet

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

  1. Clarify and agree on the scope of the system
  • User cases (description of sequences of events that, taken together, lead to a system doing something useful)
    • Who is going to use it?
    • How are they going to use it?
@DarrenN
DarrenN / get-npm-package-version
Last active June 20, 2025 19:20 — forked from yvele/get-npm-package-version.sh
Extract version from package.json (NPM) using bash / shell
# Version key/value should be on his own line
PACKAGE_VERSION=$(cat package.json \
| grep version \
| head -1 \
| awk -F: '{ print $2 }' \
| sed 's/[",]//g')
echo $PACKAGE_VERSION
@rxaviers
rxaviers / gist:7360908
Last active June 20, 2025 13:05
Complete list of github markdown emoji markup

People

:bowtie: :bowtie: ๐Ÿ˜„ :smile: ๐Ÿ˜† :laughing:
๐Ÿ˜Š :blush: ๐Ÿ˜ƒ :smiley: โ˜บ๏ธ :relaxed:
๐Ÿ˜ :smirk: ๐Ÿ˜ :heart_eyes: ๐Ÿ˜˜ :kissing_heart:
๐Ÿ˜š :kissing_closed_eyes: ๐Ÿ˜ณ :flushed: ๐Ÿ˜Œ :relieved:
๐Ÿ˜† :satisfied: ๐Ÿ˜ :grin: ๐Ÿ˜‰ :wink:
๐Ÿ˜œ :stuck_out_tongue_winking_eye: ๐Ÿ˜ :stuck_out_tongue_closed_eyes: ๐Ÿ˜€ :grinning:
๐Ÿ˜— :kissing: ๐Ÿ˜™ :kissing_smiling_eyes: ๐Ÿ˜› :stuck_out_tongue:
@MWins
MWins / project-ideas01.md
Last active June 20, 2025 08:32
Back end Projects - list

Project Ideas

Ok. I'm going to list off some ideas for projects. You will have to determine if any particular idea is good enough to include in a portfolio. These aren't creative ideas. They likely already exist. Some are way too advanced while others are simplistic.

I will recommend to post any project you make to github and make a github project page for it. Explain in as much detail as possible how you made it, how it can be improved etc. Document it.

If you pick an advanced idea, setup a development roadmap and follow it. This will show some project management skills.

Another piece of advice for those who are design challenged. Use different front end frameworks and use different themes for those frameworks to provide appealing designs without looking like yet another bootstrap site.

@octocat
octocat / .gitignore
Created February 27, 2014 19:38
Some common .gitignore configurations
# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so
# Packages #
@PurpleBooth
PurpleBooth / README-Template.md
Last active June 18, 2025 21:40
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@oliveratgithub
oliveratgithub / emojis.json
Last active June 18, 2025 15:30
Emoji-list with emojis, names, shortcodes, unicode and html entities [massive list]
{
"emojis": [
{"emoji": "๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง", "name": "family: woman, woman, girl, girl", "shortname": ":woman_woman_girl_girl:", "unicode": "1F469 200D 1F469 200D 1F467 200D 1F467", "html": "👩‍👩‍👧‍👧", "category": "People & Body (family)", "order": ""},
{"emoji": "๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ", "name": "family: woman, woman, girl, boy", "shortname": ":woman_woman_girl_boy:", "unicode": "1F469 200D 1F469 200D 1F467 200D 1F466", "html": "👩‍👩‍👧‍👦", "category": "People & Body (family)", "order": ""},
{"emoji": "๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ", "name": "family: woman, woman, boy, boy", "shortname": ":woman_woman_boy_boy:", "unicode": "1F469 200D 1F469 200D 1F466 200D 1F466", "html": "👩‍👩‍👦‍👦", "category": "People & Body (family)", "order": ""},
{"emoji": "๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง", "name": "family: man, woman, girl, girl", "shortname": ":man_woman_girl_girl:", "unicode": "1F468 200D 1F469 200D 1F467 200D 1F467", "html": "👨‍👩&z
@roachhd
roachhd / README.md
Last active June 18, 2025 06:46
EMOJI cheatsheet ๐Ÿ˜›๐Ÿ˜ณ๐Ÿ˜—๐Ÿ˜“๐Ÿ™‰๐Ÿ˜ธ๐Ÿ™ˆ๐Ÿ™Š๐Ÿ˜ฝ๐Ÿ’€๐Ÿ’ข๐Ÿ’ฅโœจ๐Ÿ’๐Ÿ‘ซ๐Ÿ‘„๐Ÿ‘ƒ๐Ÿ‘€๐Ÿ‘›๐Ÿ‘›๐Ÿ—ผ๐Ÿ”ฎ๐Ÿ”ฎ๐ŸŽ„๐ŸŽ…๐Ÿ‘ป

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: ๐Ÿ˜„

@faressoft
faressoft / dom_performance_reflow_repaint.md
Last active June 14, 2025 16:56
DOM Performance (Reflow & Repaint) (Summary)

DOM Performance

Rendering

  • How the browser renders the document
    • Receives the data (bytes) from the server.
    • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
    • Turns tokens into nodes.
    • Turns nodes into the DOM tree.
  • Builds CSSOM tree from the css rules.