IT Верстальщик
1.18K subscribers
50 photos
1 video
239 links
Авторский блог про веб-разработку

Подборки сервисов, статей и новостей в мире front-end и back-end
Download Telegram
​​Создатели Ruby on Rails выпустили инструмент для отказа от JavaScript при разработке веб-приложений

Компания Basecamp уже успела создать одноимённый менеджер проектов и разработать Ruby on Rails. А сейчас она решила посягнуть на святое и выпустить Hotwire. На сайте проекта говорится, что это «альтернативный подход к созданию современных веб-приложений без использования JavaScript». 

На сайте проекта заявляется, что Hotwire позволяет достигнуть «скорости одностраничного веб-приложения без написания JavaScript-кода». В том числе за счёт отправки «по проводам» HTML вместо JSON.
​​Babel или Typescript? Есть ли смысл учить второй?

Не стоит придавать столь высокое значение новым технологиям. TypeScript и Babel сравнить можно, разве что в отношении того что их реализация предполагает прекомпиляцию JS.

Typescript - идет по другому пути.
Он более надежен по определению, так как значительная часть проверок выполняется еще до того, как код идет в реальный браузер.

Если вас устраивает функционал Typescript - это будет вполне себе целесобразно. Качество ваших проектов будет выше.

Если же вам по каким то веским причинам нужен ES6 - используйте Babel на здоровье.
​​Стоит ли изучать Nuxt.js?

В Vue 3.0 это будет из коробки

Недостатки:

1) Он долго запускается при `nuxt dev` (мой блог запускается за 3-5 минут) и HMR обновляется в среднем 1-5 секунд (порой и дольше), даже если обновил просто template. Это больше всего напрягает.

2) После изменения кода, иногда папка `.nuxt` генерируется с ошибкой, приходится менять любую строчку в исходниках проекта чтобы опять запустить генерацию или порой полностью перезапускать Nuxt. Такая проблема была замечена не на всех проектах.

3) Бывает проблематично использовать модули которые не идут сразу на сервере и на клиенте, но это больше проблема SSR. Еще порой хочется получить сам nuxt контекст где store, router, плагины, но это нельзя сделать в некоторых местах, обычно эта проблема на клиенте. Например, на клиенте в store где state еще нет свойства window.$nuxt, нельзя обратится к плагину универсальных куков cookie-universal-nuxt и взять из куков значение и записать в state, а по другому к контексту nuxt не обратится. Store тяжело получить в самом store, порой это нужно.

4) Когда с ним использовал TypeScript, то иногда nuxt выдавал что типа (обычно интерфейса) не существует или другие ошибки типов, но этих ошибок на самом деле не было. Единственный выход — заново запускать nuxt dev и долго ждать, порой эта проблема возникала по несколько раз в течении 20 минут, приходилось перезапускать несколько раз.
​​Под какие разрешения экрана готовить дизайн сайтов в 2021?
(320/360 - 1920)

1. Усложнять простое проще, чем упрощать сложное.
2. Сначала мобильные. P.S это не подразумевает обделить десктоп.
3. Перестать мыслить сетками и точными размерами.
4. Больше отзывчивости, больше относительных единиц, больше grid css.
5. Украшайки — в последнюю очередь.
6. Дизайн сразу в браузере. Да, дизайнить сайт сразу в браузере, использовать условные элементы, которые потом можно отрисовать уже в граф. редакторе. Чтобы дизайнить в браузере, соответственно изучить вёрстку + технологии анимаций в вебе. +доступность +производительность.
7. Фильтровать тренды.
​​Продвинутый CSS

Какое-то время CSS оставался односторонним: один цвет, одно состояние, одно мгновение, одно устройство.

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

Псевдоклассы в CSS
Градиенты в CSS
Переходы в CSS
Анимация в CSS
Трансформация в CSS
Отзывчивость в CSS
​​Что быстрее освоить: javascript + node.js или javascript + php?

Для новичков PHP проще. PHP вида "запрос-ответ-умер" прощает многое. Можно писать как угодно и при этом не иметь утечек памяти поскольку всё должно быть подчищено за разработчиком по завершению скрипта, а если нет, то проблема не ваша, а связующего ПО.

Node.js ничего не прощает, не понимаете как работает event loop считайте, что не понимаете в какой последовательности будет выполнен код. Возможны утечки, захват процессорного времени, неэффективное использование многоядерного процессора.

Но многие используют Javascript на клиенте, никогда не слышали про event loop, их код бесконечно ест память и большинство об этом даже не знают, что не мешает вешать себе регалии сеньоров и мидлов. Если похожий подход то можно прямо сейчас начать писать боевой код на node.js. Как-то оно всё равно будет работать.
​​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 добавляются специальные правила, что бы на современных телефонах отображались более качественно.
This media is not supported in your browser
VIEW IN TELEGRAM
Фронтендер от бога — топ-канал о фронтенд-разработке. Если вы учите 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
​​Slider на чистом CSS
Codepean
Верстальщик от Бога - самый большой канал про верстку в телеграм.

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

- учишь верстку (у нас есть крутой чат, где можно задать вопросы)
- работаешь верстальщиком/фронтом
- работаешь бэком, но хочешь быть в курсе последних тенденций в верстке и на фронте в целом
Когда использовать 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 поддержка браузерами лучше + больше функций.