All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.
All files were downloaded from https://cdnjs.com and named accordingly.
Output from ls command is stripped out (irrelevant stuff)
$ ls -lhS
566K Jan 4 22:03 angular2.min.js
By: @BTroncone
Also check out my lesson @ngrx/store in 10 minutes on egghead.io!
Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!
Table of Contents
Ща будет длинная простыня текста, готовьтесь. Начнем с задач.
Вот решили мы упороться за скорость загрузки и на каждую страницу сделать бандл в котором у нас будет только используемый на ней CSS-правила
Как нам это сделать? А как не забыть все состояния страницы (авторизован/не авторизован)? А те что из JS добавляются/изменяются?
Или вот мы решили пойти дальше и сократить названия всех нашил CSS-классов для чего-то вроде "aRz", как делает Gmail.
Как нам это сделать везде и ничего не забыть? Да, в JS тоже.
| // App | |
| import { Component } from '@angular/core'; | |
| @Component({ | |
| selector: 'app', | |
| template: '<span>{{ sayHello() }}</span>', | |
| }) | |
| export class App { | |
| public name: string = 'John'; |
| # oh-my-zsh Theme | |
| # Default robbyrussell theme with node version info. | |
| # Installation: place this file in .oh-my-zsh/custom/themes/robbyrussell.zsh_theme | |
| function node_prompt_version { | |
| if which node &> /dev/null; then | |
| echo "%{$fg_bold[blue]%}node(%{$fg[red]%}$(node -v)%{$fg[blue]%}) %{$reset_color%}" | |
| fi | |
| } |
| <!-- | |
| <form autocomplete="off"> will turn off autocomplete for the form in most browsers | |
| except for username/email/password fields | |
| --> | |
| <form autocomplete="off"> | |
| <!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields --> | |
| <input id="username" style="display:none" type="text" name="fakeusernameremembered"> | |
| <input id="password" style="display:none" type="password" name="fakepasswordremembered"> | |
I really liked @tjvantoll article Handling Failed HTTP Responses With fetch(). The one thing I found annoying with it, though, is that response.statusText always returns the generic error message associated with the error code. Most APIs, however, will generally return some kind of useful, more human friendly message in the body.
Here's a modification that will capture this message. The key is that rather than throwing an error, you just throw the response and then process it in the catch block to extract the message in the body:
fetch("/api/foo")
.then( response => {
if (!response.ok) { throw response }
return response.json() //we only get here if there is no error
})
| #!/usr/bin/env bash | |
| # Фейковый npm | |
| # Нужен для кэширования папки node_modules | |
| # Кэш находится в папке ~/.cache/npm-inject/[sha1 хэш файла package.json]/node_modules | |
| # | |
| # В PATH надо добавить путь папки с фейковым npm, таким образом при выполнении команды `npm install` | |
| # bash вызовет фейковый npm c параметром `install`. | |
| # Фейк проверяет наличие папки [sha1 хэш файла package.json] в кэше. | |
| # Если она в кэше, создаем на неё симлинк node_modules |
| #!/bin/bash | |
| # file: ttfb.sh | |
| # curl command to check the time to first byte | |
| # ** usage ** | |
| # 1. ./ttfb.sh "https://google.com" | |
| # 2. seq 10 | xargs -Iz ./ttfb.sh "https://google.com" | |
| curl -o /dev/null \ | |
| -H 'Cache-Control: no-cache' \ | |
| -s \ |
