Install svg-inline-loader for webpack :
npm install svg-inline-loader --save-dev
Add it to your loaders in module.loaders section of webpack.config.js:
{
test: /\.svg$/,
loader: 'svg-inline-loader'
mallendeo
/ package.json
Last active
May 17, 2024 02:07
Record gsap animations frame by frame with puppeteer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "gsap-to-video", | |
| "version": "1.0.0", | |
| "main": "index.js", | |
| "license": "MIT", | |
| "dependencies": { | |
| "fs-extra": "^7.0.0", | |
| "puppeteer": "^1.7.0" | |
| } | |
| } |
CyberPunkCodes
/ vscode-git-status-tree-hack.js
Last active
March 3, 2019 21:28
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function injectGitFileStatus() | |
| { | |
| const timeout = 5000; | |
| const addedColor = "#8dc149"; | |
| const modifiedColor = "#cbcb41"; | |
| const stagedColor = "#ca2820"; | |
| const ignoredOpacity = "0.4"; | |
| const explorer = document.getElementById("workbench.view.explorer"); | |
| if (explorer) |
simboonlong
/ lazybgimg.html
Last active
September 12, 2022 22:23
custom lazy load background image for slick.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> | |
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> | |
| <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> | |
| <style> | |
| #s { | |
| border: solid 1px red; | |
| width: 640px; |
stereokai
/ gist:36dc0095b9d24ce93b045e2ddc60d7a0
Last active
January 6, 2025 16:03
CSS rounded corners with gradient border
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rounded-corners-gradient-borders { | |
| width: 300px; | |
| height: 80px; | |
| border: double 4px transparent; | |
| border-radius: 80px; | |
| background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff); | |
| background-origin: border-box; | |
| background-clip: padding-box, border-box; | |
| } |
AllThingsSmitty
/ querySelector.js
Last active
August 20, 2022 13:32
Use querySelector with .bind() as a shortcut to familiar function names
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // returns first element selected - $('input[name="food"]') | |
| var $ = document.querySelector.bind(document); | |
| // return array of selected elements - $$('img.dog') | |
| var $$ = document.querySelectorAll.bind(document); | |
| // Credit: https://twitter.com/wesbos/status/608341616173182977 |
By default, Rails applications build URLs based on the primary key -- the id column from the database. Imagine we have a Person model and associated controller. We have a person record for Bob Martin that has id number 6. The URL for his show page would be:
/people/6
But, for aesthetic or SEO purposes, we want Bob's name in the URL. The last segment, the 6 here, is called the "slug". Let's look at a few ways to implement better slugs.
ayust
/ .gitconfig
Created
September 8, 2011 11:28
— forked from tekkub/gist:1203061
Git aliases to prune merged branches
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [alias] | |
| prunelocal = !sh -c 'git branch --merged | grep -v "^*" | xargs git branch -d' | |
| pruneorigin = prune-remote origin | |
| ################## | |
| # Helper aliases # | |
| ################## | |
| # prune-remote <remote name> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| So you've cloned somebody's repo from github, but now you want to fork it and contribute back. Never fear! | |
| Technically, when you fork "origin" should be your fork and "upstream" should be the project you forked; however, if you're willing to break this convention then it's easy. | |
| * Off the top of my head * | |
| 1. Fork their repo on Github | |
| 2. In your local, add a new remote to your fork; then fetch it, and push your changes up to it | |
| git remote add my-fork [email protected] |