Menu

HTML

Udacity: Responsive Web Design and Responsive Images
Simulators, Emulators and Real Devices In Chrome Dev Tools – Emulator icon Pixel density Emulate a custom device Select Edit from the Responsive [...]
Udacity: Website Performance Optimization
Udacity Project https://github.com/udacity/frontend-nanodegree-mobile-portfolio Analysis tools https://developers.google.com/speed/pagespeed/insights/ [...]
Udacity: Browser Rendering Optimization
60 frames per second – approx 10-16 ms per frame Making a frame HTTP GET request Server sends HTML Browser parses HTML into DOM – PARSE HTML [...]
Convert online image to base64 code
Append the output of wget https://..../image.jpg && cat image.jpg | base64 to data:image/jpeg;base64,
perf-tooling.today
PERF ROCKS
JankFree
HEAD cheatsheet
https://github.com/joshbuchea/HEAD
gitbook
Gitbook
Gitbook on Github Gitbook documentation Gitbook default theme Gitbook plugins npm install -g gitbook-cli gitbook init // initialize project in the current [...]
SVG animation
SVG animations with Examples
Resources Chris Coyier – The wonderful world of SVG Cheat Sheet SVG Optimizers SVG omg SVG Editor Helpers Cubic Bezier Better performance Easings CSS [...]
Brain food for digital Creatives – Vol 3 Designing for Mobile performance
pug
Pug (ex. Jade)
Pug Documentation Pug Cli Setup npm init npm install gulp --save-dev npm install gulp-pug --save-dev npm install rename --save-dev Gulpfile.js const gulp = [...]
Vue.js
Vue.js – Beginners Guide
I am sure you have already heard about React, Angular and maybe Vue.js. Today you will get a glimpse into Vue.js and it’s amazing features. [...]
Scrapy
Scrapy: Scraping Web Sites with Python – Tutorial
Scrapy is a very powerful framework that enables you to crawl web pages and extract information you need. Installation pip install scrapy Start the project [...]
How to get the XPath in Chrome Browser
So you need an XPath for your script or scraper and you have Chrome installed. No problem! Just follow these two steps and you will have your XPath ready. [...]
Top Atom Plugins You Shouldn’t Live Without
atom-beautify atom-wordpress autoclose-html browser-plus color-picker emmet gitignore-snippets language-markdown markdown-preview-enhanced linter [...]
Lighthouse: Analyze your Web App or Web Page
Learn to use Google's Lighthouse - a tool for web app and web page analysis.
Progressive Web Apps Training by Google
Here is some candy for all of you who would like to learn more about Progressive Web Apps. Google preapred Progressive Web Apps Training training with lots [...]
JavaScript Bookmarklet in Firefox
Load jQuery to the page [...]
Embed the base64-encoded image in HTML
Add image as base64 encoded <img src="data:image/png;base64,___iVBORw0KGgoAAAANSUhEU___"> Get the encoded image Right Click on image > Inspect [...]
Request headers
Sample User Agents
Get your user agent by entering the following code into browser console: navigator.userAgent Chromium on Ubuntu "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 [...]
CSS attribute selector
HTML <td data-gender="male">...</td> CSS td[data-gender="male"] { ... } Jquery $('td:contains("male")') $(element).not(":contains('male')")