Lectrum. Страница 5

Современная сборка для frontend. Gulp4. Gulp — это наш фундамент, потому что он будет управлять всеми нашими задачами, другими словами, taskmanager . Концепция задач очень проста. Название асинхронной javascript функции равно названию задачи, и работает она по принципу: берет данные, трансформирует их и записывает результат. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы вы могли себе скачать эту сборку и начать с ней работать. #html #css #frontend #gulp

Понимаем JSON схему. Схема JSON - это мощный инструмент для проверки структуры данных JSON. Однако научиться использовать его, прочитав его спецификацию, все равно что научиться водить автомобиль, глядя на его чертежи. Вам не нужно знать, как сочетается электродвигатель, если все, что вы хотите сделать, это забрать продукты с магазина. Поэтому эта книга призвана стать дружелюбным инструктором по вождению для схемы JSON. Это для тех, кто хочет написать и понять это, но, возможно, пока не заинтересован в создании собственной машины — написании собственного валидатора схемы JSON. #javascript #json #frontend

Чем опасны сокращенные ссылки и как от этого защититься. Короткие ссылки — отличный инструмент. Иногда мы сталкиваемся с проблемой, когда необходимо отобразить чрезвычайно длинный URL, при этом сделав так, чтобы он выглядел аккуратно и профессионально. В других случаях короткие URL используются, чтобы общее число символов в сообщении не превышало допустимый социальными сетями максимум. Короткие ссылки нужны для того, чтобы интернетом было проще пользоваться. Знаете ли вы, что есть обратная сторона медали, и что от сокращения URL больше вреда, чем пользы? #html #css #frontend #url

Почему важно указать тип вашей HTML-кнопки. Кнопка без атрибута type действует как type="отправить" и будет пытаться отправить данные формы при нажатии. Будьте откровенны в своих намерениях и добры к будущим разработчикам, работающим с вашим кодом: укажите тип. При указании кнопки "Отправить" или "сбросить" назначение кода становится ясным и его легче поддерживать. #html #css #frontend

Время идёт, а курс по вёрстке для продвинутых: aдаптивность и автоматизация — стартует 13 декабря 🎉 Ребята, если вы планировали подтянуть вёрстку и до сих пор не дошли к этому руки, то можно это исправить прямо сейчас 🔥 Что вы получите после курса: 🥇 Научитесь вёрстать сайты под разные девайсы 🏭 Разберётесь с методологиями по вёрстке 👍 Навыки работы с препроцессорами и CSS-фреймворками 🔥 Научитесь размещать готовый сайт в интернете 🧱 Научитесь работать с шаблонизаторами 💪 Должность Trainee HTML Coder от $400-500 (до 3х месяцев), а после Junior с ЗП от $500-700 🚀 Прокачаете soft skills в групповой разработке 🧨 Готовое портфолио из 3-х персональных продакшн-проектов

Визуализаци данных с использование Recharts Визуализация в наши дни играет важную роль, и то, как вы представляете информацию, имеет значение. Чтобы сделать данные более удобоваримыми существуют диаграммы - отличный способ для организации и визуализации. Для приложений на React разработчики могут использовать Recharts - композитную библиотеку диаграмм, построенную на компонентах React с открытым исходным кодом, основанную на JavaScript. В этом руководстве мы узнаем, как использовать Recharts, создав небольшое приложение React, чтобы обобщить обширный набор данных в визуально привлекательной форме. #react #javascript #web

На следующий 2022 год в нашей IT-школе запланировано много активностей. Поэтому нам в команду нужны активные, заряженные на результат коллеги, которые хотят зарабатывать и ставят перед собой конкретные цели и сроки. 💣 Ищем к себе в команду менеджера в удалённый отдел продаж. Позиция открыта до 20 декабря ⏰ Претендуйте на вакансию или поделитесь ссылкой с друзьями или близкими, которые: 😎 работали или учились в сфере IT: им будет легче понять специфику наших продуктов; ⚡️ работали в продажах или активно изучают тему продаж, подписаны на известных блогеров. Добро пожаловать в команду 💪

Использование SWR React Hooks с инкрементной статической регенерации Next.js Если вы когда-либо использовали инкрементную статическую регенерацию (Incremental Static Regeneration, ISR) в Next.js, вы могли столкнуться с тем, что отправляете клиенту устаревшие данные. Это происходит, когда вы обновляете страницу на сервере. Для некоторых сайтов это работает, но для других пользователь ожидает, что данные будут обновляться. Первым решением, которое приходит на ум, может быть просто рендеринг страниц на стороне сервера, гарантирующий, что клиенту всегда будут отправляться самые актуальные данные. Однако получение больших фрагментов данных перед рендерингом может замедлить начальную загрузку страницы. И как же решить данную проблему? Читаем в статье. #next #react #swr #javascript

Сравнение 3 лучших библиотек для лайтбоксов на React В этом руководстве сравнивается три лучшие библиотеки для реализации React lightbox, согласно еженедельным загрузкам npm: React Photoswipe Gallery, Simple React Lightbox и React Lightgallery. Мы сравним методы установки, реализации, преимущества и ограничения этих трех галерей лайтбоксов и поможем вам понять, какую реализацию лайтбокса следует использовать для вашего React-проекта. #react #webdevelopment #web

💥 Через неделю стартует курс по вёрстке для продвинутых! Это твой шанс прокачать вёрстку и закрепить свои знания. 💪 Live-формат, включая в себя 4 недели теории/практики и 5 недель практики. По завершению обучения ты получишь 4 готовых проекта в своё портфолио! 💼

Управление состояниями в Next.js Комбинируя некоторые API React, мы можем точно управлять "простыми" состояниями. Однако с Next.js мы можем быстро столкнуться с ситуациями, когда нам нужно учесть множество других требований. Давайте посмотрим на некоторые паттерны, позволяющие добиться всего этого. #next #javascript #webdevelopment

Свойство font-display: подробный разбор Свойство CSS font-display определяет способ загрузки и отображения файлов шрифтов в браузере. Когда вы загружаете шрифт через @font-face, браузер решает что отобразить пока шрифт загружается. Он ждет некоторое время, перед тем как решить что делать дальше. Это поведение по умолчанию полезно, но отличаются от браузера к браузеру. Что делает font-display, зачем его использовать и как им управлять разберемся в этой статье. #font #webdevelopment #html

«Не закрывайте теги!» С таким провокационным обратился к своим читателям в Твиттере Таб Аткинс, главный редактор львиной доли спецификаций CSS. Конечно, речь шла не о любых тегах, а об опциональных, которые разрешает не ставить сам стандарт HTML. Но всё равно призыв Таба многих шокировал, очень уж вразрез он шел со всем, чему нас учили с самого начала веб-карьеры. Может, Таб просто всех троллил? Или же в его совете есть рациональное зерно? Попробуем разобраться. #css #html #webdevelopment

Lectrum приглашает в команду крутых экспертов-разработчиков! 💪 Если ты разработчик уровня Middle+, активный и готов делиться своим опытом с коллегами-студентами, у нас в школе открыты позиции для преподавателей и наставников (менторов)🔥 Это сотрудничество никак не помешает твоей основной занятости и принесёт win-win результат для каждой из сторон. Это всегда серьёзная прокачка софт скиллов, а не редко и тех. скиллов. До встречи в новых проектах 😉

Перестройка крупного сайта электронной коммерции с помощью Next.js Разработка при использовании Next.js очень удобная, но есть определенные сложности. Опыт разработчиков в использоовании Next.js - это то, что просто необходимо испытать. Код, который вы пишете, мгновенно визуализируется в браузере, а производительность труда возрастает до небес. На как использовать весь функционал Next.js для, скажем, платформ электронной коммерции безболезненно? Очень просто. Вот самые важные уроки, полученные при перестройке крупного сайта электронной коммерции с помощью Next.js. #next #webdevelopment

Ссылки против кнопок в современных веб-приложениях Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, разберем примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и поможем принимать лучшие решения с точки зрения UI. Вся подробная информация по ссылке. #frontend #webdevelopment #ui

13 декабря стартует курс по вёрстке для продвинутых: aдаптивность и автоматизация 🏁 Ребята, если вы планировали подтянуть вёрстку и до сих пор не дошли к этому руки, то можно это исправить прямо сейчас 🔥 Что вы получите после курса: 🥇Научитесь вёрстать сайты под разные девайсы 🏭 Разберётесь с методологиями по вёрстке 🏋 Навыки работы с препроцессорами и CSS-фреймворками 🔥 Научитесь размещать готовый сайт в интернете 🧱 Научитесь работать с шаблонизаторами 💪Должность Trainee HTML Coder от $400-500 (до 3х месяцев), а после Junior с ЗП от $500-700 🚀 Прокачаете soft skills в групповой разработке 🧨 Готовое портфолио из 3-х персональных продакшн-проектов

Полезные React API для создания гибких компонентов с помощью TypeScript React с JSX - это фантастический инструмент для создания простых в использовании компонентов. А компоненты написаные с использованием Typescript доставляют разработчикам истинное удовольствие от интеграции ваших компонентов в свои приложения и изучения ваших API. В этой статье вы узнаете о трех менее известных React API, которые могут поднять ваши компоненты на новый уровень и помочь вам создать еще лучшие React-компоненты. #reset #api #typescript