​​Gulp vs Webpack, внятно и понятно

Нужно ли использовать Webpack с Gulp или вовсе, только Webpack?

Webpack - бандлер, который собирает модули. В модули могут входить как js-файлы так и css, шаблоны и т.д. и webpack умеет все это бандлить в один такой большой бандл (или разделять их по умному).. На этом его зона ответственности заканчивается. Но что же остается task раннерам в таком случае?

Да собственно для простых проектов и ничего. Для проектов посложнее - запуск тестов, различные рутинные действия. Например gulp deploy, gulp build который после бандлинга сделает нам билд всего и все в tar.gz и еще и запустит тесты. Ну и т.д.

Есть конечно "плагины" для webpack добавляющие функциональность task раннеров но как по мне это уже перебор.

Шаблоны для верстальщика — канал на котором Вы найдете шаблоны, которые помогут прокачать Ваш навык вёрстки и пополнить Ваше портфолио реальными примерами.

Подписывайтесь 👈

​​Envato — стоит ли заходить? 

Сейчас на envato стало очень сложно пробиться. Постоянно отказы, не соответствует качеству продукт и всё. Никаких объяснений, что именно не так. Деньги там реальные. Минус в том, что на приём проекта отталкиваются от дизайна, и можно получать хард реджекты(отказы), непонятно по какой причине очень долго.

Проще пробиться в App Store с простым приложением и по затратам меньше. В то же время, в категориях куча всяких посредственных товаров, добавляется и добавляется, как они проходят модерация - загадка.
В одной только категории 12 одинаковых товаров от 1 автора, т.е. меняется чуть цвет, название - и вперёд. Как этот автор проходит модерацию - загадка, но, что удивительно, всегда проходит модерацию.

​​Связана ли адаптивная верстка с дизайном?

Адаптивность нужно закладывать уже на стадии дизайна. Т.е. делать сразу несколько макетов одной страницы под разные разрешения. Если это не сделать, верстальщику будет сложно понять, как должен выглядеть сайт, например на мобильных устройствах (при низких разрешениях). Дизайн на выходе дает PSD, верстка - рабочий HTML.
Кроссбраузерность существовала задолго до адаптивного дизайна.

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

Адаптивная верстка - это уже техническая составляющая. HTML и CSS разметка сделана таким образом что элементы имеют "плавность" и легок адаптируются по размер браузера, так же оптимизировано под загрузку мобильных устройств. Сжатие html, css, javascript и оптимизация изображений, как правило для дисплеев retina добавляются специальные правила, что бы на современных телефонах отображались более качественно.

Фронтендер от бога — топ-канал о фронтенд-разработке. Если вы учите JS — подписывайтесь!

Что вас ждет:
— обучающие материалы (в том числе и уникальные) с удобной категоризацией;
— еженедельные дайджесты информации из мира фронтенд-разработки;
— профессиональный юмор;

Подписывайтесь на фронтендера от бога ⬇️

13 компонентов React
1. Rebass - маленькая библиотека UI-компонентов, благодаря которой можно создавать очень мощные наборы примитивных элементов
2. Компоненты Ant-design - предлагает полновесный список из больше чем 50 настраиваемых компонентов, которые вы можете использовать для создания прекрасных приложений.
3. React Bootstrap
4. Material UI - Ребята из Ant-design создали собственный язык дизайна и реализовали на его основе React-компоненты. 
5. React Spinner в отличие от предыдущих вариантов, фокусируется на не общем виде вашего приложения и не на внутреннем дизайне его архитектуры.
6. Semantic UI React Semantic UI это библиотека на основе jQuery.
7. Grommet библиотека компонентов
8. Gestalt Библиотека компонентов была разработана Pinterest на основе их внутреннего языка дизайна.
9. Fabric React
10. OnsenUI это библиотека компонентов с фокусом на mobile-first дизайн. 
11. React Virtualized
12. Blueprint
13. React Desktop

Верстальщик от Бога - самый большой канал про верстку в телеграм.

Подписывайся, если ты:

- учишь верстку (у нас есть крутой чат, где можно задать вопросы)
- работаешь верстальщиком/фронтом
- работаешь бэком, но хочешь быть в курсе последних тенденций в верстке и на фронте в целом

Когда использовать Vuex?

Vuex помогает управлять совместно используемым состоянием ценой привнесения новых концепций и вспомогательного кода.

Если ещё не приходилось создавать крупные SPA и вы лишь знакомитесь с Vuex, это может показаться многословным и сложным. Всё в порядке — простые приложения могут легко обходиться и без Vuex.

Но если вы создаёте SPA среднего или крупного размера, то, скорее всего, уже сталкивались с ситуациями, которые заставляли задуматься о том, как лучше управлять состоянием вне компонентов Vue, а Vuex в таком случае может стать вполне естественным следующим шагом.

​​Основы Vue.js - что учить?

1. Интерполяция
2. Пользовательские события
3. Атрибуты
4. Двустороннее связывание
5. V-for
6. Модификаторы событий
7. Передача параметров в методы
8. Условный рендеринг v-if
9. Методы в шаблоне
10. Ярлыки
11. Computed
12. Свойства watch
13. V-model
14. Инлайн стили
15. Css классы

​​С чего начать создание магазина под 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/