Skip to content

Instantly share code, notes, and snippets.

View jatin33's full-sized avatar
🎯
Focusing

Jatin Panjwani jatin33

🎯
Focusing
View GitHub Profile

MongoDB Cheat Sheet

Show All Databases

show dbs

Show Current Database

@dferber90
dferber90 / visual-regression-testing.md
Last active July 2, 2023 08:45
Visual Regression Testing in Jest

Visual Regression Testing with Jest

This is a walkthrough of how to set up Visual Regression Testing with Jest for an application created with create-react-app.

The following walkthrough uses React as an example, but the approach should work for any modern frontend library! I assume it can be used with Angular, Vue, Cycle.js and more.

This gist walks you through a create-react-app application as an example of how to set up Visual Regression Testing in Jest using libraries I wrote recently which enable this: jsdom-screenshot, jest-transform-css and jest-transform-file.

1-In the github repo on Settings > Integration & Services, enable
2-Go to travisCI page and enable the repo
3-Configure the env variables on TravisCI so that it is not necessary to save credentials on github
-in the project Settings on TravisCI, add the entry for netlify site id: NETLIFY_SITE_ID - <site_id from .netlify file generated on netlify create>
-create a netlify access token for TravisCI
-On Netlify Dashboard, Go to Account Settings > OAuth Applications (https://app.netlify.com/account/applications) > Personal access tokens and press New Access Token
-Name it anything, but to make it easier the suggestion is name TravisCI.
-Generate it and COPY it - you won’t see it again!
-in the project Settings on TravisCI, add the entry for netlify personal access token generated for TravisCI: NETLIFY_ACCESS_TOKEN
4-Generate a .travis.yml file in the local repo
@faressoft
faressoft / dom_performance_reflow_repaint.md
Last active May 6, 2024 06:11
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.
@yangshun
yangshun / using-eslint-with-prettier.md
Last active March 22, 2023 13:50
Comparison between tools that allow you to use ESLint and Prettier together.
prettier-eslint eslint-plugin-prettier eslint-config-prettier
What it is A JavaScript module exporting a single function. An ESLint plugin. An ESLint configuration.
What it does Runs the code (string) through prettier then eslint --fix. The output is also a string. Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output. This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb.
How to use it Either calling the function in your code or via [prettier-eslint-cli](https://github.co
@fokusferit
fokusferit / enzyme_render_diffs.md
Last active April 15, 2024 09:41
Difference between Shallow, Mount and render of Enzyme

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

  • constructor
  • render
@anthonyray
anthonyray / gist:398fde676a7704c03d6624155ba0011e
Last active May 6, 2024 06:15
Set up OhMyZsh on Amazon EC2 instance running Ubuntu Server 14.04
  1. Connect to your EC2 instance
  2. Install zsh : sudo apt-get update && sudo apt-get install zsh
  3. Edit your passwd configuration file to tell which shell to use for user ubuntu : sudo vim /etc/passwd
  4. Look for ubuntu user, and replace bin/bash by bin/zsh
  5. Install OhMyZsh : sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"
  6. Disconnect from your instance and reconnect it.
@wojteklu
wojteklu / clean_code.md
Last active May 12, 2024 17:57
Summary of 'Clean code' by Robert C. Martin

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.


General rules

  1. Follow standard conventions.
  2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
  3. Boy scout rule. Leave the campground cleaner than you found it.
  4. Always find root cause. Always look for the root cause of a problem.

Design rules

@michaellihs
michaellihs / tmux-cheat-sheet.md
Last active May 9, 2024 21:58
tmux Cheat Sheet
@gaearon
gaearon / connect.js
Last active April 11, 2024 06:46
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (