Веб-разработка *

Делаем веб лучше

СтатьиПостыНовостиАвторыКомпании

arudenko12 1 авг 2023 в 07:26

Как вырасти из джуна в мидлы во фронтенде

Простой

8 мин

13K

Блог компании Яндекс ПрактикумВеб-разработка * Учебный процесс в ITКарьера в IT-индустрии

Роадмэп

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

Меня зовут Лёша Руденко, во фронтенде уже более семи лет, сейчас работаю в финтехе. А ещё я ментор на курсе «Мидл фронтенд-разработчик» в Яндекс Практикуме. Как наставник я помогаю студентам совершить карьерный переход из джуниор-разработчика в мидлы. Точнее так: моя задача в том, чтобы начинающий разработчик не утонул в огромном количестве советов, рекомендаций, статей и видео и сам пришёл к заветной цели.

В этой статье поделюсь тем, что я понимаю под «мидл фронтенд-разработчиком», и покажу путь развития в профессии.

Дорогу осилит идущий

dcct0r 1 авг 2023 в 06:11

Шпаргалка по структурам данных в Java

Простой

5 мин

32K

Веб-разработка * Java * Разработка мобильных приложений *

Из песочницы

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

jabuj 31 июл 2023 в 14:01

Разбираем HTTP/2 по байтам

Средний

24 мин

57K

Блог компании Timeweb CloudВеб-разработка * Сетевые технологии *

Обзор

Откройте любую статью с обзором HTTP/1.1. Скорее всего, там найдётся хотя бы один пример запроса и ответа, допустим, такие:

GET / HTTP/1.1
Host: localhost

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Content-Length: 38
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<h1>Привет!</h1>

Теперь откройте статью с обзором HTTP/2 или HTTP/3. Вы узнаете о мультиплексировании запросов, о сжатии заголовков, о поддержке push-технологий, но вряд ли увидите хоть одно конкретное сообщение. Ясно, почему так: HTTP/1.1 — текстовый протокол, тогда как сиквелы к нему бинарные. Это очевидное изменение открывает дорогу ко множеству оптимизаций, но упраздняет возможность просто и доступно записать сообщения.

Поэтому в этой статье предлагаю покопаться в кишках у HTTP/2: разобрать алгоритмы установки соединения, формат кадров, примеры взаимодействия клиента с сервером.

Читать дальше →

+111

Dragonek 31 июл 2023 в 09:11

Как автоматизировать переводы во Frontend приложении

Средний

4 мин

10K

Веб-разработка * JavaScript * Программирование * Node.JS * Локализация продуктов *

Туториал

В текущем мире очень многие сайты имеют поддержку многих языков, в большинстве случаев это происходит с помощью i18n npm пакета. Чаще всего переводы хранятся в .js, .json файлах и очень часто есть языки для которых в компании нет переводчика, либо же он не предполагался в целом, и в таком случае приходит на помощь разработчик с переводчиком. И вот однажды я столкнулся с тем, что на проекте оказалось очень много текстов и все их нужно было переводить вручную, что занимало достаточно много времени и я задумался о том, как это можно автоматизировать.

Моя идея была в том, чтобы написать функцию, в которую можно было бы передать языковой код и json объект с текстом на исходном языке, а на выходе получить переведенный json/js file. С помощью этой функции я мог бы в ci/cd Pipeline переводить все текста на проекте, в исходных текстах которых были изменения, либо же следить за текстами в рантайме и на лету переводить текста.

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

danila_egorenko 31 июл 2023 в 07:36

Внедрение зависимостей в Angular простыми словами

Простой

3 мин

10K

JavaScript * Angular * TypeScript * Веб-разработка *

Туториал

Из песочницы

Всем привет? Я Данила, фронтенд разработчик в ПСБ. Angular я начал изучать не так давно, а поэтому часто встречаются сложные темы, которые непонятны и их нужно разобрать. Одной из таких тем и стало внедрение зависимостей (DI). Что ж, давайте разбираться :)

jQwery 31 июл 2023 в 06:50

Делай так, и твой адаптив болеть не будет

Средний

26 мин

8.3K

Блог компании Мир Plat.Form (НСПК)Angular * HTML * JavaScript * Веб-разработка *

Туториал

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

Даже до первого клика по кнопке, до первого скролла или любого другого действия на странице пользователь увидит обложку, дизайн этой страницы. Если говорить об экране компьютера или ноутбука, то сделать что-то не так со страницей сложно: нет никаких ограничений, пространства на странице очень много, чтобы сделать и красиво, и удобно. Однако думать только о пользователях, предпочитающих десктопные решения во всех их проявлениях — значит лишать себя большей части аудитории.

antonmak1 30 июл 2023 в 10:31

Чем отличается реализация non-keyed от keyed в javascript фреймворках?

Средний

2 мин

2.4K

Open source * HTML * JavaScript * Веб-разработка * Веб-дизайн *

Обзор

Часто, при разработке сайтов на фреймворках, не придаётся особого внимания деталям, которые в данный фреймворк включены. И это нормально, ведь главная задача фреймворка - чтобы удобно было сайт делать и чтобы он был быстрым и функциональным. Но, эти детали тем и интересны, что узнав некоторые моменты, взгляд на javascript разработку чуть дополняется.

GonnaMakeItBrah 30 июл 2023 в 09:01

Холодная и горячая последовательность RxJS

Средний

5 мин

2.6K

TypeScript * VueJS * Веб-разработка *

Туториал

Доброго времени суток, дорогие читатели!
В данной статье я буду рассказывать про холодную и горячую последовательность на примере такой задачи:
Пользователь заходит на сайт и начинается внутренняя прослушка (какой либо запрос на сервер с получением данных, в нашем же случае будет обычный sleepAsync - функция с таймаутом и остается только его подхватить и обработать). Режимов прослушки два - оптимизированный (будем называть горячим) и константный (будем называть холодным). При условии активности пользователя на вкладке, включаем оптимизированный метод, если же пользователь покинул вкладку, включаем константный. Также нужно показывать количество времени, которое занимала прослушка.

Просвятиться

aio350 27 июл 2023 в 06:22

Как работает Zustand

Сложный

8 мин

43K

JavaScript * ReactJS * Веб-разработка *

Обзор

Hello world!

Zustand (читается как "цуштанд", что переводится с немецкого как "состояние") — это, на мой взгляд, один из лучших на сегодняшний день инструментов для управления состоянием приложений, написанных на React.

В этой статье я немного расскажу о том, как он работает.

Давайте начнем с примера использования zustand для реализации функционала отображения/скрытия модального окна.

Читать дальше →

Nurked 26 июл 2023 в 13:55

Прекратите превращать программирование в религию (восклицательный знак)

Простой

8 мин

51K

Веб-разработка * Программирование * Анализ и проектирование систем * Управление проектами * Карьера в IT-индустрии

Мнение

Как вы меня задолбали, священники, святые отцы и монахи с кадилами. Сколько можно это терпеть? Я учился в университете, чтобы получить диплом по специальности, но вместо этого я получил пропуск в какую-то конспирологическую теоретическую секту.

Не верите?

Давайте я покажу вам.

+170

302

varanio 25 июл 2023 в 05:23

Я бы пересмотрел вообще всё

4 мин

78K

Программирование * Веб-разработка * Управление персоналом * Управление проектами *

В программировании нет вообще никаких непреложных истин. Даже самые очевидные правила могут иметь контекст, в которых их применять нельзя. К сожалению в 99% организаций есть прям заповеди, обязательные к исполнению. И есть правила, которые считаются правилами хорошего тона (как не сморкаться в занавеску). Однако всегда бывают ситуации, когда лучше все-таки сморкаться.

Вот примеры.

1) Например, DRY — don’t repeat yourself. Хорошее полезное правило, но его можно довести до маразма. Из того что я встречал на практике: есть два разных по бизнес-смыслу раздела, которые начинались с простого CRUD, и многие части (и фронта и бека) выглядели во многом абсолютно одинаково. Если их объединить с помощью общей высосанной из пальца абстракции и тем самым избавиться от небольшого дублирования кода, то потом (очень скоро) можно будет сойти с ума, потому что эти две вещи скоро разъедутся, обрастая кастомными фичами, и абстракция будет только вредить. Нельзя абстрагировать неабстрагуемое, даже если DRY нарушен.

«[Немного] дублирования обходится гораздо дешевле, чем неправильная абстракция» — Сэнди Мец

Т.е. DRY — хороший принцип, но бывают исключения.

Читать дальше →

+178

346

sergeytolkachyov 24 июл 2023 в 07:40

Web Services в Joomla 4

Простой

11 мин

2.9K

CMS * Веб-разработка * PHP * Проектирование API * Joomla *

Туториал

Перевод

Этот текст - перевод статьи из нового портала документации для разработчиков Joomla, раздел "Основные концепции". Ранее уже был опубликован перевод раздела, описывающего принципы Dependency Injection Containers в Joomla 4.

В тексте даны примеры PHP-кода по работе с Joomla 4 REST API. Примеры даны как с использованием API Joomla (HttpFactory), так и для non-Joomla сайтов - на чистом cURL.

aio350 24 июл 2023 в 05:56

Как React 18 улучшает производительность приложения

Средний

11 мин

15K

Веб-разработка * ReactJS * Node.JS * JavaScript *

Обзор

Перевод

React 18 представил конкурентные (concurrent) возможности, которые радикально меняют способ рендеринга приложений. В этой статье мы рассмотрим, как эти возможности улучшают производительность приложения.

Начнем с повторения основ "долгих (долго выполняющихся) задач" (long tasks) и соответствующих метрик производительности.

Читать дальше →

youROCK 23 июл 2023 в 20:25

Поиск по произвольным параметрам

Средний

5 мин

4.6K

Высоконагруженные системы * Веб-разработка * MySQL * PostgreSQL * SQLite *

Туториал

Иногда (часто) во время разработки веб-сайта возникает необходимость реализовать поиск с фильтрацией, и отсортировать результаты по какому-то фиксированному полю: например, поиск товаров в интернет-магазине, поиск туров в турагентстве, показ логов с фильтрацией по содержимому, и т.д. Очень часто бывает так, что фильтрация должна осуществляться чуть ли не по любому полю (а полей десятки), а записей тысячи или даже миллионы. Если данных много, или же нужно их часто обновлять, то индекс на каждое поле не создать, ибо много места будут занимать, или же будут создавать слишком большую нагрузку на диск при записи, и приходится что-то придумывать. Давайте что-нибудь придумаем.

Давайте

-3

MarieSuperhero1 21 июл 2023 в 07:47

Пятеро в танке: зачем фронтендерам в 2023 году делать игру из 90-х

13 мин

10K

Блог компании Яндекс ПрактикумВеб-разработка * Учебный процесс в ITРазработка игр * Программирование *

5 незнакомых людей за три месяца запилили ремейк культовой игры 90-х «Танчики». В этой статье они расскажут:

— Как построить командную работу, чтобы всё успеть и не поубивать друг друга?

— Как создать движок игры, который потянул бы даже старый iPhone?

— Как втащить в проект самописный Server Side Rendering так, чтобы игра и окружающее его React-приложение не сыпали ошибками?

— Как сделать браузерную игру, работающую даже без интернета?

Эти и другие проблемы парни решили в рамках курса «Мидл фронтенд-разработчик» в Яндекс Практикуме. Подготовка состояла из двух модулей по три месяца: сначала был индивидуальный трек, а затем — командный, в рамках которого надо было впятером разработать совместный проект.

Как им удалось это сделать

+12

jackycoins 21 июл 2023 в 02:59

5 интеграций в React: Контент + Дизайн + Разработка

Средний

18 мин

7.4K

Веб-разработка * JavaScript * Интерфейсы * ReactJS * Софт

Обзор

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

В статье я продемонстрирую, как решить три задачи, связанные с интеграциями в React приложении:

1. Изменять контент страницы на React без необходимости привлечения разработчика;

2. Расширять функционал React приложения с помощью сторонних сервисов;

3. Создавать страницы с минимальными затратами на разработку.

kostya_kisleyko 20 июл 2023 в 11:10

Как сделать редизайн сервиса: рассказываем на примере средневекового замка

4 мин

3.5K

Блог компании AGIMAГрафический дизайн * ДизайнВеб-дизайн * Веб-разработка *

Туториал

Привет, меня зовут Костя Кислейко. Я отвечаю за дизайн в AGIMA. Клиенты часто приходят к нам за редизайном своих сервисов. И довольно часто, когда мы объясняем заказчикам, чем отличаются разные подходы и методологии, я использую метафору строительства. Кажется, это хорошее и понятное сравнение, и я решил его записать. Надеюсь, кому-то это поможет понять все риски и возможности при использовании разных подходов к редизайну.

+14

varanio 20 июл 2023 в 06:20

Неразрешимые проблемы разработки

3 мин

11K

Управление продуктом * Управление персоналом * Веб-разработка * Программирование * Управление проектами *

Сроки

В разработке ПО существует неразрешимое противоречие — это оценка сроков.

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

С другой стороны, разработка порою ~~в душе не е...~~ вообще не знает, сколько надо времени, особенно если

новая функциональность нетипична
есть зависимости на другие команды
будет задействована новая технология
ТЗ надо сильно уточнять
надо разобраться в логике легаси-кода

Часто, для того, чтобы точно оценить сроки, нужно, собственно, сделать половину работы. Чем точнее надо оценить сроки, тем больше надо на это затратить времени, что приводит к суммарному увеличению time-to-market, причем все равно без гарантий.

Читать дальше →

+44

128

ira-k 19 июл 2023 в 13:04

Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

Средний

14 мин

19K

Блог компании Яндекс ПрактикумCSS * HTML * Учебный процесс в ITВеб-разработка *

Туториал

Зачем использовать в вёрстке компонентный подход? Разбираемся, как и зачем верстать интерфейсы, используя этот подход, какие параметры и проблемы важно учесть. Разберём азы, забежим вперёд и подробно погрузимся в тему. Кстати, эта статья написана на основе одного из уроков курса «Профессиональная вёрстка на HTML и CSS» Яндекс Практикума.

19 июл 2023 в 10:33

Онбординг пользователей, революция у аналитиков, веб-доступность: как сотрудники МТС Банка идеи до прода довели

Простой

15 мин

19K

Блог компании МТС ФинтехВеб-разработка * Анализ и проектирование систем * ДизайнУправление персоналом * Управление проектами *

Очень часто крутые идеи рождаются не у продактов или руководителей, а у линейных сотрудников. Среди разработчиков нередко встречаются интроверты, особенно когда речь идет о новых участниках команд — именно они вынашивают свежие идеи, но не высказывают их. И если эти идеи развивать, то, например, простая задача с уровня «А давайте-ка зашьем на бэк несколько экранов для онбординга пользователей» переедет на гораздо более системный «Давайте сразу запилим полноценную платформу».

Многим ребятам в IT хочется быть не абстрактным «юнитом» из какой-нибудь пошаговой стратегии с набором характеристик и конкретной «функцией», а проявлять творческий потенциал, реализовывать свои идеи. И для компании важно это учитывать. Поддерживая подобные инициативы, помогая им доходить до продажи, компания может не только получать огромный прирост к business value, но и снизить текучку кадров, потому что специалисты будут чувствовать себя оценёнными по достоинству.

Под катом — три истории от наших сотрудников: они не постеснялись высказать свои идеи и запустили крутые проекты, которые уже принесли нашим клиентам огромную пользу.

+17

1 2 ...

115 116

117

118 119 ...

833 834

Веб-разработка *

Как вырасти из джуна в мидлы во фронтенде

Шпаргалка по структурам данных в Java

Разбираем HTTP/2 по байтам

Как автоматизировать переводы во Frontend приложении

Внедрение зависимостей в Angular простыми словами

Делай так, и твой адаптив болеть не будет

Чем отличается реализация non-keyed от keyed в javascript фреймворках?

Холодная и горячая последовательность RxJS

Как работает Zustand

Прекратите превращать программирование в религию (восклицательный знак)

Я бы пересмотрел вообще всё

Web Services в Joomla 4

Как React 18 улучшает производительность приложения

Ближайшие события

Поиск по произвольным параметрам

Пятеро в танке: зачем фронтендерам в 2023 году делать игру из 90-х

5 интеграций в React: Контент + Дизайн + Разработка

Как сделать редизайн сервиса: рассказываем на примере средневекового замка

Неразрешимые проблемы разработки

Сроки

Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

Онбординг пользователей, революция у аналитиков, веб-доступность: как сотрудники МТС Банка идеи до прода довели

Вклад авторов