Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
363 followers · 294 following
View GitHub Profile
@cferdinandi
cferdinandi / faquery.html
Created October 16, 2018 19:46
<!DOCTYPE html>
<html>
<head>
<title>ConsolidateJS</title>
<style type="text/css">
.bg-purple {
background-color: rebeccapurple;
}
@adsingh14
adsingh14 / README.md
Last active July 10, 2018 12:03
Gulp Files Watcher (BrowserSync + SCSS)

GULP File Watcher (BrowserSync + SCSS)

Folders/Files to include

  • 📁 scss
    • 📄 style.scss
  • 📄 gulpfile.js
  • 📄 index.html

Gulp dependencies (npm_modules)

@Slackwise
Slackwise / cal.rb
Last active November 1, 2018 01:57
Implemented `/usr/bin/cal` (sans opts) in Ruby as a fun challenge my friend mentioned doing in an interview.
#!/usr/bin/env ruby
require 'date'
today = Date.today
first_day = Date.new(today.year, today.month, 1)
last_day = Date.new(today.year, today.month, -1) # A trick from JavaScript, heh...
first_week_blank_count = first_day.wday
last_week_blank_count = last_day.wday
@Phoenix35
Phoenix35 / for Loops.js
Last active April 1, 2020 18:07
// Courtesy of Kusu
/*
for (const value of obj) {
// loop body
}
*/
{
const it = obj[Symbol.iterator]();
try {
@Slackwise
Slackwise / reduce.js
Last active May 12, 2019 12:14
Code golf reduce() in JavaScript.
// Impure
reduce = (f, i, l) => (n = [...l]).length ? r(f, f(i, n.pop()), n) : i
// Impure and minified
r=(f,i,l)=>(n=[...l]).length?r(f,f(i,n.pop()),n):i
// Pure
reduce = (reducerFunction, initialValue, enumerable) =>
enumerable.length
@threepointone
threepointone / 0 basics.md
Last active March 21, 2023 01:53
css-in-js

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' };
@fdjones
fdjones / example.html
Last active December 15, 2017 21:51
<div class="foo"
id="bar"
data-info="foobar"
aria-hidden="true"
role="button">
</div>
@tomhodgins
tomhodgins / container-queries-stylesheet-edition.es5.js
Last active April 10, 2018 06:29
Container Queries Mixin: Stylesheet version (using $this as a keyword for matching tags)
function containerQuery(selector, test, stylesheet) {
var tag = document.querySelectorAll(selector)
var style = ''
var count = 0
for (var i=0; i<tag.length; i++) {
var attr = (selector+test).replace(/\W+/g, '')
@subzey
subzey / index.js
Last active November 21, 2017 16:56
Spiraling Braille
#!/usr/bin/env node
if (!process.stdout.isTTY) {
process.stderr.write('stdout is not a terminal');
process.exit(1);
}
const clearScreenSeq = '\u001b[H\u001b[2J';
const clearScreenSeqLen = Buffer.byteLength(clearScreenSeq);
const maths = (x, y, now, tie) => {
@chriseppstein
chriseppstein / css-blocks-form-example.md
Last active March 21, 2018 02:24

An example of a simple form

Consider the following markup:

<form class="root" state:theme=dark state:compact>
  <div class="input-area">
    <label for="username" class="label">Username:</label>
    <input id="username" class="input" type="text">
  </div>