Skip to content

Instantly share code, notes, and snippets.

View bytrangle's full-sized avatar

Trang Le bytrangle

9 followers · 5 following
View GitHub Profile
@bytrangle
bytrangle / webpack.config.js
Created March 13, 2020 09:06
This Webpack configuration will output Javascript and CSS files to different directories. Example is dist/js/main.js, dist/css/main.csss, dist/css/bootstrap.css
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'static/index.js'),
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist/js'),
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
@bytrangle
bytrangle / template.ejs
Created March 13, 2020 09:39
Make html-webpakc-plugin use an .ejs template file, and output an index.html.ejs file. Great for templating.
<!-- This file is located at src/template.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- output a literal <% tag -->
@bytrangle
bytrangle / README.md
Last active April 4, 2020 14:39
This AppleScript will reveal the recently captured screenshots in the Finder. If the Finder is already active, it will bring the Finder to the frontmost, open a new tab, and navigate to the folder containing the screenshot.

To activate this script:

  • save the script to the folder users > your-username > Library > Workflows > Applications > Folder Actions
  • go to the folder that stores your screenshots. Right click to bring up the context menu.
  • select Servicess > Folder Action Setup.
  • select the script that you save in the first step.

The script will be triggered whenever there's a new item added to the screenshot folder, i.e, whenever you take a new screenshot.

If the Finder is already active, it will be raised to the frontmost, open a new tab, and navigate to the folder containing the screenshot. That way, you don't end up with dozens of Finder windows.

@bytrangle
bytrangle / index.js
Created April 17, 2020 13:06
Query images from Markdown files, then render them
import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
export default props => {
const { fixed } = props.data.fixedImage.childImageSharp
@bytrangle
bytrangle / index.html
Created April 17, 2020 13:56
Picture tag for fixed image
<picture>
<source
srcset="/static/362300c046749582c4ff6569a40211d8/a812a/james-mccullough-Znxkw16UKG0-unsplash.jpg 1x,
/static/362300c046749582c4ff6569a40211d8/22fd2/james-mccullough-Znxkw16UKG0-unsplash.jpg 1.5x,
/static/362300c046749582c4ff6569a40211d8/fdee4/james-mccullough-Znxkw16UKG0-unsplash.jpg 2x">
</picture>
@bytrangle
bytrangle / index.html
Created April 17, 2020 13:56
Picture tag for fluid image
<picture>
<source
srcset="/static/362300c046749582c4ff6569a40211d8/7d800/james-mccullough-Znxkw16UKG0-unsplash.jpg 175w,
/static/362300c046749582c4ff6569a40211d8/89f4f/james-mccullough-Znxkw16UKG0-unsplash.jpg 350w,
/static/362300c046749582c4ff6569a40211d8/9a128/james-mccullough-Znxkw16UKG0-unsplash.jpg 700w,
/static/362300c046749582c4ff6569a40211d8/9a763/james-mccullough-Znxkw16UKG0-unsplash.jpg 1050w,
/static/362300c046749582c4ff6569a40211d8/f2e3f/james-mccullough-Znxkw16UKG0-unsplash.jpg 1400w,
/static/362300c046749582c4ff6569a40211d8/43232/james-mccullough-Znxkw16UKG0-unsplash.jpg 3888w"
sizes="(max-width: 700px) 100vw, 700px"
>
@bytrangle
bytrangle / code.gs
Created May 25, 2020 09:42
Auto generate sorta unique IDs for each row in Google Sheets
// This script fires when any cell is edited and the corresponding ID cell
// on the same row is empty. It will insert a reasonably unique UID of ID_length
// into the specified ID cell under the ID column.
// replace this with your sheet name
var ID_length = 5;
var targetSheet = 'Tasks';
// The header name of the column that stores unique IDs
var idHeader = 'Task ID';
// This function will get all the header names of the specified data range
@bytrangle
bytrangle / index.js
Created June 19, 2020 08:19
Generate base64 bearer token header in Node.js
const axios = require('axios')
// Testing on Twitter API.
// consumerKey and consumerSecret is a pair of keys associated with an app registered with Twitter API
const consumerKey = process.env.CONSUMER_KEY
const consumerSecret = process.env.CONSUMER_SECRET
const str = `${consumerKey}:${consumerSecret}`
// Base64 encode the request token and turn it into a value of the Authorization header
const authHeader = `Basic ${Buffer.from(str).toString('base64'}`
// Create an isntance of Axios
const instance = axios.create({
@bytrangle
bytrangle / weekArray.js
Last active August 6, 2020 04:31
Create an array of weeks with start and end week date from a given start date to today. No external libraries.
// Add 0 to date value smaller than 10. For example, date 8 of July will become 07-08.
function padDate(number) {
return number < 10 ? '0' + number.toString() : number.toString();
}
// format the date object as YYYY-MM-DD
function formatDate(date) {
const yr = date.getFullYear();
const mo = padDate(date.getMonth() + 1);
const da = padDate(date.getDate());
return `${yr}-${mo}-${da}`;
@bytrangle
bytrangle / code.gs
Last active October 14, 2020 13:01
Sort Google Sheets worksheets by name. Useful when you have more than 8 worksheets inside a spreadsheet.
/* INSTRUCTION
- On your spreadsheet, go to Tools > Script Editor to open the Script Editor in a new tab.
- Paste the code below, starting from the double slash to the end into any file that ends with .gs extension.
- Save the .gs file and reload your spreadsheet to see the new menu.
*/
// This creates a menu which contains menu item that when clicked will trigger the function to sort worksheets by name.
function onOpen(e) {
SpreadsheetApp.getUi()
.createMenu('Utils')
.addItem('Sort Worksheets By Name', 'sortWorksheetsByName')