Виолетта Морозова

https://css-tricks.com/svg-line-animation-works/

Из всех эффектов появления самый логичный и полезный - это то, как сделано у Медиума.
https://jmperezperez.com/medium-image-progressive-...
Они просто подставляют маленькую копию картинки (20x20, если правильно помню), которая весит какие-то копейки (и поэтому может быть вставлена в base64), но в размытом состоянии дает общие очертания картинки-оригинала.

Близкие аналоги:
https://css-tricks.com/the-blur-up-technique-for-l...
https://words.mxbry.com/a-workflow-for-lazy-loadin...

Статья habrahabr.ru/post/114256

1. Проверка соответствия макету.
   Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).
   В качестве инструмента можно использовать Pixel Perfect (см. статью).
   
   
2. Кроссбраузерность. Корректное отображение в браузерах, указанных в задаче на тестирование.
   
3. Проверка на всех необходимых разрешениях
   Всегда следует проверять, как страница реагирует на уменьшение масштаба, таким образом, эмулируя просмотр на устройстве с большим экраном.
   Особенно это актуально, если на странице есть фоновая картинка, которая должна быть на всю область экрана. Это позволяет проверить, что она не вставлена с обрубками.
   
   
4. Проверка на всех необходимых устройствах.
   Даже сайты, не адаптированные под мобильное устройство, должны на нем более-менее корректно смотреться. На мобильных устройствах следует проверять хотя бы в двух браузерах.
   Интересный сервис: webmark.com.ua/mobile
   Можно средствами браузера.
   Адаптивная верстка - рекомендую бутстрап, getbootstrap.com
   
   
5. Отсутствие js-ошибок. В консоли браузера не должно выдаваться ошибок.
   
6. Валидация html - validator.w3.org/. Наличие предупреждений (Warning) при проверки возможно. Ошибок не должно быть.
   
7. Валидация css.
   
8. Корректная работа при вбивании реального текста, надёжность вёрстки.
   
9. Оптимизация скорости загрузки.
   https://gtmetrix.com/
   https://developers.google.com/speed/pagespeed/insights/
   
   
10. Наличие Win/Mac/Linux-аналогов шрифтов. При использовании нестандартных шрифтов (определить подгрузку таких шрифтов - также в консоли на закладке Network), проверить, что в случае их незагрузки сайт нормально смотрится.
    Как эмулировать их незагрузку? Например, если шрифт грузится с google fonts, закрыть к нему доступ через файл hosts. Сайт будет смотреться иначе, но ничего не должно слишком сильно разваливаться.
    
    
11. Label и input/select должны быть слинкованы
    
12. Проверка корректности заполнения форм на JS. В верстке формы должны валидироваться: обязательные поля подсвечиваться, поле email проверяться на корректность и т.п. Поля для ввода телефона должны иметь маску (если телефон, скорее всего, российский), возможно маски на другие поля (дата, время).
    
    
13. Переключение между элементами форм по кнопке tab
    
14. Лого на внутренних страницах должно вести на главную страницу (должно быть ссылкой)
    
15. Интерактивность соответствующих элементов - реакция на наведение и нажатие
    
16. Skype-плагин не должен ломать вёрстку
    
17. Ресайз textarea не должен ломать вёрстку
    
18. Ссылки на сторонние сайты должны быть с target=”_blank” (открываться в новой вкладке)
    
19. Проверка орфографии, в том числе автоматизированными средствами (Word'ом)
    

И все отлично работает, но когда дело доходит до реального телефона все плывет, самое больное - это шрифты они больше чем должны быть.

Решение проблемы с увеличением шрифтов на мобильных устройствах.

-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;

А если у меня его нет? Так же, не буду же я при верстке каждый раз заливать сайт на сервер и чекать его с телефона.

Используйте gulp.js, с установленным browserSync, который Вам дает локальный адрес сайта.
Вводите на устройствах 192.168.0.xxx:3000 (адрес выдается browserSync'ом).
И каждый раз при сохранении страницы или изменении файлов CSS или JS страница обновляется.
Вы увидите все возможные косяки, не заливая сайт на сервер.

Также browserSync можно использовать с установленных виртуальных машин с разными браузерами.
У меня на столе стоит 2 монитора с разными разрешениями и ноут, подключенный по сети.

Тут будет множество мнений и какое реально правильное не сказать точно.
Я для себя выбрал вариант - грузить себе по двум основным причинам.
Во-первых, я оптимизирую шрифты иначе. Как правило требуется гораздо меньше символов, чем заложенов CDN.
Во-вторых, не зависеть от других сайтов. А вдруг гуглофонт упадет?))) Ну, или плохой коннект до CDN.
Мой вариант более затратный по времени. Скачай, оптимизируй, загрузи, подключи.
Я вообще не использую CDN (сейчас в меня полетят камни), но я считаю это правильным.

Github-аккаунт с проектами, страничкой и свой блог - вот где есть польза!

PS: Посещаемость блога - 550 хостов в сутки!
Спасибо всем, кто зашёл, и особенно тем, кто поставил кружку пива (бонус - за мной)!

Линкедин это по большей части для западного рынка, когда вы уже поработали в нескольких неплохих компаниях, написали у себя в истории крутые должности с красивыми и офигенными описаниями и параллельно со всем этим обмазались всякими "коннекшенами" со всех тех же мест где вы работали (или с кем пиво на конференции пили). В общем такой себе Circle Jerk, на котором вас в основном будут находить ушлые HR, отправляющие слегка измененную копипасту с описанием вакансии.

Не то чтобы это прям бяка жуткая, но активно профилем заниматься стоит только всяким менеджерам/бизнесменам и эйчарам, которым как бы без связей любых мастей далеко не ухать по карьерной лестнице.

Я, как обычный разраб, просто принимаю почти все входящие коннект реквесты и любезно отвечаю эйчарам "сейчас позиция не интересует, но потом если что возможно напишу", ибо план B лишним не бывает (хотя, по ощущениям, все равно будет проще найти работу через друзей или какой-нибудь Hired если приспичет, чем ползти в эту жуть).

Это все в пределах конкретной компании ведь. Тимлид в конторке по разработке сайтов != тимлид большой международной компании. В целом примерно так:
Джуниор не может сам полностью выполнять таски, ему нужны советы и контроль.
Мидл может сам выполнять таски без контроля и советов, кроме исключительных случаев.
Сеньор - тот, на ком все держится и к кому все обращаются.
Тимлид может быть мидлом или даже джуном в другой компании.
Что конкретно нужно знать вам никто не скажет, да и всего знать невозможно. Если речь идет именно о каких-то технологиях, то это не важно, важно уметь находить решения, а не знать их наизусть.
И еще, лучше быть крутым джуниором/мидлом, чем хреновым тимлидом. Очень смешно смотреть, как человек с двумя годами опыта гордо рассказывает всем, что он тимлид. Этим любят пользоваться хитрые начальники, типа: "Давай ка мы тебя тимлидом называть будем, а ты поработай сверхурочно и по выходным, ты ведь теперь сеньор-помидор!", а молодежь ведется.

Чувак, идешь сначала сюда https://learn.javascript.ru/
Пока Илья с товарищами по команде тебе надоедают, учишь английский.
Потом переключаешься на бритоголового https://egghead.io/
Потом, если покажется мало, начнешь курить спеки. К этому времени уже освоишь гугл и сможешь сам их найти.

Лучшие практики SPA

1. KISS - использовать только то, что действительно нужно. Например вам не нужен Javascript, если нужно просто сделать выпадающее меню. Достаточно просто CSS. Тоже самое применяется и к JS, вам не нужен Angular, если есть просто форма обратной связи. Такая задача решается на vanillajs.
   
2. Использование фреймворков, например bootstrap, foundation и т.д. Обычно из них берется типография и сетки. Иногда формы. Я обычно беру bootstrap-stylus и собираю из него.
   
3. Critical rendering path - минимальный набор CSS, который требуется для отображения первого экрана страницы, который потом будет встроен внутрь html-файла. Пример.
   
4. Применение систем сборки, например gulp. Основной смысл заключается в том, что сначала вы дробите SPA на множество мелких компонентов/модулей/блоков. Затем унифицируете их. В итоге получается набор небольших файлов. Затем из этого набора собирается два больших файла (css, js) и они прогоняются через оптимизатор и минификатор.
   
5. Использование CDN. CDN позволяет ускорить загрузку для часто-посещаемых и популярных страниц за счет уменьшения времени доставки контента. Особенно актуально для SPA, поскольку они представляют собой статический контент, который можно кэшировать без последствий.
   

Системы сборки

Принцип работы прост, взять кучу файлов, прогнать через набор фильтров, называемых препроцессорами, пост-процессорами, компиляторами, минификаторами и т.д., затем склеить и записать внутрь общих файлов.
Остальное - ньюансы. Просто гуглите любой и идете на его веб-сайт. Непонятно, гуглите дальше.

Модули AMD, CJS, UMD

Они предназначены для управления зависимостями. Например, когда у вас есть два десятка компонентов и один зависит от другого. Суть их в том, чтобы просто объявлять зависимости в компонентах используя тот или иной способ описанный в документации. Начните отсюда.

Сборка и подключение css

Здесь и так ясно, что нужно сначала освоить сборщики. postcss - это когда обычный css скармливается фильтру, который разбирает его, добавляет префиксы к свойствам, оптимизирует наименования цветов и т.д. Убирает дублирующие свойства.

В целом очень толково про оптимизацию расписано здесь https://developers.google.com/web/?hl=ru

Взято отсюда
-----------
В целом: PhoneGap + includeHTML (+jquery)
Плагины для PhoneGap: здесь
Поддерживаемые платформы и возможности (таблица): здесь