Skip to content

Instantly share code, notes, and snippets.

View kevinSuttle's full-sized avatar

Kevin Suttle kevinSuttle

View GitHub Profile
@bvaughn
bvaughn / index.md
Last active April 3, 2024 07:41
Interaction tracing with React

This API was removed in React 17


Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.

@evancz
evancz / data-interchange.md
Last active April 29, 2024 16:53
Why do I have to write JSON decoders in Elm?

A vision for data interchange in Elm

How do you send information between clients and servers? What format should that information be in? What happens when the server changes the format, but the client has not been updated yet? What happens when the server changes the format, but the database cannot be updated?

These are difficult questions. It is not just about picking a format, but rather picking a format that can evolve as your application evolves.

Literature Review

By now there are many approaches to communicating between client and server. These approaches tend to be known within specific companies and language communities, but the techniques do not cross borders. I will outline JSON, ProtoBuf, and GraphQL here so we can learn from them all.

@wojteklu
wojteklu / clean_code.md
Last active May 11, 2024 07:48
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

@ebidel
ebidel / fancy-tabs-demo.html
Last active March 8, 2024 23:08
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<style>
body {
margin: 0;
}
/* Style the element from the outside */
/*
fancy-tabs {
margin-bottom: 32px;

From zero to microservice with 𝚫 now

The following guide will show you how to deploy a simple microservice written in JavaScript using 𝚫 now.

It uses Open Source tools that are widely available, tested and understood:

  • Node.JS
  • NPM
  • Express
@jonathantneal
jonathantneal / Instructions.md
Last active March 8, 2016 16:20 — forked from daneden/Instructions.md
Remap right ALT key to Emoji on Mac

Remapping the right ALT key to open the emoji selector on Mac

  1. Install Karabiner
  2. Open Karabiner and go to Misc & Uninstall -> Open private.xml
  3. Use the contents of private.xml and save
  4. In Karabiner, go to Change Keys -> Reload XML
  5. Enable “Option_R to Emoji”
  6. 🎉
@daneden
daneden / Instructions.md
Created December 1, 2015 00:25
Remap Caps Lock to Emoji on Mac

How to remap the caps lock key to the emoji selector on Mac

  1. Go to System Preferences -> Keyboard -> Modifier Keys...
  2. Change “Caps Lock” to “No action”
  3. Install Seil
  4. Change the Caps Lock key in Seil to keyCode 80 (F19)
  5. Install Karabiner
  6. Open Karabiner and go to Misc & Uninstall -> Open private.xml
  7. Copy the contents of this gist's example to the XML file and save
  8. In Karabiner, go to Change Keys -> Reload XML
@staltz
staltz / migration-guide.md
Last active December 19, 2023 22:14
How to show migration guides in GitHub Markdown

How to show migration guides in GitHub Markdown

Use the diff code highlighting tag.

  ```diff
  - foo
  + bar

Example:

@wesbos
wesbos / tab-trigger.js
Created November 16, 2015 19:33
How to properly get a TAB trigger working with Emmet inside of JSX
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{
@0XDE57
0XDE57 / config.md
Last active April 18, 2024 04:36
Firefox about:config privacy settings

ABOUT

about:config settings to harden the Firefox browser. Privacy and performance enhancements.
To change these settings type 'about:config' in the url bar. Then search the setting you would like to change and modify the value. Some settings may break certain websites from functioning and rendering normally. Some settings may also make firefox unstable. I am not liable for any damages/loss of data.

Not all these changes are necessary and will be dependent upon your usage and hardware. Do some research on settings if you don't understand what they do. These settings are best combined with your standard privacy extensions (HTTPS Everywhere No longer required: Enable HTTPS-Only Mode, NoScript/Request Policy, uBlock origin, agent spoofing, Privacy Badger etc), and all plugins set to "Ask To Activate".