Pull to refresh
2
0

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

Send message

58 байтов CSS, которые выглядят красиво почти где угодно

Reading time2 min
Views31K

При создании своего веб-сайта я хотел найти простой и разумный способ сделать его красивым на большинстве дисплеев. Для моих задач подошли следующие 58 байтов:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Давайте их разберём.
Читать дальше →
Total votes 55: ↑46 and ↓9+37
Comments11

CSS @layer — полное руководство по каскадным слоям

Reading time26 min
Views17K

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

Читать далее
Total votes 11: ↑7 and ↓4+3
Comments3

Новые возможности ES2021 / ES12

Reading time6 min
Views46K

Ожидается, что версия ECMAScript 2021 будет выпущена в июне 2021 года. Вот некоторые из функций, которые могут оказаться в ES2021 или ES12. Список подготовлен на основе ECMAScript Proposals и новых функций, выпущенных движком Google Chrome V8.

Все функции, перечисленные ниже, на момент написания поддерживаются в сборке Google Chrome Canary (версия браузера Google Chrome, поддерживающая  экспериментальные возможности).

Читать далее
Total votes 25: ↑25 and ↓0+25
Comments70

DTO в JS

Reading time7 min
Views29K

Информационные системы предназначены для обработки данных, а DTO (Data Transfer Object) является важным концептом в современной разработке. В “классическом” понимании DTO являются простыми объектами (без логики), описывающими структуры данных, передаваемых “по проводам” между разнесенными процессами (remote processes). Зачастую данные "по проводам" передаются в виде JSON.

Если DTO используются для передачи данных между слоями приложения (база данных, бизнес-логика, представления), то, по Фаулеру, это называется LocalDTO. Некоторые разработчики (включая самого Фаулера) негативно относятся к локальным DTO. Основным отрицательным моментом локального применения DTO является необходимость маппинга данных из одной структуры в другую при их передаче от одного слоя приложения к другому.

Тем не менее, DTO являются важным классом объектов в приложениях и в этой статье я покажу JS-код, который на данный момент считаю оптимальным для DTO (в рамках стандартов ECMAScript 2015+).

Читать далее
Total votes 8: ↑5 and ↓3+2
Comments50

Как работает JavaScript [Объясняю визуально]

Reading time4 min
Views41K

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

В этой статье я подробно объясню, как JavaScript выполняет код в браузере, и мы изучим это с помощью гифок. Прочитав эту статью, вы станете на шаг ближе к статусу рок-звезды разработки.

Читать далее
Total votes 7: ↑5 and ↓2+3
Comments12

13 приёмов работы с npm, которые помогают экономить время

Reading time11 min
Views81K
Каждый день миллионы разработчиков, создавая свои JavaScript-приложения, обращаются к npm (или к Yarn). Выполнение команд наподобие npm init или npx create-react-app стало привычным способом начала работы над практически любым JavaScript-проектом. Это может быть сервер, клиент, или даже настольное приложение.

Но утилита npm способна не только на инициализацию проектов или на установку пакетов. Автор материала, перевод которого мы сегодня публикуем, хочет рассказать о 13 хитростях npm, которые позволят выжать из этой системы всё, что можно. Здесь будут рассмотрены приёмы разного масштаба — от использования сокращений команд до настройки поведения npm init.



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

Если вы совершенно не знакомы с npm — знайте, что интересующая нас программа устанавливается вместе с Node.js. Если вы работаете в Windows, то, чтобы воспроизвести кое-что из того, о чём здесь пойдёт речь, рекомендуется установить Git Bash.
Читать дальше →
Total votes 37: ↑35 and ↓2+33
Comments3

6 хороших практик по HTML и CSS

Reading time4 min
Views24K

Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.

Читать далее
Total votes 13: ↑12 and ↓1+11
Comments18

Как я познавал ci/cd, Гитхаб экшены

Reading time5 min
Views24K

Гитхаб экшены, как я познавал ci/cd

   Всем Алоха. Все слышали про ci/cd, про то что он должен быть в каждой компании и то что он упрощает нам жизнь. У всех свой ci/cd. 

   Кто-то предпочитает Jenkins. Особенно если у вас куча микросервисов, команд и процессов, то при помощи Дженкинса можно достаточно гибко настроить ci/cd в компании. Кто-то использует GitLab actions и для каждого репозитория настраивает свои пайплайны и процессы. Достаточно удобно и просто настраиваемый механизм сборки и доставки артефактов на стенды. Не чуть не хуже GitHub actions. Это было открытием для меня что в GitHub появился такой функционал, о котором мы поговорим позже. Ну и конечно всеми «любимый» скриптовый ci/cd. Пачка скриптов, которые нужно выполнить в определенной последовательности чтобы собрать и задеплоить артефакты. Есть ещё так сказать хэнд мэнуал ci/cd. Но это особый вид извращения, с которым не пожелаю столкнуться никому. В котором нужно собрать артефакты у себя на машине и по какому нить ридми выполнять команды в терминале, лазить по ssh смотреть, что все копировалось, перезапускать сервисы и другие развлечения. 

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

Read more about GitHub Actions
Total votes 12: ↑12 and ↓0+12
Comments55

Как я сделал свою сборку Gulp для быстрой, лёгкой и приятной вёрстки

Reading time32 min
Views77K

Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь.Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.

Читать далее
Total votes 22: ↑15 and ↓7+8
Comments14

Улучшение производительности vue приложения

Reading time8 min
Views18K

У нас в TeamHood есть wiki. Там собралась коллекция рекомендаций, в том числе, по улучшению производительности тяжелого фронтенда на vue.js. Улучшать производительность понадобилось, потому что в силу специфики наши основные экраны не имеют пагинации. Есть клиенты, у которых на одной kanban/gantt доске больше тысячи вот таких вот карточек, все это должно работать без лагов.

В статье разобрано несколько редко упоминаемых техник из нашей wiki, которые помогут сократить излишний рендеринг компонентов и улучшить производительность.

Читать далее
Total votes 17: ↑17 and ↓0+17
Comments5

Максимально оптимизированная веб-загрузка изображений в 2021 году

Reading time6 min
Views28K

В этой статье я расскажу про 8 методик оптимизации загрузки изображений, которые уменьшают необходимую пропускную способность сети и нагрузку на процессор при выводе на экран. Приведу примеры аннотированного HTML, чтобы вам было легче воспроизвести. Какие-то методики уже давно известны, а какие-то появились относительно недавно. В идеале, ваш любимый механизм публикации веб-документов (например, CMS, генератор статичных сайтов или фреймворк для веб-приложений) должен всё это реализовывать из коробки.
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments71

Что такое системы API Management

Reading time8 min
Views26K

Всем привет! Меня зовут Антон, я – инженер команды, отвечающей за развитие централизованных IT-сервисов, которыми пользуются продуктовые команды в X5 Retail Group.

В этой статье я расскажу о системах класса API Management и в частности о APIM Gravitee (https://www.gravitee.io), том, что это за класс систем, как они используются для обеспечения потребностей команд разработки. Статья не погружает в технические аспекты, но может быть полезна архитекторам и менеджерам, которые думают о том, чтобы попробовать использовать данный класс систем, но не знают, подойдут ли они для их задач, а также разработчикам, которые могут открыть для себя новые инструменты для удобной работы с API.

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments2

Persuasive Technology — как соцсети и мобильные приложения управляют нашими желаниями

Reading time6 min
Views5.2K

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

Сегодня почти каждая технологическая компания, занимающаяся разработкой пользовательских приложений или игр, использует persuasive technology (технологии убеждения). Именно благодаря этим технологиям вы находитесь в сети больше времени, чем следовало, и передаете больше личной информации, чем хотели бы. Мы решили разобраться, что же такое технологии убеждения, каковы их возможности, как они используются в ИТ-сфере и какие опасности таят.

Читать далее
Total votes 12: ↑9 and ↓3+6
Comments5

Чек-лист тестирования требований

Reading time7 min
Views124K

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

Вот только на что обращать внимание при тестировании? Есть набор основных характеристик, которыми должна обладать хорошая документация:

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments8

Код-ревью в Практикуме: как мы делаем его быстрее и эффективнее

Reading time6 min
Views16K
Код-ревью — полезный инструмент для командной разработки и для прокачки собственных навыков. Код-ревью помогает обнаружить недочёты в коде: как синтаксические или стилистические ошибки, так и неоптимальные или неэффективные подходы. В командной разработке, когда команда делает большой проект, код-ревью также помогает оставаться в курсе изменений в разных частях кода.

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



Меня зовут Артём Коломацкий, я старший ревьюер бэкенд-факультета в Яндекс.Практикуме. Я расскажу про практики, которые мы используем в код-ревью наших студентов. Часть из них — наши внутренние правила, а часть — универсальные советы, которые вы легко сможете применить у себя в команде.

Код-ревью в Практикуме


В Практикуме мы проводим ревью кода на собственной онлайн-платформе, которая называется «Ревизор». Туда попадают все сданные студентами работы. Платформа работает по аналогии с интерфейсами в Gitlab/Github/Bitbucket: можно просмотреть список файлов, изменения между версиями, а также оставить комментарии к определённым строкам.
Читать дальше →
Total votes 22: ↑22 and ↓0+22
Comments5

Будущее JavaScript: классы

Reading time15 min
Views8.2K


Доброго времени суток, друзья!

Сегодня я хочу поговорить с вами о трех предложениях, относящихся к JavaScript-классам, которые находятся на 3 стадии рассмотрения:


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

Вспомним, что такое классы в JavaScript.
Читать дальше →
Total votes 5: ↑2 and ↓3-1
Comments0

Основы Bash-скриптинга для непрограммистов

Reading time8 min
Views29K

Статья рассчитана на тех, кто не имеет или имеет мало опыта работы с командной строкой Unix/Linux, но желает научиться с ней эффективно взаимодействовать и разрабатывать скрипты для выполнения своих задач. Приведенные примеры справедливы для выполнения в командной оболочке bash операционной системы Ubuntu/Debian, но могут быть использованы и в других оболочках и ОС с учетом их специфики.

Читать далее
Total votes 18: ↑14 and ↓4+10
Comments8

Создание самодокументирующегося сервера на Node.JS

Reading time3 min
Views16K

В этой статье описан рецепт по настройке самодокументирующегося сервера на joi, swagger и typescript. Бонусом приведен Gulp-скрипт, который на основе Joi-объектов будет генерировать нам интерфейсы.

Читать далее
Total votes 11: ↑10 and ↓1+9
Comments10

Как дать максимально хреновую оценку задаче

Reading time4 min
Views7.8K
image

Известно, что практически каждому разработчику доводится давать оценку задач на проектах. Для кого-то это время горя, а для кого-то время радости (таких людей не существует). Рассчитывать количество трудозатрат на задачу не самый тривиальный челлендж, поэтому я решил дать несколько советов, как следует себя вести, когда к вам пришли с просьбой оценить задачу.
Читать дальше →
Total votes 11: ↑10 and ↓1+9
Comments15
1
23 ...

Information

Rating
Does not participate
Location
Россия
Registered
Activity