Skip to content

Instantly share code, notes, and snippets.

View kirubz's full-sized avatar
🎯
Focusing

Kirubaharan Palani kirubz

🎯
Focusing
52 followers · 711 following
View GitHub Profile
@YourAKShaw
YourAKShaw / namaste_javascript_notes.md
Last active October 15, 2025 16:40
Namaste 🙏 JavaScript is a YouTube playlist by Akshay Saini. These are the notes I've made when I was learning JavaScript from Scratch using the playlist.

How JavaScript Works?

Is JavaScript:

  • Synchronous or Asynchronous?
  • Single-threaded or Multi-threaded?
  • Everything in JavaScript happens inside an Execution Context
    • You can assume this execution context to be a big box or a container in which the whole JavaScript code is executed.
  • This big box has two components in it:
@restureese
restureese / index.html
Created January 22, 2021 03:17
Create Polygon with fabric js
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>
@MostlyFocusedMike
MostlyFocusedMike / dynamic-form-6.js
Created July 31, 2019 03:16
// CatInputs.js
import React from 'react';
import PropTypes from 'prop-types';
const CatInputs = ({ idx, catState, handleCatChange }) => {
const catId = `name-${idx}`;
const ageId = `age-${idx}`;
return (
<div key={`cat-${idx}`}>
@igorjs
igorjs / rest-api-response-format.md
Last active July 31, 2025 12:04
REST API response format based on some of the best practices
@MostlyFocusedMike
MostlyFocusedMike / full_form.js
Created July 5, 2018 01:34
import React from "react"
class Form extends React.Component {
state = {
cats: [{name:"", age:""}],
owner: "",
description: ""
}
handleChange = (e) => {
if (["name", "age"].includes(e.target.className) ) {
let cats = [...this.state.cats]
@sandor
sandor / Fabric_Demo_Copy_Paste.html
Last active November 27, 2021 07:35
<!DOCTYPE html>
<html lang="en" ng-app="kitchensink">
<head>
<meta charset="utf-8">
<title>Copy and Paste | Fabric.js 2.0 Demos</title>
<link rel="stylesheet" href="../css/master.css">
<link rel="stylesheet" href="../css/ads.css">
<link rel="stylesheet" href="../css/prism.css">
@joshbuchea
joshbuchea / semantic-commit-messages.md
Last active November 2, 2025 14:54
Semantic Commit Messages

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

@johndavedecano
johndavedecano / TimeAgo.jsx
Last active August 22, 2024 16:00
TimeAgo component using date-fns
import React, {Component} from 'react';
import differenceInSeconds from 'date-fns/difference_in_seconds';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
class TimeAgo extends Component {
componentDidMount() {
if (this.props.isLive) {
this.updateTime();
}
@linchpinstudios
linchpinstudios / fabric.arrow.js
Last active December 25, 2023 18:27
Fabric JS Arrow
fabric.Arrow = fabric.util.createClass(fabric.Line, {
type: 'Arrow',
initialize: function(element, options) {
options || (options = {});
this.callSuper('initialize', element, options);
},
toObject: function() {
@paulirish
paulirish / what-forces-layout.md
Last active November 1, 2025 01:28
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent