Skip to content

Instantly share code, notes, and snippets.

View didoo's full-sized avatar

Cristiano Rastelli didoo

124 followers · 17 following
View GitHub Profile
@jdsteinbach
jdsteinbach / .gitignore
Last active May 20, 2019 13:52
Sass+PostCSS
node_modules
@aalokt89
aalokt89 / ImagePost.tsx
Last active June 16, 2019 18:09
Framer X Stack with design and code components
import * as React from "react";
import { Frame, Stack, PropertyControls, ControlType } from "framer";
import { Avatar, PostHeader, PostImage, PostButtonGroup } from "./canvas";
// Define type of property
interface Props {
username: string;
timeStamp: string;
postText: string;
width: number;
@davatron5000
davatron5000 / icon-grid.html
Created January 14, 2015 21:27
SVG Icon Grid
<div id="styleguide-icon-grid"></div>
<object data="/assets/icons.svg" id="svgembed" height=0; width=0></object>
<script>
var grid = document.querySelector('#styleguide-icon-grid');
var tmpl = '<div class="item"><svg class="icon"><use xlink:href="/assets/icons.svg#{id}"></use></svg><span>#{id}</span></div>';
function svgloaded() {
var svgEmbed = document.querySelector("#svgembed");
var svg = svgEmbed.getSVGDocument();
@kdzwinel
kdzwinel / reloadCSS.js
Last active February 13, 2020 11:18
Reload CSS files without reloading the page
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
@troch
troch / choosing-a-css-in-js-library.md
Last active October 18, 2020 17:52
Choosing a CSS in JS library

Choosing a CSS in JS library

Check comments below, this is only my opinion and a choice specific to my use case

We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.

Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:

@alexjlockwood
alexjlockwood / print-unlinked-colors.ts
Created February 3, 2020 21:41
Prints nodes that have fill/stroke colors that aren't linked to a style.
figma.root.children
.flatMap(pageNode => pageNode.findAll(n => true))
.forEach(node => {
if ('fills' in node && 'fillStyleId' in node) {
if (node.fills !== figma.mixed && node.fills.length > 0 && node.fillStyleId !== '') {
print(`${node.name}'s fill color is not linked to a style`);
}
}
if ('strokes' in node && 'strokeStyleId' in node) {
if (node.strokes.length > 0 && node.strokeStyleId !== '') {
@stevenkaspar
stevenkaspar / CustomIframe.jsx
Created October 27, 2017 19:38
React Iframe for Writing to contentDocument
/**
* This has a specific use case for writing to the contentDocument allowing for a separated scope
*
* There are probably other ways to do this with ShadowDom but this works well for my purposes
*
* USAGE:
*
* <CustomIframe html={<head><title>Doc Title</title></head><body>Hello React User</body>} />
*
*/
@ryanflorence
ryanflorence / issues.md
Last active May 18, 2022 03:11

Turning Off Github Issues

My friend Michael Jackson turned off github issues on one of his smaller projects. It got me thinking...

Maintainers getting burned out is a problem. Not just for the users of a project but the mental health of the maintainer. It's a big deal for both parties. Consumers want great tools, maintainers want to create them, but maintainers don't want to be L1 tech support, that's why they

@n1k0
n1k0 / Howto.md
Created October 1, 2012 17:59
CasperJS test cli hooks example

Put test1.js and test2.js into a tests/ directory, then run the suite:

$ casperjs test tests/ --pre=pre.js --includes=inc.js --post=post.js
Test file: /Users/nperriault/tmp/pre-inc/pre.js                                 
Hey, I'm executed before the suite.
Test file: /Users/nperriault/tmp/pre-inc/tests/test1.js                         
# this is test 1
Hi, I've been included.
PASS Subject is strictly true
@threepointone
threepointone / glam-for-css-folks.md
Last active September 4, 2022 07:43
why css purists will love glam

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js