​​С чего начать создание магазина под SEO?

1. Анализ конкурентов
2. Семантическое ядро и структура сайта
3. Продумать логику товаров (как добавлять новые категории продуктов, какие лендинги для них)

- ЧПУ
- Хлебные крошки
- Раскрытые фильтры в каталоге раскрыты сразу
- Небольшой размер карточек товара, особенно в корзине

Обучим на React Native разработчика и примем на работу! 
IT School Maxima приглашает на онлайн-курс по разработке мобильных приложений «React Native». 
Лучших студентов курса IT-компания Maxima готова взять на стажировку с дальнейшим трудоустройством. 

Старт курса: 10 марта.
Расписание: понедельник, среда с 19:00 до 20:30 (МСК).  
Стоимость: 12 000 р. 

Найти программу и более подробную информацию или записаться на курс вы можете по ссылке: https://itschool.timepad.ru/event/1547560/

​​Актуальный способ отправки форм 
без перезагрузки на 2021 год

jQuery хоронят уже давно. Если он Вам подходит
и не мешает вашему проекту - используйте. В 2021 вместо jQuery можно пробовать использовать Alpine.js

В основном пользуются fetch. Если Вы пользовались Deferred объектами в jquery то fetch не сложнее. А если нет, то придется освоить Promis.

Выбирая между fetch и XHR следует выбрать второе, так как у старого доброго XHR поддержка браузерами лучше + больше функций.

​​Зачем в проекте нужны Karma и Grunt?

Karma умеет только запустить браузер и скормить ему специальную страничку. И всё, даже сами тесты надо писать с использованием других библиотек.

grunt/gulp — task-раннеры общего назначения, используются для организации всех процессов. Скажем, есть требование перед сборкой прогнать код через linter и unit-тесты и только потом собирать. Karma вам в этом не поможет.

Как «Спрятать» js код на сервере?

Нужно понять, что НЕВОЗМОЖНО что-то спрятать в JS. Потому, что, в конце-концов, весь код целиком загружается в браузер. Любой, самый секретный, самый чудовищно-сложный, шифр как-то преобразуется в обычный текст. Для этого есть функция в вашем приложении. Злоумышленник просто залезет в код и использует вашу функцию для дешифровки.

Поэтому, всё-же, нужен backend. Когда пользователь делает ввод, то на сервер идёт запрос, проверяется пользовательский ввод, и приходит ответ уже от сервера, верен ли ввод пользователя или нет. От сервера может даже сразу прийти страница, куда направлять пользователя, в зависимости от правильности его ввода. Для таких задач и был придуман backend.

​​Инструменты верстальщика

Firebug - Это специальное расширение для браузера Mozilla Firefox, которое умеет быстро редактировать код на стороне клиента.

PerfectPixel - расширение позволяет наложить на верстаемый веб-ресурс полупрозрачный макет. Таким образом, можно сравнить попиксельно оба изображения и сразу же внести изменения в код.

WinLess - Программа для оперативной работы с препроцессором LESS.

CSS3 Generator - Специальный инструмент для генерации кода CSS под множество предустановленных задач. 

Page Rule - Инструмент, который подскажет размеры каждого элемента на сайте.

Livetools Ui Parade - Это подборка из 4 генераторов элементов для макета: ленточек, иконок, форм и кнопок. Результат выгружается в виде кода CSS или HTML.

​​Каким способом лучше верстать сайты?

Верстать без разницы. Можно и так и так. Но если говорить о проекте, то лучше делать на бутстрапе, притом на 5. И тут есть множество причин. И главная из них экономическая, стоимость владения сайтом это основной критерий для владельца, не разработка а именно его поддержка. Так вот поддерживать сайт на бутстрапе дешевле. 

Бутстрап или любая другая готовая коллекция ui-элементов -- это способ быстро получить интерфейс с минимальными затратами. Его следует воспринимать либо как инструмент для прототипирования, либо как инструмент для back-end разработчиков, которые делают сервис, где не сильно важен дизайн на этапе разработки.

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

​​Топ плагинов для Gulp

1. browser-sync - автообновление страницы, позволяет открывать ваш проект в локальной сети (с мобильного или другого компьютера)
2. gulp-autoprefixer - автоматические вендорные префиксы для css
3. gulp-uglify - для сжатия JS файлов
4. gulp-sass - для компиляции препроцессора SASS/SCSS
5. gulp-group-css-media-queries - длинное название говорит за себя 
6. gulp-clean-css - для сжатия CSS файлов
7. gulp-sourcemaps - для создания карт
8. gulp-rename - переименование файлов, удобно превращать, к примеру, style.css в style.min.css и тд
9. gulp-imagemin - автоматическое сжатие картинок, никакой ручной мороки!
10. gulp-webp - конвертируй картинки в формат WebP, гугл за него активно топит
11. gulp-favicons - создание фавиконки под все устройства и форматы
12. gulp-replace - замещение строк
13. gulp-rigger - это один из самых полезных плагинов. Позволяет собирать html-страницы по кусочкам, как в php. Просто незаменим
14. gulp-plumber - тоже очень полезен. С ним галп при ошибках не падает мертвым грузом, к тому же дает подробную информацию о том, где произошла ошибка
15. gulp-debug - дает логи того, что сейчас запускается
16. gulp-clean - для удаления папок и файлов

​​Занимается ли версткой front-end developer?

Зависит от проекта. Сложную верстку, с анимациями и прочим, не каждый фронт потянет, но и не каждый верстальщик. Часто, front-end разработчики умеют верстать на должном уровне, чтобы делать типовые компоненты.

Также касается ReactJS, там после раскидки верстки на компоненты, переделать что-то в верстке верстальщик не сможет (разве что в стилях) без знания JSX, да и с базовыми знаниями будет не очень просто. В Vue получше, там минимум логики в шаблонах, но все таки, там отдельный шаблонный язык, который следует понимать.

Поэтому, довольно редко бывает (по крайней мере в продуктовых компаниях, разрабатывающих SPA), что есть отдельный верстальщик в команде, разве что человек, который предпочитает брать задачи по верстке, или новичок, которому команда предпочитает скидывать эти задачи.

​​Топ полезных сервисов

Документации, статьи, гайды и многое другое по миру веба: https://developer.mozilla.org/ru/

Вдохновение:
https://www.behance.net/
https://dribbble.com/

Иконки:
300.000+ иконок для скачивания в любом формате: https://seeklogo.com/

Картинки:
Бесплатный фото-сток: https://pixabay.com
Тоже: https://ru.freeimages.com/

Ручная оптимизация картинок: https://compressor.io/compress
https://imagecompressor.com

Если с комбинацией цветовой гаммы у вас тоже плохо: https://colorscheme.ru/

Списки вопросов для собеседования по 41й технологии: https://github.com/FAQGURU/

Генератор css-гридов: https://cssgrid-generator.netlify.com/

Самый крупный конвертер файлов (из мне известных). Съест и сконвертирует что угодно: https://convertio.co/ru/

Для конвертации шрифтов: https://transfonter.org/

Бесплатные мокапы: https://www.mockupworld.co/all-mockups/

Проверить верстку на соответствие со стандартами: https://validator.w3.org/

Скорость работы сайта: https://developers.google.com/speed/pagespeed/insights/

Автоматические полифиллы:
https://polyfill.io/v3/

​​React.js vs. Ember.js. В чем разница?

Сравнивание само по себе не корректно. React библиотека для рендера интерфейса. Ember фреймворк для создания веб-приложений (амбициозных), в котором тоже есть библиотека для рендера интерфейса - Glimmer и она тоже поддерживается виртуальный DOM

Fastboot эмбера это пока только рендер статических страниц для поисковиков. Прелесть Ember.js в том, что он переопределяет прототипы встроенных объектов. Ведь это единственный путь к успеху. Вспомните такие мегапопулярные библиотеки, как Prototype.js, Mootools и Sugar.js, которые полностью затмили жалкие пародии типа jQuery.

​​Стоит ли учить Backbone.js сегодня?

В Backbone.js изучать особо нечего. Замена ему давно уже есть — react и vue. С нуля я бы точно не стал строить проект. Сейчас Backbone.js сильно отстает, стоит учить только с прицелом на конкретную вакансию.

​​Зачем верстальщику нужно изучать JavaScript?

Верстальщику Javascript нужен на минимальном уровне, исключительно для включения и настроек плагинов. Javascript должен заниматься программист front-end. Если требуют его знания, то это не вакансия верстальщика. Есть front-end developer. Это и верстальщик и программист и ещё много кто в одном лице. Оплачиваться это должно совсем по-другому.

Если для себя хотите понять, что и как, сходите на собеседование - получите точный ответ, что от вас хочет конкретная контора

​​Топ 10 фреймворков JavaScript

1. AngularJS - это фреймворк с открытым исходным кодом для создания фронтенда веб-приложений. Он нацелен на решение нескольких задач, с которыми сталкивается разработчик при построении одностраничных приложений.

2. React - это библиотека JavaScript.
Он используется для построения пользовательских интерфейсов. React поддерживается Facebook, Instagram и другими компаниями.

3. Ext JS - это фреймворк для создания приложений на JavaScript. Он задействуется при построении интерактивных кроссплатформенных веб-приложений. Использует такие технологии как Ajax, DHTML и др.

4. Ember.js - веб-фреймворк JavaScript с открытым исходным кодом. Основан на шаблоне Model-View-ViewModel. Этот фреймворк позволяет разработчикам создавать одностраничные веб-приложения.

5. Backbone.js - это библиотека JavaScript. Она использует RESTful JSON интерфейс. Основана на шаблоне проектирования приложений Model-View-Presenter (MVP). Эта библиотека создана для разработки одностраничных веб-приложений.

6. GWT - Google Web Toolkit помогает разработчикам создавать и поддерживать сложные фронтенд-приложения на Java.

7. Knockout это фреймворк JavaScript, использующий шаблон проектирования Model-View-ViewModel.
В нем присутствует четкое разделение между представлением (View) и данными (Model), которые должны отображаться.

8. Vue.js это прогрессивный JavaScript-фреймворк с открытым исходным кодом. Используется для создания пользовательских интерфейсов.
Фреймворк очень адаптивен благодаря интеграции в другие проекты.

9. Dojo - Набор инструментов Dojo это модульная библиотека JavaScript с открытым кодом. Используется для разработки кроссплатформенных приложений и сайтов на основе JavaScript/Ajax.

10. Polymer - Polymer это библиотека JavaScript с открытым исходным кодом. Она применяется для создания веб-приложений, использующих веб-компоненты. Видоизмененные YouTube и Google Earth, YouTube Gaming и многие Google-сайты используют Polymer.

​​VSCode Extensions

Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Помогает закрывать теги

Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Автоматически переименовывает теги

Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Проще ориентироваться в блоках

CSS Peek
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Быстрее находит нужные стили

Darkula
https://marketplace.visualstudio.com/items?itemName=alex-pex.theme-darkula
Иногда скучаю по стилистике Webstorm

EditorConfig for VS Code
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Для дружбы с editorconfig

ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Поддержка ESLint

IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Помогает с автокомплитом для CSS

open in browser
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
Быстро открывает сайт в браузере

Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Помощь с нахождением путей

Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Форматирует автоматически код в красивый

Svelte
https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
Для любителей Svelte

Vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
Просто необходимый extension для всех любителей Vue
vscode-icons

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Красивые иконки для разных типов файлов

JS Parameter Annotations
https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations
Показывает название параметров для функций

​​Javascript: Как практиковаться?

 Кодить и еще раз кодить
Нужно просто начать писать код, желательно что-то своё. Писать свое велосипеды, слайдеры, пытаться повторить что то сложное. Кстати лучше пытаться делать что посложнее тк одновременно будете и закреплять на практике, что знаешь и нагугливать новые знания( и тут же их применять). 

Попробуйте без фреймворков, даже без джейквери на чистом JS, коряво и в одном файле. Пишите мелкие задачи, калькулятор, вывод по кнопке информацию на экран, табы, если так делать 2-3 недели, практика закрепится на ура.

​​Можно ли использовать Node.js на хостинге?

Проект будет работать только на Node.js хостинге, на php или python хостинге работать не будет. Вам нужен vps/vds, а не хостинг. Если требуется быстро запустить небольшой сайт, проще загрузить на php, если проект принципиально на node, можете просто взять CMS на Node.js и вообще отказаться от PHP.

​​Svelte.js: Еще один повод не учить react, vue

Учите более распространенные вещи — react, vue. По ним больше учебных материалов, легче найти ответы и советы, а Vue не сильно сложнее svelte. если для трудоустройства на официальную работу, то конечно надо изучать то, на что есть спрос в этих компаниях - react, vue. Если делать для своих проектов, для фриланса, то можно побаловаться и с Svelte.

Для чего Вам пригодится Svelte ?

Если Вы работаете один и Вам срочно нужно сделать MVP или небольшую админку. С большой админкой будут проблемы так как при написании нового кода Вы забудете старый или нужно обязательно писать само-документированный код, так как Svelte не «заставляет» Вас это делать.

Если Вы только начинаете учиться писать на JS и делать фронтенд Svelte даст Вам всю свободу «выстрелить в ногу», в соседа по парте или устроить массовую стрельбу по ногам. На самом деле Вам не нужно будет учить JSX или долго разбираться в конвенциях кода, Вы сразу можете сделать Ваш первый фронтенд проект и увидеть, что у Вас уже что-то получилось и что-то даже работает.

​​Нужен ли TypeScript для написания бэкенда на Node.js?

Можно ли обойтись чистым JavaScript?
Да. TypeScript лишь добавляет к JavaScript статическую типизацию в компайл-тайм. После компиляции будет все тот же JS.

Главный плюс TypeScript - скорость разработки за счет подсказок IDE и автодополнения, больше авторефакторингов. Ну и возможность ограничить использование функций/методов от нежелательного использования тоже плюс. А если еще и проектировать доменную модель на типах, то можно сразу видеть, если что-то не сходится, еще до написания логики. В самой логике код неотличим от обычного JS, но с хорошей проверкой типов.

​​Git базовые команды

git clone адрес репозитория - клонировать репозиторий на локальный компютер

git commit -m 'initial commit' комит изменений в локальный репозиторий

git push -u origin master - только первый раз отправка изменений в удаленный репозиторий

git push - все последующие разы отправка изменений в удаленный репозиторий

Откат изменений
git pull - скачивается актуальная версия удаленного репозитория и все изменения применяются к локальному репозиторию

checkout - перейти в другую ветку
discard - не отправлять в репозиторий те изменения которые нам не нравятся
revert - откатить существующие комиты
hard reset -откатить целую пачку комитов

Работа с ветками

merge - сначала подтягиваем в свою ветку из master все изменения
merge - потом тестируем и делаем слияние переходим (checkout) в master и применяем (merge) все изменения из нашей ветки

git commit -a -m 'commit all edited files' закомитить все измененные файлы безиспользования команды git add
git clone - скачивание репозитория
git status - просмотр текущих изменений
git add - добавить файл в локальный репозиторий
git commit - коммит в локальный репозиторий
git push - коммит в удаленный репозиторий