Skip to content

Instantly share code, notes, and snippets.

View djibe's full-sized avatar

JB djibe

View GitHub Profile

How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer

layouts
└── _default
    └── _markup
        └── render-link.html
@deeperton
deeperton / rgba-to-hex.sass
Last active March 28, 2025 13:18
Converter RGBA() to #HEX color with applying alpha-channel + additional opacity
// converter rgba(r, g, b, a) color to #HEX string without alpha channel,
// with optional applying afterwards opacity ($opacity)
// by default alpha channel for rgba-color is applying against white background,
// but you can change it by setting third argumnet ($background)
@function rgba-to-rgb($rgba, $opacity: 0, $background: #fff) {
@if $opacity > 0 {
@if $opacity < 1 {
$opacity: $opacity * 100
}
@return mix(mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%), rgb(255,255,255), $opacity)
@jakub-g
jakub-g / async-defer-module.md
Last active July 3, 2025 05:06
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

@adactio
adactio / minimal-serviceworker.js
Last active August 18, 2023 09:15
An attempt at a minimal viable service worker.
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
// HTML files: try the network first, then the cache.
// Other files: try the cache first, then the network.
// Both: cache a fresh version if possible.
// (beware: the cache will grow and grow; there's no cleanup)
const cacheName = 'files';
@michaeljymsgutierrez
michaeljymsgutierrez / Fastboot_cmd.txt
Created October 5, 2017 01:14
Fastboot command lines for android
1. Flashing the recovery image:
fastboot flash recovery recovery.img
2. Flash the kernel and bootloader:
fastboot flash boot boot.img
3. Erase a partition:
fastboot erase cache
@DaleMckeown
DaleMckeown / select2-bootstrap-v4.0.0-Beta.css
Last active January 26, 2018 11:27
Select2 Bootstrap theme for Bootstrap Beta. SCSS and CSS versions (compiled to my Bootstrap specs)
.select2-container--bootstrap {
display: block;
/*------------------------------------* #COMMON STYLES
\*------------------------------------*/
/**
* Search field in the Select2 dropdown.
*/
/**
* No outline for all search fields - in the dropdown
* and inline in multi Select2s.
@EdnaldoNeimeg
EdnaldoNeimeg / bootstrap4-editable.js
Last active March 25, 2021 08:54
Fix x-editable for Bootstrap 4 - Using Tether
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/**
Form with single input element, two buttons and two states: normal/loading.
Applied as jQuery method to DIV tag (not to form tag!). This is because form can be in loading state when spinner shown.
Editableform is linked with one of input types, e.g. 'text', 'select' etc.
@class editableform
@angel-vladov
angel-vladov / select2-bootstrap4.after.scss
Last active March 16, 2018 16:01
Select2 for Bootstrap4
// Import this file after select2 bootstrap theme. Content won't be centered if you don't include this file.
.select2-container--bootstrap {
.select2-selection--multiple {
.select2-selection__choice {
margin-top: calc(#{$s2bs-padding-base-vertical} - 1px);
}
.select2-search--inline .select2-search__field {
height: $s2bs-input-height-base;
}
@adamreisnz
adamreisnz / package.json
Last active April 12, 2025 09:09
Simple pure npm scripts build process
{
"name": "project-name",
"description": "Template for static sites",
"version": "1.0.0",
"homepage": "http://www.project-name.com",
"author": {
"name": "Adam Reis",
"url": "http://adam.reis.nz"
},
"license": "UNLICENSED",
@mhingston
mhingston / repair.md
Last active September 26, 2020 10:23
Online Repair Windows 10 using DISM
  1. Download Windows 10 Media Creation Tool.

  2. Run the tool (Right-click > Run as administrator).

  3. Click Accept.

  4. Click "Create Installation Media for another PC" then Next.

  5. Leave box checked for "Use the recommended options for this PC" then Next.