Skip to content

Instantly share code, notes, and snippets.

View felquis's full-sized avatar
🔎
aligning divs with style

Felquis G felquis

🔎
aligning divs with style
View GitHub Profile
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active April 26, 2024 11:06
Expose Tailwind colors as CSS custom properties (variables)

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

  • You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
  • You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

@arei
arei / 10ThingsWrongWebComponents.md
Last active February 20, 2024 03:16
10 Things You Are Doing Wrong in your Web Components

10 Things You Are Doing Wrong in your Web Components

Web Components enable custom element creation and sharing on a whole new level that has not really been seen to date but is so desperately needed. Developers of everything from simple webpages to complex applications are using Web Components to deliver new functionality, new behaviors, and new designs. Web Components are a big part of the future of the web.

There are lots of articles detailing how to build a basic Web Component, but almost no article details how to solve some of the gotchas once you start down that road. That's what this article serves to do; point out some of the things every Web Component developer is overlooking and to which they should probably be giving more consideration.

1). Not Using a Web Component Framework

The APIs which make up the Web Components standards (Custom Elements, ShadowDOM, etc) are intentionally low level APIs. As such they are not always the most clear or concise in their understandability. Additionally,

@mindplay-dk
mindplay-dk / image-url.ts
Last active September 28, 2023 15:25
Rotate image preview to compensate for EXIF orientation (Javascript / Typescript)
// Based on: https://stackoverflow.com/a/46814952/283851
/**
* Create a Base64 Image URL, with rotation applied to compensate for EXIF orientation, if needed.
*
* Optionally resize to a smaller maximum width - to improve performance for larger image thumbnails.
*/
export async function getImageUrl(file: File, maxWidth: number|undefined) {
return readOrientation(file).then(orientation => applyRotation(file, orientation || 1, maxWidth || 999999));
}
@jorenham
jorenham / main.py
Last active September 28, 2019 22:34
Best exception handling in Python
import webbrowser
def main():
return 42/0
if __name__== '__main__':
try:
main()
@VictorTaelin
VictorTaelin / promise_monad.md
Last active April 28, 2024 13:28
async/await is just the do-notation of the Promise monad

async/await is just the do-notation of the Promise monad

CertSimple just wrote a blog post arguing ES2017's async/await was the best thing to happen with JavaScript. I wholeheartedly agree.

In short, one of the (few?) good things about JavaScript used to be how well it handled asynchronous requests. This was mostly thanks to its Scheme-inherited implementation of functions and closures. That, though, was also one of its worst faults, because it led to the "callback hell", an seemingly unavoidable pattern that made highly asynchronous JS code almost unreadable. Many solutions attempted to solve that, but most failed. Promises almost did it, but failed too. Finally, async/await is here and, combined with Promises, it solves the problem for good. On this post, I'll explain why that is the case and trace a link between promises, async/await, the do-notation and monads.

First, let's illustrate the 3 styles by implementing

@renanvalentin
renanvalentin / patch.js
Created June 8, 2017 19:33
ReactDOM.findDOMNode monkey patch
const ReactDOM = require('react-dom');
const findDOMNode = ReactDOM.findDOMNode;
ReactDOM.findDOMNode = (component) => {
if (findDOMNode) {
return findDOMNode(...args);
}
if(!component.container) {
@javilobo8
javilobo8 / download-file.js
Last active April 9, 2024 12:01
Download files with AJAX (axios)
axios({
url: 'http://localhost:5000/static/example.pdf',
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
@blasten
blasten / object-fit-edge.css
Last active August 28, 2020 20:12
Adds support to object-fit in Edge.
.fit {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
object-fit: cover;
}