Just a little experiment. When hovering over the article with your mouse, some keywords from the text should be easy readable while the rest should be darker.
A Pen by Bas Groothedde on CodePen.
Joël Lesenne joellesenne
🏠
ryanflorence
/ action.tsx
Created
December 15, 2021 15:19
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
| export let action: ActionFunction = async ({ request, params }) => { | |
| let session = await requireAuthSession(request); | |
| await ensureUserAccount(session.get("auth")); | |
| let data = Object.fromEntries(await request.formData()); | |
| invariant(typeof data._action === "string", "_action should be string"); | |
| switch (data._action) { | |
| case Actions.CREATE_TASK: | |
| case Actions.UPDATE_TASK_NAME: { |
JonathanDn
/ medium_clap.html
Last active
June 9, 2023 07:34
(moved to a repo https://github.com/JonathanDn/mediumclap ) Medium Clap Reproduction - My take on it by looking, researching and trial & error. Demo available --> https://jsfiddle.net/urft14zr/425/
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
| <div class="canvas"> | |
| <div id="totalCounter" class="total-counter"></div> | |
| <div id="clap" class="clap-container"> | |
| <i class="clap-icon fa fa-hand-paper-o"></i> | |
| </div> | |
| <div id="clicker" class="click-counter"> | |
| <span class="counter"></span> | |
| </div> |
CodeMyUI
/ highlight-keywords-of-text-on-hover.markdown
Created
January 12, 2018 05:48
Highlight keywords of text on hover
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": "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", |
PurpleBooth
/ README-Template.md
Last active
December 8, 2025 22:56
A template to make good README.md
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
| # Terminal Cheat Sheet | |
| pwd # print working directory | |
| ls # list files in directory | |
| cd # change directory | |
| ~ # home directory | |
| .. # up one directory | |
| - # previous working directory | |
| help # get help | |
| -h # get help |
betweenbrain
/ gist:8402480
Created
January 13, 2014 15:43
PhpStorm SCSS File Watcher Settings for parallel SCSS and CSS directories
|-CSS
|-SCSS
Arguments: --no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css
NOTE: add --style compressed to Arguments for minified output
⇐ back to the gist-blog at jrw.fi
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.
This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso
joellesenne
/ bootswatchlet.js
Created
September 9, 2012 08:22
— forked from thomaspark/bootswatchlet.js
Bootswatch bookmarklet
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
| if($('.bootswatcher')[0]){ | |
| $('.bootswatcher').remove(); | |
| } else { | |
| var $e = $('<select class="bootswatcher"><option>Amelia</option><option>Cerulean</option><option>Cyborg</option><option>Journal</option><option>Readable</option><option>Simplex</option><option>Slate</option><option>Spacelab</option><option>Spruce</option><option>Superhero</option><option>United</option></select>'); | |
| var l = 1 + Math.floor(Math.random() * $e.children().length); | |
| $e.css({'z-index': '99999', 'position': 'fixed', 'top': '5px', 'right': '5px', 'opacity': '0.5'} | |
| ).hover( | |
| function(){$(this).css('opacity', '1');}, | |
| function(){$(this).css('opacity', '0.5');} | |
| ).change(function(){ |