Реакт - заметка об элементах:
Элементы React - это, по сути, объекты. Благодаря этому мы можем передавать их, как аргументы, в функции и управлять ими привычным для объектов способами. Важный вывод:
- props, key и другие важные сущности React - это просто ключи объектов, которыми под капотом являются элементы.
#React
Элементы React - это, по сути, объекты. Благодаря этому мы можем передавать их, как аргументы, в функции и управлять ими привычным для объектов способами. Важный вывод:
- props, key и другие важные сущности React - это просто ключи объектов, которыми под капотом являются элементы.
#React
React - заметки:
- Компоненты Реакт - это функции или классы, которые возвращают Реакт-элементы. Ничего больше.
- Компоненты Реакт "вызываются" в JSX, как обычные HTML-теги - не важно, функциональные это компоненты, классы или какие-либо другие.
- Кастомные компоненты обязательно нужно называть с большой буквы: это не просто конвенция, но правило внутренней архитектуры Реакт.
- Реакт-элементы можно добавлять в компоненты через фигурные скобки.
- Переменные нельзя присвоить компонентам Реакт строкой, как атрибуты HTML. Они (переменные) передаются в атрибуты через фигурные скобки:
attr={styleObject}
- CSS можно передавать компонентам с помощью объектов-сборников правил.
- Любой код, использующий JSX, требует импорта React. Это обязательно.
- Любое свойство, которому не назначено значение, в JSX эквивалентно true.
- Без передачи props объект props все равно будет передан компоненту, но будет пустым.
- Простая схема передачи props:
1. Создаем компонент, отвечающий за однотипный вывод разных данных.
2. Из компонента, включающего в себя версии этого, более мелкого, возвращаем разные его версии.
3. Присваиваем версиям атрибут с разными строками.
4. В самом этом компоненте указываем, что отрисовывать он должен содержимое props своих версий:
function MyElement({ myAttr }) {
return <span>{myAttr}</span>
}
Обратите внимание, здесь не используется прямой путь до props (props.myAttr): вместо этого применяется деструктуризация props-объекта.
#React
- Компоненты Реакт - это функции или классы, которые возвращают Реакт-элементы. Ничего больше.
- Компоненты Реакт "вызываются" в JSX, как обычные HTML-теги - не важно, функциональные это компоненты, классы или какие-либо другие.
- Кастомные компоненты обязательно нужно называть с большой буквы: это не просто конвенция, но правило внутренней архитектуры Реакт.
- Реакт-элементы можно добавлять в компоненты через фигурные скобки.
- Переменные нельзя присвоить компонентам Реакт строкой, как атрибуты HTML. Они (переменные) передаются в атрибуты через фигурные скобки:
attr={styleObject}
- CSS можно передавать компонентам с помощью объектов-сборников правил.
- Любой код, использующий JSX, требует импорта React. Это обязательно.
- Любое свойство, которому не назначено значение, в JSX эквивалентно true.
- Без передачи props объект props все равно будет передан компоненту, но будет пустым.
- Простая схема передачи props:
1. Создаем компонент, отвечающий за однотипный вывод разных данных.
2. Из компонента, включающего в себя версии этого, более мелкого, возвращаем разные его версии.
3. Присваиваем версиям атрибут с разными строками.
4. В самом этом компоненте указываем, что отрисовывать он должен содержимое props своих версий:
function MyElement({ myAttr }) {
return <span>{myAttr}</span>
}
Обратите внимание, здесь не используется прямой путь до props (props.myAttr): вместо этого применяется деструктуризация props-объекта.
#React
React - cмысл Key:
В Реакт есть сущность - key. Это уникальный идентификатор реакт-компонента. Применяется, в частности, в построении списков при передаче массивов в качестве props.
Его задача - оптимизировать производительность. При перерисовке вирутального дом-дерева Реакт сравнивает между собой не компоненты, которые могут быть тяжеловесными, а только их key. Это похоже на механизм NodeJS для передачи больших файлов без их считывания или маркировку HTTP-пакетов легковесным заголовком. Таким образом Реакт выполняет меньше работы и работает еще быстрее.
Если keys не указываются явно, Реакт сам проставляет их - но это будет простая нумерация. Сравнение по нумерации не обеспечивает производительности.
Аналогичен результат с использованием индексов массивов как keys. Реакт и так по-умолчанию маркирует элементы нумерацией, а это непроизводительный способ.
#React
В Реакт есть сущность - key. Это уникальный идентификатор реакт-компонента. Применяется, в частности, в построении списков при передаче массивов в качестве props.
Его задача - оптимизировать производительность. При перерисовке вирутального дом-дерева Реакт сравнивает между собой не компоненты, которые могут быть тяжеловесными, а только их key. Это похоже на механизм NodeJS для передачи больших файлов без их считывания или маркировку HTTP-пакетов легковесным заголовком. Таким образом Реакт выполняет меньше работы и работает еще быстрее.
Если keys не указываются явно, Реакт сам проставляет их - но это будет простая нумерация. Сравнение по нумерации не обеспечивает производительности.
Аналогичен результат с использованием индексов массивов как keys. Реакт и так по-умолчанию маркирует элементы нумерацией, а это непроизводительный способ.
#React
JS - о rest-операторе:
Оператор rest при деструктуризации собирает не последние оставшиеся свойства, а все, кроме тех, с которыми деструктуризация была выполнена явно:
const { id, ...rest } = targetObject;
Здесь id будет иметь значение id из targetObject, а ...rest - соберет все остальные, как перед, так и после id.
Таким образом можно без труда разделить объект на нужные части и передавать в разные части приложения только их, а не весь объект.
#JS
Оператор rest при деструктуризации собирает не последние оставшиеся свойства, а все, кроме тех, с которыми деструктуризация была выполнена явно:
const { id, ...rest } = targetObject;
Здесь id будет иметь значение id из targetObject, а ...rest - соберет все остальные, как перед, так и после id.
Таким образом можно без труда разделить объект на нужные части и передавать в разные части приложения только их, а не весь объект.
#JS
React - привязка методов
В классах Реакта можно заметить биндинг методов-обработчиков событий:
this.method = this.method.bind(this)
Биндинг внутри класса может показаться нелогичным. Виновник потребности в нем - потеря контекста this, когда метод присваивается другой переменной:
<element onClick=this.method>
Биндинг связывает this с контекстом класса, и контекст уже не теряется.
Есть и другие способы привязки this в классе. Подробнее:
https://getinstance.info/articles/react/react-and-es6-part3/
#React #JS
В классах Реакта можно заметить биндинг методов-обработчиков событий:
this.method = this.method.bind(this)
Биндинг внутри класса может показаться нелогичным. Виновник потребности в нем - потеря контекста this, когда метод присваивается другой переменной:
<element onClick=this.method>
Биндинг связывает this с контекстом класса, и контекст уже не теряется.
Есть и другие способы привязки this в классе. Подробнее:
https://getinstance.info/articles/react/react-and-es6-part3/
#React #JS
getinstance.info
React и ES6 - Часть 3, Биндинг методов в классах React (включая ES7)
Статьи о фронтенд-разработке: HTML, CSS, JavaScript, фреймворки и инструменты фронтендера, уроки и переводы зарубежных статей по веб-разработке
Как освободить порт на локалхосте
В разработке бывает, что приложение остается висеть на порту даже после закрытия. В моем случае такой сюрприз преподнесла сборка Реакт на вебпаке.
Решение для git bash:
1. netstat -ano | findstr :your-port
На выходе получаем таблицу вида:
TCP 0.0.0.0:your-port 0.0.0.0:0 LISTENING 8876
Здесь 8836 - PID процесса. Он понадобится позже. Вводим команду:
2.taskkill //PID your-pid //F
Если все пройдет успешно, получаем об этом сообщение.
#разное
В разработке бывает, что приложение остается висеть на порту даже после закрытия. В моем случае такой сюрприз преподнесла сборка Реакт на вебпаке.
Решение для git bash:
1. netstat -ano | findstr :your-port
На выходе получаем таблицу вида:
TCP 0.0.0.0:your-port 0.0.0.0:0 LISTENING 8876
Здесь 8836 - PID процесса. Он понадобится позже. Вводим команду:
2.taskkill //PID your-pid //F
Если все пройдет успешно, получаем об этом сообщение.
#разное
Тонкости импорта
В нативных модулях ES6 параметр import принимает строкой путь к модулю:
import React from 'react'
Этот путь может быть нескольких видов. Относительный и абсолютный используется по-умолчанию для кастомных модулей:
'./relativePath'
'/absolute/Path'/
Есть и третий вариант - им начинается заметка.
Обычный модуль так подключить нельзя, даже если он расположен в той же папке, что и импортирующий.
Есть два предположения, почему так происходит:
1. Такой способ импорта допустим для встроенных модулей и библиотек со специфическими настройками;
2. Такой способ специфичен для Webpack.
А вы как думаете?
#JS #React
В нативных модулях ES6 параметр import принимает строкой путь к модулю:
import React from 'react'
Этот путь может быть нескольких видов. Относительный и абсолютный используется по-умолчанию для кастомных модулей:
'./relativePath'
'/absolute/Path'/
Есть и третий вариант - им начинается заметка.
Обычный модуль так подключить нельзя, даже если он расположен в той же папке, что и импортирующий.
Есть два предположения, почему так происходит:
1. Такой способ импорта допустим для встроенных модулей и библиотек со специфическими настройками;
2. Такой способ специфичен для Webpack.
А вы как думаете?
#JS #React
Спасибо всем, кто участвовал в опросе.
Верный вариант - специфика Webpack.
Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.
#JS #React #Webpack
Верный вариант - специфика Webpack.
Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.
#JS #React #Webpack
jQuery - лучшие практики:
- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь
- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)
- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).
- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.
#JS #jQuery #best_practices
- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь
- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)
- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).
- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.
#JS #jQuery #best_practices
jQuery - лучшие практики, часть 2:
- События:
1. Использовать только один обработчик события document.ready, а не распихивать код по нескольким.
2. Описывать функции обработки событий вне обработчика, передавая ему только имя функции. Выгода - читабельность, легкость отладки.
3. Используя jQuery, стоит всегда назначать события через него - без инлайн-кода. Выгода - консистентность.
- Анимация:
1. Лучше предустановленные значения скорости анимации, чем кастомные.
- Плагины:
1. Хорошо задокументированные популярные плагины предпочтительнее - сообщество следит за багами и уязвимостями.
- Чейнинг:
1. Чейнинг методов предпочтительнее создания новых переменных или селекторов. Для легкости чтения звенья лучше разносить по строкам. В длинных цепочках можно кэшировать промежуточные объекты.
- Прочее:
1. Для передачи нескольких однотипных параметров лучше не вызывать метод несколько раз, а передать параметры литералом объекта:
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});
2. Не стоит писать CSS прямо в jQuery, вместо этого лучше определить правило в таблице стилей и передавать его элементу.
Warning! Часть инфы может быть неактуальной для новых версий jQuery.
#JS #jQuery #best_practices
- События:
1. Использовать только один обработчик события document.ready, а не распихивать код по нескольким.
2. Описывать функции обработки событий вне обработчика, передавая ему только имя функции. Выгода - читабельность, легкость отладки.
3. Используя jQuery, стоит всегда назначать события через него - без инлайн-кода. Выгода - консистентность.
- Анимация:
1. Лучше предустановленные значения скорости анимации, чем кастомные.
- Плагины:
1. Хорошо задокументированные популярные плагины предпочтительнее - сообщество следит за багами и уязвимостями.
- Чейнинг:
1. Чейнинг методов предпочтительнее создания новых переменных или селекторов. Для легкости чтения звенья лучше разносить по строкам. В длинных цепочках можно кэшировать промежуточные объекты.
- Прочее:
1. Для передачи нескольких однотипных параметров лучше не вызывать метод несколько раз, а передать параметры литералом объекта:
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});
2. Не стоит писать CSS прямо в jQuery, вместо этого лучше определить правило в таблице стилей и передавать его элементу.
Warning! Часть инфы может быть неактуальной для новых версий jQuery.
#JS #jQuery #best_practices
Полезные практики в React:
- Сократить код обращения к this.state можно, пользуясь деструктуризацией:
const { firstState, secondState } = this.state
- Вынести за пределы компонента логику коллебка можно, используя функцию высшего порядка:
const handler = itemToFind => item => item.title.includes(itemTiFind)
Здесь функция handler возвращает функцию, которая передается, например, в map и используется для фильтрации.
#React #JS
- Сократить код обращения к this.state можно, пользуясь деструктуризацией:
const { firstState, secondState } = this.state
- Вынести за пределы компонента логику коллебка можно, используя функцию высшего порядка:
const handler = itemToFind => item => item.title.includes(itemTiFind)
Здесь функция handler возвращает функцию, которая передается, например, в map и используется для фильтрации.
#React #JS
Особенности C#
- В этом языке переменные можно открывать как привычным var, так и значением типа: int, float, char...
- Прежде чем использовать, например, вывод в консоль, нужно включить в файл класс содержащий метод, как делается в C или Go:
using System;
...код классов
System.Console.WriteLine
- Нельзя в C# просто проверять значение переменной в условии:
int a = 4;
if(a) ... // не сработает!
Чтобы код работал, нужно задать связанную булевую переменную:
bool b = a == 4;
Также булевым присваиваются значения логических сравнений:
bool result = a <= b; // переменная result содержит результат сравнения.
- В C# нет оператора строго равенства, aka ===, так как это язык со строгой типизацией и в таком операторе нет необходимости.
- Массивы открываются с помощью кострукции:
тип_переменной[] = { ... }.
Есть и другие способы - например, определение пустого массива на n элементов.
- Массивы C# не динамические. Аналог динамических массивов из JS - тип list. Пример создания листа:
List<int> nums = new List<int>()
- Аналог объекта ключей-значений из JS в C# - это словарь.
Словари создаются примерно так же, как листы, но принимают два аргумента типов - для ключа и для значения.
#Сишарп
- В этом языке переменные можно открывать как привычным var, так и значением типа: int, float, char...
- Прежде чем использовать, например, вывод в консоль, нужно включить в файл класс содержащий метод, как делается в C или Go:
using System;
...код классов
System.Console.WriteLine
- Нельзя в C# просто проверять значение переменной в условии:
int a = 4;
if(a) ... // не сработает!
Чтобы код работал, нужно задать связанную булевую переменную:
bool b = a == 4;
Также булевым присваиваются значения логических сравнений:
bool result = a <= b; // переменная result содержит результат сравнения.
- В C# нет оператора строго равенства, aka ===, так как это язык со строгой типизацией и в таком операторе нет необходимости.
- Массивы открываются с помощью кострукции:
тип_переменной[] = { ... }.
Есть и другие способы - например, определение пустого массива на n элементов.
- Массивы C# не динамические. Аналог динамических массивов из JS - тип list. Пример создания листа:
List<int> nums = new List<int>()
- Аналог объекта ключей-значений из JS в C# - это словарь.
Словари создаются примерно так же, как листы, но принимают два аргумента типов - для ключа и для значения.
#Сишарп
Командная строка - памятка по навигации:
- mkdir: создать папку
- touch: создать файл
- ls: показать содержимое директории
- cd some-path - переместиться в указанную папку
- cd .. - подняться на уровень выше
Продвинутое:
- Создать вложенную структуру папок: mkdir -p some-folder/{one,two,three}. Важно: между аргументами в {} не должно быть пробелов!
#bash
- mkdir: создать папку
- touch: создать файл
- ls: показать содержимое директории
- cd some-path - переместиться в указанную папку
- cd .. - подняться на уровень выше
Продвинутое:
- Создать вложенную структуру папок: mkdir -p some-folder/{one,two,three}. Важно: между аргументами в {} не должно быть пробелов!
#bash
CSS по БЭМ - опыт, плюсы и минусы:
+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.
- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33
#CSS #BEM
+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.
- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33
#CSS #BEM
Gist
createBlock.js
GitHub Gist: instantly share code, notes, and snippets.
Bash-скрипты
В работе с командной строкой программист зачастую должен выполнять одни и те же команды - например, при разворачивании нового проекта. Автоматизировать рутину помогут консольные скрипты. Я пользуюсь Git Bash, речь пойдёт о нем.
1. Создаем файл скрипта, например, project.sh.
2. Пишем в первой строке:
#!/bin/bash
3. Перечисляем построчно необходимые команды. Например:
touch gulpfile.js .gitignore
mkdir -p src/{scss,js,img,fonts} dest
4. Запускаем скрипт в консоли:
./project.sh
Bash - полноценная среда программирования с условными выражениями и переменными, но в целом, чтобы не заморачиваться, можно ограничиться просто перечислением команд.
#bash
В работе с командной строкой программист зачастую должен выполнять одни и те же команды - например, при разворачивании нового проекта. Автоматизировать рутину помогут консольные скрипты. Я пользуюсь Git Bash, речь пойдёт о нем.
1. Создаем файл скрипта, например, project.sh.
2. Пишем в первой строке:
#!/bin/bash
3. Перечисляем построчно необходимые команды. Например:
touch gulpfile.js .gitignore
mkdir -p src/{scss,js,img,fonts} dest
4. Запускаем скрипт в консоли:
./project.sh
Bash - полноценная среда программирования с условными выражениями и переменными, но в целом, чтобы не заморачиваться, можно ограничиться просто перечислением команд.
#bash
Первая работа в IT: офис vs удаленка
Вопрос, с какого формата работы начать, регулярно всплывает в конференциях. Сегодня на него дали исчерпывающий ответ: лучше - в офис.
И вот почему:
1. Работу джуниором на удаленке найти будет тяжелее. Обычно на удаленке возится с неопытными не хотят.
2. Если до этого не работал, то очень полезно побыть в офисе хотя бы годик чтобы увидеть как в целом работает производство, как налажены процессы и тд. А лучше в разных офисах компаний разного уровня.
3. Обучение в офисе проходит намного быстрее. Можно подойти к чуваку рядом и попросить помочь. Сидя в опенспейсе будешь слышать как интервью по скайпу проходят десятки людей, какие вопросы задают и какие ответы ожидаются.
4. Есть возможность общаться, заводить контакты и обмениваться опытом. Во время такого общения обсуждают инсайдерскую инфу, которую от незнакомого человека не получить.
5. Будут давать дельные и не очень советы по поводу слабых мест и как их пофиксить.
6. Вполне возможно менторство. Во многих компаниях оно реализовано из рук вон плохо, но в некоторых - хорошо.
7. Будет возможность узнать от людей на параллельных проектах как дела у них и как поставлены процессы.
8. Компания может оплатить курсы английского.
9. Нет необходимости продавать себя непосредственно заказчику.
10. Качество проектов - выше, чем на фрилансе.
11. На галере вас, вероятно, захотят продать как миддла. Для этого дадут материалы и прогонят перед реальным собесом с клиентом через 3 или 4 фейковых с сотрудниками компании, с фидбеком от опытных сотрудников. Это тоже очень круто.
12. В компании вы можете обсудить и составить план обучения и для следующего повышения надо пройти собес где показать что реально что-то учили. И это стимулирует изучать новое.
12,5. Стоит добавить что работая из дому, часто бывают проблемы с прокрастинацией у не очень опытных ребят.
Автор перечня: @safewordhello
#карьера
Вопрос, с какого формата работы начать, регулярно всплывает в конференциях. Сегодня на него дали исчерпывающий ответ: лучше - в офис.
И вот почему:
1. Работу джуниором на удаленке найти будет тяжелее. Обычно на удаленке возится с неопытными не хотят.
2. Если до этого не работал, то очень полезно побыть в офисе хотя бы годик чтобы увидеть как в целом работает производство, как налажены процессы и тд. А лучше в разных офисах компаний разного уровня.
3. Обучение в офисе проходит намного быстрее. Можно подойти к чуваку рядом и попросить помочь. Сидя в опенспейсе будешь слышать как интервью по скайпу проходят десятки людей, какие вопросы задают и какие ответы ожидаются.
4. Есть возможность общаться, заводить контакты и обмениваться опытом. Во время такого общения обсуждают инсайдерскую инфу, которую от незнакомого человека не получить.
5. Будут давать дельные и не очень советы по поводу слабых мест и как их пофиксить.
6. Вполне возможно менторство. Во многих компаниях оно реализовано из рук вон плохо, но в некоторых - хорошо.
7. Будет возможность узнать от людей на параллельных проектах как дела у них и как поставлены процессы.
8. Компания может оплатить курсы английского.
9. Нет необходимости продавать себя непосредственно заказчику.
10. Качество проектов - выше, чем на фрилансе.
11. На галере вас, вероятно, захотят продать как миддла. Для этого дадут материалы и прогонят перед реальным собесом с клиентом через 3 или 4 фейковых с сотрудниками компании, с фидбеком от опытных сотрудников. Это тоже очень круто.
12. В компании вы можете обсудить и составить план обучения и для следующего повышения надо пройти собес где показать что реально что-то учили. И это стимулирует изучать новое.
12,5. Стоит добавить что работая из дому, часто бывают проблемы с прокрастинацией у не очень опытных ребят.
Автор перечня: @safewordhello
#карьера
Работа браузера: терминология
Прослойка между считыванием документов на сервере и отрисовкой картинки в окне браузера содержит термины и операции, которые полезно знать - если не для практических микро-оптимизаций, смысл которых на новых движках теряется, то ради теоретического кругозора.
Некоторые термины:
- CSSOM: то же, что DOM, но для CSS.
- Render Tree: дерево объектов, генерируемое браузером на основе DOM и CSSOM.
- Объект рендеринга: отдельный "лист" дерева рендеринга. Содержит DOM-элементы, сгенерированные для них стили, а также строки текста. Не включает невидимые элементы (display: none и др.).
- Layout: позиционирование элементов на странице.
- Flow: поток. По смыслу приблизительно то же, что потоки в компиляторах кода (движок браузера и есть среда выполнения).
- Painting: собственно отрисовка дерево рендеринга после layout-а.
#браузеры #рендеринг
Прослойка между считыванием документов на сервере и отрисовкой картинки в окне браузера содержит термины и операции, которые полезно знать - если не для практических микро-оптимизаций, смысл которых на новых движках теряется, то ради теоретического кругозора.
Некоторые термины:
- CSSOM: то же, что DOM, но для CSS.
- Render Tree: дерево объектов, генерируемое браузером на основе DOM и CSSOM.
- Объект рендеринга: отдельный "лист" дерева рендеринга. Содержит DOM-элементы, сгенерированные для них стили, а также строки текста. Не включает невидимые элементы (display: none и др.).
- Layout: позиционирование элементов на странице.
- Flow: поток. По смыслу приблизительно то же, что потоки в компиляторах кода (движок браузера и есть среда выполнения).
- Painting: собственно отрисовка дерево рендеринга после layout-а.
#браузеры #рендеринг
Работа браузера: рендеринг в деталях
Как процесс, рендеринг выглядит так:
1. Браузер формирует из HTML DOM-дерево...
2. Затем обрабатывает CSS и создает CSSOM.
3. На их основе создается Rendering Tree.
4. Вычисляется положение элементов на странице.
5. Происходит painting.
На этом ничего не заканчивается. Рендеринг - динамическая операция: некоторые шаги повторяются вновь и вновь, меняя структуру документа.
Некоторые операции более затратны для браузера (layout), другие - менее (repainting, или перерисовка свойств, не затрагивающих положения элемента на странице). Знания этих деталей могут помочь с микро-оптимизациями. Впрочем, современные движки хорошо оптимизируют рендеринг автоматически - существенного выигрыша в производительности не будет.
Одна из механик автоматической оптимизации - кэширование repainting-а и relayout-а: бразуер по возможности выполняет потоки команд, входящих в эти операции, едиными блоками.
На этой механке построено преимущество реактивных фреймворков. Реакт строит облегченный Virtual DOM, не содержащий ничего лишнего, тогда как "родной" DOM напичкан неиспользуемыми браузерными правилами и т.п. События на странице затрагивают только связаные с ними компоненты, остальное виртуальное дерево остается нетронутым.
Неизбежен, однако, риторический вопрос: почему сайты на Реакте такие тормозутые?..
#браузеры #рендеринг #React
Как процесс, рендеринг выглядит так:
1. Браузер формирует из HTML DOM-дерево...
2. Затем обрабатывает CSS и создает CSSOM.
3. На их основе создается Rendering Tree.
4. Вычисляется положение элементов на странице.
5. Происходит painting.
На этом ничего не заканчивается. Рендеринг - динамическая операция: некоторые шаги повторяются вновь и вновь, меняя структуру документа.
Некоторые операции более затратны для браузера (layout), другие - менее (repainting, или перерисовка свойств, не затрагивающих положения элемента на странице). Знания этих деталей могут помочь с микро-оптимизациями. Впрочем, современные движки хорошо оптимизируют рендеринг автоматически - существенного выигрыша в производительности не будет.
Одна из механик автоматической оптимизации - кэширование repainting-а и relayout-а: бразуер по возможности выполняет потоки команд, входящих в эти операции, едиными блоками.
На этой механке построено преимущество реактивных фреймворков. Реакт строит облегченный Virtual DOM, не содержащий ничего лишнего, тогда как "родной" DOM напичкан неиспользуемыми браузерными правилами и т.п. События на странице затрагивают только связаные с ними компоненты, остальное виртуальное дерево остается нетронутым.
Неизбежен, однако, риторический вопрос: почему сайты на Реакте такие тормозутые?..
#браузеры #рендеринг #React
Консоль - базовая теория:
- Терминал - это "эмулятор физического терминала", то есть, устройства ввода.
- Командная оболочка - не синоним терминала: терминал открывает оболочку внутри себя.
- Схема работы с консолью:
Пользователь -> физический терминал -> [виртуальный терминал -> командный интерпретатор -> программы]
В скобки взяты части unix-based OS.
- REPL - синоним командной оболочки, расшифровывается как Read-Eval-Print-Loop и описывает интерактивную сессию с пользователем.
- Команда pwd выводит путь к текущей директории и рашифровывается соответственно: "print working directory".
- $ pwd и $ echo $PWD работают схоже.
- Выражение через одну точку -
./hello
- означает в unix-системах, буквально, "каталог в текущей директории". Заметно сходство с модулями в Node: используется тот же принцип работы с файловой системой.
#bash #unix
- Терминал - это "эмулятор физического терминала", то есть, устройства ввода.
- Командная оболочка - не синоним терминала: терминал открывает оболочку внутри себя.
- Схема работы с консолью:
Пользователь -> физический терминал -> [виртуальный терминал -> командный интерпретатор -> программы]
В скобки взяты части unix-based OS.
- REPL - синоним командной оболочки, расшифровывается как Read-Eval-Print-Loop и описывает интерактивную сессию с пользователем.
- Команда pwd выводит путь к текущей директории и рашифровывается соответственно: "print working directory".
- $ pwd и $ echo $PWD работают схоже.
- Выражение через одну точку -
./hello
- означает в unix-системах, буквально, "каталог в текущей директории". Заметно сходство с модулями в Node: используется тот же принцип работы с файловой системой.
#bash #unix
Консоль - продолжение:
- Знак "~" - шорткат для абсолютного пути к домашнему каталогу. С ним можно быстро перейти к любому подкаталогу домашней директории из любого места:
cd ~/MyDirectory
- Команда ls принимает название директории. Так можно рассмотреть каталог, не переходя в него.
- CLI расшифровывается как command line interface, или интерфейс командной строки.
- Команда ls c флагом -a покажет скрытые файлы.
- ...c флагом -l покажет дополнительное инфо по файлам.
- Флаги можно миксовать:
ls -la или -l -a
- Как правило, флаги указываются до аргументов:
ls -la MyFolder
- Команда man имя-команды выведет справку по команде - алиасы, флаги и все прочее. Отмечу, это очень удобно!
- Для навигации по мануалу используют:
- f (forward) - вперед,
- b (backward) - назад,
- q (quit) - выход
Это не флаги, а кнопки.
#bash #unix
- Знак "~" - шорткат для абсолютного пути к домашнему каталогу. С ним можно быстро перейти к любому подкаталогу домашней директории из любого места:
cd ~/MyDirectory
- Команда ls принимает название директории. Так можно рассмотреть каталог, не переходя в него.
- CLI расшифровывается как command line interface, или интерфейс командной строки.
- Команда ls c флагом -a покажет скрытые файлы.
- ...c флагом -l покажет дополнительное инфо по файлам.
- Флаги можно миксовать:
ls -la или -l -a
- Как правило, флаги указываются до аргументов:
ls -la MyFolder
- Команда man имя-команды выведет справку по команде - алиасы, флаги и все прочее. Отмечу, это очень удобно!
- Для навигации по мануалу используют:
- f (forward) - вперед,
- b (backward) - назад,
- q (quit) - выход
Это не флаги, а кнопки.
#bash #unix