Skip to content

Instantly share code, notes, and snippets.

converting ideas to code

Roni Nes FLasH3r

converting ideas to code
View GitHub Profile
AllThingsSmitty / dimensions.js
Last active Oct 7, 2021
Every possible way (pretty much) to get the dimensions of any image on a web page with JavaScript
View dimensions.js
var myImg = document.querySelector('img'),
op = document.querySelector('output');
op.innerHTML = "Computed width: " +
getComputedStyle(myImg).getPropertyValue('width') +
'<br>' + 'img.width: ' +
myImg.width +
'<br>' + 'getAttribute(width): ' +
myImg.getAttribute('width') +
'<br>' + 'img.naturalWidth: ' +
AllThingsSmitty / querySelector.js
Last active Aug 20, 2022
Use querySelector with .bind() as a shortcut to familiar function names
View querySelector.js
// returns first element selected - $('input[name="food"]')
var $ = document.querySelector.bind(document);
// return array of selected elements - $$('')
var $$ = document.querySelectorAll.bind(document);
// Credit:
publicJorn / jquery-plugin-template.js
Last active Nov 19, 2021
jQuery plugin template
View jquery-plugin-template.js
* jQuery plugin template by
* Features:
* - dynamic plugin name (only supply once) so it's easy to change later
* - plugin factory to make it work in the browser, or with AMD / COMMONJS modules
* - Plugin instance is saved on the selector element
* - Default options are saved to the instance in case you need to figure out a difference between passed options
(function(global, factory) {
'use strict';
p3t3r67x0 /
Last active Oct 31, 2020
Be aware that every rendering engine has its own implementation of prefixed properties. As extensions are made part of the standard, the unprefixed identifier is then substituted.

Prefixed style properties


The -ms-accelerator property sets or retrieves a string that indicates whether the object represents a keyboard shortcut.

-ms-accelerator: false | true
p3t3r67x0 /
Last active Sep 29, 2022
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] {
hdragomir / sm-annotated.html
Last active Aug 9, 2022
The deferred font loading logic for Smashing Magazine.
View sm-annotated.html
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
LeaVerou / dabblet.css
Created May 6, 2014
Demo of shape-outside: border-box; by Lea Verou
View dabblet.css
Demo of shape-outside: border-box; by Lea Verou
Original CSS Shapes demo by Sara Soueidan
@import url(,700italic,400);
.demo {
margin: 50px auto;
width: 100%;
acdcjunior / ParsedUrl.js
Last active Dec 7, 2020
Cross-browser URL parsing in JavaScript
View ParsedUrl.js
function ParsedUrl(url) {
var parser = document.createElement("a");
parser.href = url;
// IE 8 and 9 dont load the attributes "protocol" and "host" in case the source URL
// is just a pathname, that is, "/example" and not "".
parser.href = parser.href;
// IE 7 and 6 wont load "protocol" and "host" even with the above workaround,
// so we take the protocol/host from window.location and place them manually
wbroek / genymotionwithplay.txt
Last active Sep 18, 2022
Genymotion with Google Play Services for ARM
View genymotionwithplay.txt
NOTE: Easier way is the X86 way, described on
Download the following ZIPs:
ARM Translation Installer v1.1 (
Download the correct GApps for your Android version:
Google Apps for Android 6.0 ( -
Google Apps for Android 5.1 ( -
Google Apps for Android 5.0 ( -