Skip to content

Instantly share code, notes, and snippets.

View yoksel's full-sized avatar
🦩
🧐

Yoksel yoksel

🦩
🧐
2.2k followers · 11 following
View GitHub Profile
@leostratus
leostratus / webkit-pseudo-elements.md
Created September 21, 2012 01:44
Webkit Pseudo-Element Selectors (Shadow DOM Elements)

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

@mjackson
mjackson / color-conversion-algorithms.js
Last active July 9, 2024 09:47
RGB, HSV, and HSL color conversion algorithms in JavaScript
/**
* Converts an RGB color value to HSL. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
* Assumes r, g, and b are contained in the set [0, 255] and
* returns h, s, and l in the set [0, 1].
*
* @param Number r The red color value
* @param Number g The green color value
* @param Number b The blue color value
* @return Array The HSL representation
@eyecatchup
eyecatchup / ascii-binary-converter.js
Last active November 6, 2023 20:03
JavaScript native ASCII to Binary / Binary to ASCII convert functions.
// ABC - a generic, native JS (A)scii(B)inary(C)onverter.
// (c) 2013 Stephan Schmitz <eyecatchup@gmail.com>
// License: MIT, http://eyecatchup.mit-license.org
// URL: https://gist.github.com/eyecatchup/6742657
var ABC = {
toAscii: function(bin) {
return bin.replace(/\s*[01]{8}\s*/g, function(bin) {
return String.fromCharCode(parseInt(bin, 2))
})
},
@irazasyed
irazasyed / homebrew-permissions-issue.md
Last active June 14, 2024 17:01
Homebrew: Permissions Denied Issue Fix (OS X / macOS)

Homebrew Permissions Denied Issues Solution

sudo chown -R $(whoami) $(brew --prefix)/*

@pravj
pravj / treegen.sh
Last active September 8, 2021 09:43
bash script to generate tree structure of a directory
#!/usr/bin/env bash
# bash script to generate tree structure of a directory
# Pravendra Singh (@hackpravj)
pwd=$(pwd)
find $pwd -print | sed -e "s;$pwd;\.;g;s;[^/]*\/;|__;g;s;__|; |;g"
@praveenvijayan
praveenvijayan / Copy text directly from Photoshop text layer.
Last active December 19, 2019 05:23
Copy text directly from text layer. Works above photoshop cs6. Copy following script file into /Applications/Adobe Photoshop CC 2014/Presets/Scripts (MAC) or C:\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Scripts (WIN). Assign shortcut for easy access (cmd+option+c / ctrl+alt+c)
/*****************************************************************
*
* Copy Layer text 1.0 - by Praveen Vijayan! - http://www.decodize.com/
*
* Compatibility above Photoshop CS6
*
* Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
*
*****************************************************************/
@addyosmani
addyosmani / README.md
Last active July 13, 2024 21:26 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@paulirish
paulirish / how to screencapture and make animated gifs or whathaveyou.md
Last active March 31, 2024 22:07
Screencapture and animated gifs

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active January 16, 2024 01:17
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@wilddeer
wilddeer / flexbox-adventures.md
Last active November 29, 2018 05:54
Невероятные приключения флексбокса в фаерфоксе

Невероятные приключения флексбокса в фаерфоксе

  • Блок с прокруткой в вертикальном флексбоксе не работает — ставить max-height: 100% на контейнер
  • word-wrap: break-word не работает внутри флексбокса — спасает min-width: 0 на элементе флексбокса (overflow-x: hidden тоже работает)
  • Флексбокс не работает на кнопке — класть внутрь блок и на нем делать флексбокс
  • Элемент флексбокса с ellipsis расфигачивает все по ширине — min-width: 0 на флексбокс / max-width: 100% на самого верхнего разъехавшегося родителя
  • Элементы флексбокса не выравниваются по базовой линии, если внутри еще один флексбокс — использовать inline-flex

О других невероятных приключениях вы узнаете в следующей серии