Skip to content

Instantly share code, notes, and snippets.

View althaffe's full-sized avatar

Muhammad Althaf althaffe

6 followers · 2 following
View GitHub Profile
@ivenmarquardt
ivenmarquardt / todo-app.js
Last active May 14, 2022 03:36
Functional Reactive Programming (FRP) implemented with a couple rules, types and combinators
// Based on this blog post: https://medium.com/@iquardt/taming-the-dom-50c8f1a6e892
/* RULES
* Only the program may manipulate the output display, never the user
* User input is presented in the form of events
* GUI elements generate events only in response to user input, never in response to program output
*/
@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.
@nathansmith
nathansmith / [1] convertToMarkup.js
Last active November 16, 2023 12:43
Handy utilities for dealing with `<div contenteditable="true">` areas.
// Helpers.
import { convertToText } from './';
/*
You would call this when receiving a plain text
value back from an API, and before inserting the
text into the `contenteditable` area on a page.
*/
const convertToMarkup = (str = '') => {
return convertToText(str).replace(/\n/g, '<br>');
@PurpleBooth
PurpleBooth / README-Template.md
Last active May 9, 2024 13:42
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@ericelliott
ericelliott / essential-javascript-links.md
Last active May 7, 2024 01:25
Essential JavaScript Links
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active January 16, 2024 01:17
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@plentz
plentz / nginx.conf
Last active April 24, 2024 11:15
Best nginx configuration for improved security(and performance)
# to generate your dhparam.pem file, run in the terminal
openssl dhparam -out /etc/nginx/ssl/dhparam.pem 2048
@kentbrew
kentbrew / node-on-ec2-port-80.md
Last active February 4, 2024 19:14
How I Got Node.js Talking on EC2's Port 80

The Problem

Standard practices say no non-root process gets to talk to the Internet on a port less than 1024. How, then, could I get Node talking on port 80 on EC2? (I wanted it to go as fast as possible and use the smallest possible share of my teeny tiny little micro-instance's resources, so proxying through nginx or Apache seemed suboptimal.)

The temptingly easy but ultimately wrong solution:

Alter the port the script talks to from 8000 to 80:

}).listen(80);