Skip to content

Instantly share code, notes, and snippets.

View vdel26's full-sized avatar

Victor Delgado vdel26

40 followers · 32 following
View GitHub Profile
@bendc
bendc / simulate-typing.js
Created September 1, 2017 08:57
Fake typing animation
const trackTime = timing => {
const now = performance.now();
if (!timing.startTime) timing.startTime = now;
const elapsed = now - timing.startTime;
const {duration} = timing;
if (duration != null && duration <= elapsed) timing.startTime = null;
return elapsed;
};
const delay = (callback, duration) => {
@bendc
bendc / easing.css
Created September 23, 2016 04:12
Easing CSS variables
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@bendc
bendc / .vimrc
Last active October 11, 2018 18:29
Vim config
set nocompatible
set encoding=utf-8 nobomb
filetype off
" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" let Vundle manage Vundle
Plugin 'VundleVim/Vundle.vim'
@alekseykulikov
alekseykulikov / index.md
Last active April 14, 2024 00:32
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

@bendc
bendc / display-fade.html
Created June 22, 2016 03:01
Transitioning the opacity of a hidden element
<!doctype html>
<meta charset="utf-8">
<title>Example</title>
<style>
div {
width: 100px;
height: 100px;
background: black;
animation-duration: .5s;
@rauchg
rauchg / Readme.md
Last active May 5, 2023 20:45

Minimum Viable Async with Node 6

With the release of Node 6.0.0, the surface of code that needs transpilation to use ES6 features has been reduced very dramatically.

This is what my current workflow looks like to set up a minimalistic and fast microservice using micro and async + await.

The promise

@daneden
daneden / Fonts across devices.md
Last active October 25, 2016 05:29
Device/Platform Typeface
iOS 9+, watchOS, tvOS, OS X 10.10+ San Francisco
iOS 1-8, OS X 10.9 Helvetica Neue
OS X 10.0-10.8 Lucida Grande
Android 5+, ChromeOS Roboto
Android 1-4 Droid Sans
Windows Phone, Windows Vista-10 Segoe UI
Windows XP Tahoma
Kindle Fire OS Droid Sans
@mrmrs
mrmrs / scalable-css-draft.md
Last active February 19, 2023 16:02
WIP thoughts on my last few years thinking about how to scale css for large and small teams working on large and small web applications.

How not to scale css

Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.

In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.

https://twitter.com/thomasfuchs/status/493790680397803521

In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get

@jemgold
jemgold / camerarecommendations.md
Last active March 14, 2016 09:29
@rauchg
rauchg / zero-to-microservice-with-now.md
Last active June 19, 2020 01:17

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