Helena om webb @helena-om-webb - Tumblr Blog

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events

#pointer-events #css

TinyMCE styles

pre.prettyprint { EditMenuTitle: Text; ChangeElementType: true; EditMenuName: Code block; }

#tinymce #css

Icon fonts are heralded for their convenience, which generally can’t be matched by SVG. However, they come with a huge performance downside, which SVG doesn’t have. I want to use this post as an…

#icons #svg

Chances are you are using Bower in your frontend. Turns out you don't need Bower and in fact it may even cause you problems. Here's how to get rid off it.

#bower #npm

Using CSS, this footer rests at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally. H...

#css

In this article, we take a look at the CSS box sizing property, and how to reset the box sizing to border box so that the CSS box model is more intuitive.

Inkl. snippet för att sätta box-sizing för hela sidan:

*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#css

A interactive Git visualization tool to educate and challenge!

Pedagogiskt om git.

#git #lärande

#javascript

IIFE

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

#javascript

It's rare nowadays to find a web designer who can't code his own designs. With so many resources online and in print that teach the basics of HTML and CSS, and

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Bra komplement till caniuse.com.

#html #html5

So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: we, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.

Bra lista med polyfills.

#html5 #polyfills #javascript #css

Spectrum is a JavaScript colorpicker plugin using the jQuery framework. It is highly customizable, but can also be used as a simple input type=color polyfill

#jquery #plugin #färger

#bilder

Mobile and tablet check

window.mobileAndTabletcheck = function() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; }

#responsivitet #javascript

Pull med rebase, bra git-tips

Fick ett så bra tips från en av mina gurus nyligen. När man ska pusha något, men det finns ändringar i repot, gör så här:

- committa ändringarna lokalt

- git pull --rebase

- git push (om det funkar lokalt förstås)

Då drar man ner ändringarna först och lägger sina egna ovanpå, vilket gör att man slipper att varannan commit i listan är en merge. Blir så mycket renare!

#git

How To Use The :before And :after Pseudo-Elements In CSS

#css

Trending Blogs

Recently Viewed Blogs

Helena om webb