Skip to content

Instantly share code, notes, and snippets.


Alessandro Metta n0f3

View GitHub Profile
croaky / App.tsx
Last active Oct 13, 2020
Parcel + TypeScript + React
View App.tsx
import * as React from 'react'
// routing, etc.
import { Reset } from '~/ui/shared/Reset'
export class App extends React.Component {
public render() {
return (

I bundled these up into groups and wrote some thoughts about why I ask them!

If these helped you, I'd love to hear about it!! I'm on twitter @vcarl_ or send me an email

Onboarding and the workplace

  • How long will it take to deploy my first change? To become productive? To understand the codebase?
  • What kind of equipment will I be provided? Will the company pay/reimburse me if I want something specific?
View 20-bt-auto-enable-a2dp.rules
# /etc/udev/rules.d/20-bt-auto-enable-a2dp.rules
# hxss
SUBSYSTEM=="bluetooth", ACTION=="add", RUN+="/home/hxss/.config/scripts/xorg/"
markerikson /
Last active Mar 1, 2020
Redux container/presentational structuring

[8:27 PM] cquill: @acemarke Right, so many portions of the UI will be connected. But does each connected portion typically get its own container component? Seems verbose and redundant to have the following for each CRUD resource: UserList, UserListContainer, UserView, UserViewContainer, UserEdit, UserEditContainer, UserNew, UserNewContainer. Is there a simpler way?
[9:56 PM] acemarke: @cquill : this leads into one of my favorite (?) semi-rants, and one that I apparently need to write down so I can paste it
[9:57 PM] acemarke: A "container" component is simply any component whose primary job is to fetch data from somewhere, and pass that data on to its children
[9:58 PM] acemarke: With Redux, the wrapper components generated by connect are "container" components, since their job is to extract data from the Redux store
[9:58 PM] acemarke: I generally dislike the somewhat-common approach of trying to divide everything into a "components" folder and a "containers" folder
[9:59 P

acdlite / app.js
Last active Aug 18, 2020
Quick and dirty code splitting with React Router v4
View app.js
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
vbsessa /
Last active Oct 9, 2020
How to customize Chrome devtools fonts
  1. Enable #enable-devtools-experiments flag in chrome://flags section.

  2. Open Chorme Devtools and check Settings > Experiments > Allow custom UI themes.

  3. Create the following four files in a dedicated folder.

    3.1. devtools.html

    <body><script src="devtools.js"></script></body>
View My Sublime 3 settings
"auto_complete_commit_on_tab": true,
"color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
"draw_white_space": "all",
"font_face": "Fira Mono",
"font_size": 20,
"tab_size": 2,
"theme": "Brogrammer.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_automatic_white_space": true,
markerikson / redux-timer-middleware.js
Last active Jan 7, 2020
Sample Redux timer middleware
View redux-timer-middleware.js
function timerMiddleware({dispatch, getState}) {
const timers = {};
return next => action => {
if(action.type == "START_TIMER") {
const {action, timerName, timerInterval} = action.payload;
mxstbr /
Last active Oct 19, 2020
Enable tab completion for JSX with Emmet in Atom

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

Gif of the tab completion working

  1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
  2. Add these lines of code to your keymap:
You can’t perform that action at this time.