Skip to content

Instantly share code, notes, and snippets.

View yangshun's full-sized avatar
😎
Ruining websites since 2013

Yangshun Tay yangshun

😎
Ruining websites since 2013
View GitHub Profile
@sebmarkbage
sebmarkbage / WhyReact.md
Created September 4, 2019 20:33
Why is React doing this?

I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.

I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.

"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

@gaearon
gaearon / prepack-gentle-intro-1.md
Last active February 13, 2024 14:30
A Gentle Introduction to Prepack, Part 1

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at robert.balicki@gmail.com or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

@EdOverflow
EdOverflow / github_bugbountyhunting.md
Last active April 20, 2024 01:36
My tips for finding security issues in GitHub projects.

GitHub for Bug Bounty Hunters

GitHub repositories can disclose all sorts of potentially valuable information for bug bounty hunters. The targets do not always have to be open source for there to be issues. Organization members and their open source projects can sometimes accidentally expose information that could be used against the target company. in this article I will give you a brief overview that should help you get started targeting GitHub repositories for vulnerabilities and for general recon.

Mass Cloning

You can just do your research on github.com, but I would suggest cloning all the target's repositories so that you can run your tests locally. I would highly recommend @mazen160's GitHubCloner. Just run the script and you should be good to go.

$ python githubcloner.py --org organization -o /tmp/output

Connect 4

Connect 4 is a game where two players aim to connect up their pieces to make 4 in a row. Each player takes turn to choose a column to drop their pieces. The first player to connect 4 pieces in a row wins the game. Player 1's pieces are represented by X and Player 2 by O. The game will start with player 1 first. The board dimensions is 6 x 7. Your cli game will have to prompt the user to enter the column number (1-based) that they want to place the next piece in.

.......
.......
.......
@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

Problems faced by Grab UI

  1. Not possible to have project specific overrides of variables
  2. CSS modules not specific enough to override Grab UI (Semantic UI) classes as CSS modules only apply one class where Semantic UI applies two classes (.ui.) and has higher specificity.
  3. Import theme variables from Grab UI theme configs to use in project-specific components

Requirements

  • No build requirements
  • Small and lightweight
@addyosmani
addyosmani / scratchpad.md
Last active October 25, 2017 15:34
Webpack Performance Presets

"We need Webpack presets" and "Webpack and its plugins are too hard to configure correctly" have been the number one cause of developer pain shared with me from large sites adopting Progressive Web Apps and optimising their load performance.

If I was building a Webpack preset pack for performance, I might use the following:

  • Ensure you're using a production build of your framework: new webpack.DefinePlugin({ 'process.env': env })
  • Minify your JS: webpack.optimize.UglifyJsPlugin
  • Compress your resources (GZip): compression-webpack-plugin
  • Split your vendor chunks: CommonsChunkPlugin
@jevakallio
jevakallio / reactiveconf-slam-poetry.md
Last active July 7, 2021 19:57
#ReactiveConf 2017 Lightning Talk Submission: JavaScript Slam Poetry

TL;DR: If you want to see me perform a spoken word poem about JavaScript in front of 1000 people (and on video), please ⭐ star this gist. If you're on mobile, you'll need to request desktop site.

JavaScript Slam Poetry

Javascript! Slam! Poetry!

@addyosmani
addyosmani / preprocessing.md
Last active January 17, 2023 17:07
JavaScript preprocessing/precompilation

Problem: How can we preprocess JavaScript (at build-time or on the server-side) so engines like V8 don't have to spend as much time in Parse? This is a topic that involves generating either bytecode or a bytecode-like-abstraction that an engine would need to accept. For folks that don't know, modern web apps typically spend a lot longer in Parsing & Compiling JS than you may think.

  • Yoav: This can particularly be an issue on mobile. Same files getting parsed all the time for users. Theoretically if we moved the parsing work to the server-side, we would have to worry about it less.
  • One angle to this problem is we all ship too much JavaScript. That's one perspective. We could also look at preprocessing.
  • We've been talking about this topic over the last few weeks a bit with V8. There were three main options proposed.
    1. Similar to what optimize-js does. Identify IIFEs and mark them as such so the browser and VMs heuristics will catch them and do a better job than today. optimize-js only tackles IIFE bu