Skip to content

Instantly share code, notes, and snippets.

View FLasH3r's full-sized avatar
💡
converting ideas to code

Roni Nes FLasH3r

💡
converting ideas to code
View GitHub Profile
@AllThingsSmitty
AllThingsSmitty / dimensions.js
Last active October 7, 2021 16:06
Every possible way (pretty much) to get the dimensions of any image on a web page with JavaScript
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
AllThingsSmitty / querySelector.js
Last active August 20, 2022 13:32
Use querySelector with .bind() as a shortcut to familiar function names
// 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
@publicJorn
publicJorn / jquery-plugin-template.js
Last active November 19, 2021 08:47
jQuery plugin template
/**
* jQuery plugin template by https://github.com/publicJorn
* 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
p3t3r67x0 / prefixed-properties.md
Last active October 31, 2020 15:16
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

-ms-accelerator

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

-ms-accelerator: false | true
@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] {
@hdragomir
hdragomir / sm-annotated.html
Last active March 5, 2024 08:57
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<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
LeaVerou / dabblet.css
Created May 6, 2014 10:41
Demo of shape-outside: border-box; by Lea Verou
/*
Demo of shape-outside: border-box; by Lea Verou
Original CSS Shapes demo by Sara Soueidan
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400);
.demo {
margin: 50px auto;
width: 100%;
@acdcjunior
acdcjunior / ParsedUrl.js
Last active December 7, 2020 11:51
Cross-browser URL parsing in JavaScript
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 "http://domain.com/example".
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
wbroek / genymotionwithplay.txt
Last active February 12, 2024 03:22
Genymotion with Google Play Services for ARM
NOTE: Easier way is the X86 way, described on https://www.genymotion.com/help/desktop/faq/#google-play-services
Download the following ZIPs:
ARM Translation Installer v1.1 (http://www.mirrorcreator.com/files/0ZIO8PME/Genymotion-ARM-Translation_v1.1.zip_links)
Download the correct GApps for your Android version:
Google Apps for Android 6.0 (https://www.androidfilehost.com/?fid=24052804347835438 - benzo-gapps-M-20151011-signed-chroma-r3.zip)
Google Apps for Android 5.1 (https://www.androidfilehost.com/?fid=96042739161891406 - gapps-L-4-21-15.zip)
Google Apps for Android 5.0 (https://www.androidfilehost.com/?fid=95784891001614559 - gapps-lp-20141109-signed.zip)