Skip to content

Instantly share code, notes, and snippets.

Avatar
💡
converting ideas to code

Roni Nes FLasH3r

💡
converting ideas to code
View GitHub Profile
@AllThingsSmitty
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
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 - $$('img.dog')
var $$ = document.querySelectorAll.bind(document);
// Credit: https://twitter.com/wesbos/status/608341616173182977
@publicJorn
publicJorn / jquery-plugin-template.js
Last active Nov 19, 2021
jQuery plugin template
View jquery-plugin-template.js
/**
* 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 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.
View prefixed-properties.md

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 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.
View pseudo_elements.md

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 Aug 9, 2022
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
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
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(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400);
.demo {
margin: 50px auto;
width: 100%;
@acdcjunior
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 "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 Sep 18, 2022
Genymotion with Google Play Services for ARM
View genymotionwithplay.txt
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)