Skip to content

Instantly share code, notes, and snippets.

View arielsalminen's full-sized avatar

Ariel Salminen arielsalminen

View GitHub Profile
@arielsalminen
arielsalminen / clamp.js
Last active October 24, 2022 19:00
getContrastRatio.js
/*
* Clamp util.
*/
const clamp = (val, min, max) => {
return Math.min(Math.max(val, min), max)
}
export default clamp
@arielsalminen
arielsalminen / readme.md
Created August 16, 2022 13:10
Lit vs. Stencil.js

Some of you who have followed our previous design systems adventures on Twitter might know that both me (Viljami) and Nick Williams, our newest Frontend Developer, have a long experience working with Stencil and Web Components. So you naturally might wonder why are we migrating away from Stencil?

Please note that this isn’t meant to be an advice against Stencil. Stencil has its place in the ecosystem, and depending on your company’s needs it can still be an amazing tool. Heck, I even wrote an article praising the tool a couple years back. With Nord Design System, it mainly came down to these reasons:

  • For developers Stencil is a bit of a “black box” in certain cases and it often requires a lot of digging via the source code to understand specifically why something works like it does. We prefer trans
@arielsalminen
arielsalminen / search.js
Last active April 6, 2022 14:07
Demo of how we create a JSON based search index and search functionality for Nord Design System’s Eleventy based documentation at https://nordhealth.design/
/* eslint-disable no-undef */
;(function (window, document) {
"use strict"
/**
* The Nord Documentation object
*
* @constructor
*/
function NordDocs() {
@arielsalminen
arielsalminen / figma-project-stats.js
Created March 22, 2022 18:30 — forked from rsms/figma-project-stats.js
Script that generates statistics for a Figma project, like number of files, frames, versions etc
//
// Figma project stats
// Pulls statistics like number of files, frames, versions etc for a project.
//
// Usage:
// export FIGMA_API_ACCESS_TOKEN='your-token'
// node figma-project-stats.js <project-id>
//
// You can generate tokens in your account settings or at
// https://www.figma.com/developers/explorer#personal-access-token
/* ---------------------------------------------
/ RESET STYLES
/ --------------------------------------------- */
html,body,div,span,h1,h2,h3,h4,h5,p,blockquote,
pre,a,code,img,svg,small,strike,strong,sub,sup,
b,u,i,ol,ul,li,form,label,table,caption,tbody,
tfoot,thead,tr,th,td,main,article,aside,canvas,
input,footer,header,nav,section,time,button,
video,textarea,input {
function onOpen(e) {
SlidesApp.getUi()
.createMenu("Custom Fonts")
.addItem("Georgia", "formatText")
.addToUi();
}
function formatText() {
var selection = SlidesApp.getActivePresentation().getSelection();
if (selection) {
---
permalink: search.json
eleventyExcludeFromCollections: true
---
{"search" : [
{%- for page in collections.all %}
{
"url" : "{{ page.url }}",
"title" : "{% if page.data.title %}{{ page.data.title }}{% else %}Nord Design System{%- endif -%}",
/**
* This function binds properties and events to a custom element and returns the event.
* It can be used in the react "ref" attribute like this:
* ```<custom-element ref={ duetRef({ prop1: 'a' }, { event: () => this.handleEvent() }) }></custom-element>```
* The above example is a *one time binding* for properties and will not update automatically.
* If you need updates on properties you'll have to save element references and update them manually:
* ```<custom-element ref={ el => { this.element = duetRef({ prop1: 'a' }, { event: () => this.handleEvent() })(el); }></custom-element>```
* using this reference you can update prop1: ```this.element.prop1 = 'b';```.
*
* @param {*} properties The properties to bind to a custom element.
@arielsalminen
arielsalminen / package.json
Last active June 18, 2020 21:29
An example on how to use Angular and React outputTargets with Stencil.js. Please note that I’ve removed other configs in order to simplify this example. This is how we’ve configured things in https://www.duetds.com
{
"devDependencies": {
"@stencil/angular-output-target": "latest",
"@stencil/react-output-target": "latest"
}
}
@arielsalminen
arielsalminen / outline.css
Last active June 24, 2019 09:08
Hide browser’s default focus outline when using mouse to click around, but show them when the user is using keyboard to browse the webpage.
body:not(.user-is-tabbing) *:focus {
outline: none;
}