Skip to content

Instantly share code, notes, and snippets.

View dhruvdutt's full-sized avatar

Dhruvdutt Jadhav dhruvdutt

292 followers · 111 following
View GitHub Profile
@threepointone
threepointone / feature-flags.md
Last active May 24, 2023 11:03
Feature flags: why, how, all that

(I'm enjoying doing these raw, barely edited writeups; I hope they're useful to you too)

Feature flags

This is my own writeup on feature flags; for a deep dive I'd recommend something like Martin Fowler's article (https://martinfowler.com/articles/feature-toggles.html).

So. Feature flags. The basic idea that you'll store configuration/values on a database/service somewhere, and by changing those values, you can change the user experience/features for a user on the fly.

Let's say that you're building a new feature, called 'new-button' which changes the color of buttons, which is currently red, to blue. Then you'd change code that looks like this -

@kamleshchandnani
kamleshchandnani / securing-passwords.md
Created September 27, 2019 08:46
Securing passwords

Securing passwords

Securing passwords is the most crucial thing when it comes to web security since if your passwords are compromised your information will be at risk.

The What?

So man in the middle attack is quite often when it comes to web security and especially while dealing with passwords between a client and the server. This attack is basically before a request reaches the server someone can spoof in between and steal the information and later uses it to replay the action and thus getting access to the victim's sensitive information.

The How?

Let's talk about how passwords are compromised.

  • Assume if you are storing the passwords in plain texts in your database and if the attacker gets the password from the request before it reaches the server he can replay the actions since the passwords were plain texts.
  • If you encrypt it on client side the attacker can read the hashing algorithm on the client since everything in JavaScript can be exposed.
@kamleshchandnani
kamleshchandnani / CSRF-attack.md
Created September 27, 2019 08:01
CSRF Attack

CSRF

So let's discuss about CSRF

The What?

CSRF stands for Cross Site Request Forgery. It's a kind of attack that mostly happens by compromising users cookies and perform an action which a user didn't intend to.

The How?

  • Imagine there's an attacker by the name Kamlesh and the Victim by the name Shankar.
  • Now Kamlesh wants to to do a malicious bank transaction from Shankar's account to his own account. Let's take HDFC bank for an example here.
  • To begin with Kamlesh logs on to his own HDFC bank account and then navigates to transactions page and clicks on view page source and copies the amount transform html form. Assume this is what a typical form looks like
<html lang="en">
@kamleshchandnani
kamleshchandnani / bundling-design-systems.md
Last active September 21, 2023 03:43

Bundling Design Systems/Component Libraries

First of all you need to decide who will be your target consumers based on the following:

  1. They have the same environment(webpack config, babel config) setup as you where you built your design system(this is mostly possible if you use monorepos/same configs where all the teams share the same environment).

  2. They don't have the same environment which is the case when you work in bigger teams and you want to distribute your design system as any other npm package which is already built and can be used directly.

If your use case falls under case no. 1 then you can just compile the source babel src -d build and leave the bundling to the consumer projects tools(webpack/rollup)

@kamleshchandnani
kamleshchandnani / async-defer-module.md
Created June 20, 2019 16:59 — 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)

@jakub-g
jakub-g / async-defer-module.md
Last active April 12, 2024 07:32
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)

@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' };
@divyanshu013
divyanshu013 / code.ext
Last active May 21, 2020 02:18
My VSCode extensions
code --install-extension EditorConfig.EditorConfig
code --install-extension Perkovec.emoji
code --install-extension SintrumIT.theme-oceanic-next-italic
code --install-extension agauniyal.vscode-caniuse
code --install-extension alefragnani.project-manager
code --install-extension andys8.jest-snippets
code --install-extension arcticicestudio.nord-visual-studio-code
code --install-extension be5invis.vscode-custom-css
code --install-extension bierner.markdown-emoji
code --install-extension bungcip.better-toml
@divyanshu013
divyanshu013 / .zshrc
Last active October 10, 2018 08:00
My zsh config
# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH
# Path to your oh-my-zsh installation.
export ZSH="/home/div/.oh-my-zsh"
# Set name of the theme to load. Optionally, if you set this to "random"
# it'll load a random theme each time that oh-my-zsh is loaded.
@divyanshu013
divyanshu013 / code.settings
Last active May 21, 2020 02:18
My VSCode settings
{
"vscode_custom_css.imports": [
"file:///Users/divyanshu/.vscode/style.css"
],
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
"javascript.validate.enable": false,
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"editor.multiCursorModifier": "ctrlCmd",
"workbench.startupEditor": "newUntitledFile",