siliconjungle

// This is a basic diff mechanism, it is not going to work for characters that take up more than
// one byte. It is also not going to normalise text.
// these are things that *should happen* in the future, but for now they are going to be ignored.

// returns the insert position & the text to insert as well as the delete position & the text to delete
// one of the problems with this kind of diff is that you can't tell in some cases where the insert
// actually occurred.
// for this you will need to take into account the cursor start & end.
export const diff = (a, b) => {
  if (a === b) {

meodai

[
  {
    "productline": "Warpaints",
    "name": "Matt Black",
    "productcode": "-",
    "hex": "#231f20"
  },
  {
    "productline": "Warpaints",
    "name": "Matt White",

pesterhazy

So you want to write a sync system for a web app with offline and realtime support? Good luck. You might find the following resources useful.

Overview articles

• Database in a browser, a spec (Stepan Parunashvili)

  What problem are we trying to solve with a sync system?

• The web of tomorrow (Nikita Prokopov)

nanzhong

require 'json'
require 'open-uri'

colours = {}
URI.open("https://copic.jp/en/about/color_system/") do |f|
  matches = f.read.scan(/<td class="c_([a-fA-F0-9]{6})">(?:<span>)?([\w-]+)/)
  matches.each do |hex, name|
    colours[name] = "##{hex}"
  end
end

mikowl

// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

//  Remove any duplicates from an array of primitives.
const unique = [...new Set(arr)]

// Sleep in async functions. Use: await sleep(2000).
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
// or
const sleep = util.promisify(setTimeout);

SMUsamaShah

JavaScript GUI libraries

These libraries can be used to quickly create a GUI for configureable parameters using sliders, checkboxes, colors pickers etc

1. Tweakpane https://github.com/cocopon/tweakpane Demo: https://cocopon.github.io/tweakpane/
2. control-panel https://github.com/freeman-lab/control-panel
3. ControlKit https://github.com/automat/controlkit.js
4. guify https://github.com/colejd/guify Main site is down, here is the demo https://jons.website/projects/guify/index
5. oui https://github.com/wearekuva/oui
6. Palette.js https://github.com/lehni/palette.js

meodai

{
    "dialog-breakpoints": {
        "desktop": "'min-width: 701px'",
        "mobile": "'max-width: 700px'"
    }
}

2DArray

fluid={}
poke(0x5f2d,1)

function spawndrop(x,y)
	// {x, y, old_x, old_y, hit_count}
	add(fluid,{x,y,x,y,1})
end

function sortfluid()
	for i=2,#fluid do

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

Jakobud

/// linear-interpolation
/// Calculate the definition of a line between two points
/// @param $map - A SASS map of viewport widths and size value pairs
/// @returns A linear equation as a calc() function
/// @example
///   font-size: linear-interpolation((320px: 18px, 768px: 26px));
/// @author Jake Wilson <jake.e.wilson@gmail.com>
@function linear-interpolation($map) {
  $keys: map-keys($map);
  @if (length($keys) != 2) {