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

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

362,81

Рейтинг

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

ru_vds 14 окт 2020 в 12:15

CSS-переменные

16 мин

148K

Блог компании RUVDS.comCSS * Программирование * Веб-разработка *

Туториал

Перевод

CSS-переменные (их ещё называют «пользовательскими свойствами») поддерживаются веб-браузерами уже почти четыре года. Я пользуюсь ими там, где они могут пригодиться. Это зависит от проекта, над которым я работаю, и от конкретных задач, которые мне приходится решать. Работать с CSS-переменными просто, они способны принести разработчику немалую пользу. Правда, часто фронтенд-программисты применяют CSS-переменные неправильно или не понимают особенностей работы с ними.

Я написал эту статью для того чтобы собрать в ней всё, что я знаю о CSS-переменных. В ходе работы над ней я надеялся узнать о них что-то новое и упорядочить то, что мне уже известно. Вы найдёте в этом материале всё, что нужно знать о CSS-переменных. Здесь имеется множество практических примеров и описаний сценариев использования CSS-переменных.

Готовы? Если так — приступим.

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

+33

delphinpro 14 окт 2020 в 08:53

Отдаем корректный код 404 в связке VUE SPA + SSR

6 мин

9.3K

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

Технотекст 2020

В статье рассмотрена реализация возврата корректных статус-кодов при использовании серверного рендера в Vue.js.

host_m 14 окт 2020 в 06:30

Не лайтхаусом единым: как проверить свой сайт со всех сторон

3 мин

21K

Блог компании VDSina.ruТестирование веб-сервисов * Веб-разработка * Веб-дизайн * Веб-аналитика *

Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.

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

+31

hisbvdis 13 окт 2020 в 19:18

10 современных раскладок в одну строку CSS-кода

7 мин

36K

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

Перевод

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

+39

fillpackart 13 окт 2020 в 15:30

Мы делаем веб приложения ради экономии — но этот путь ведет нас во тьму

4 мин

18K

Блог компании VDSina.ruВеб-разработка *

Я часто встречаю, как тут ноют, что у хабра ужасная система кармы. Типа чтобы написать коммент, автор должен его одобрить, но авторы забивают на модерацию, и я лишен свободы высказаться, хотя написал содержательное и взвешенное мнение.

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

Я бы их обстоятельно поругал, но они просто следуют трендам. Где-то когда-то какой-то ооочень большой засранец взял да и сказал: «смотрите ка, если сделать сайт, и пользоваться им как приложением, получится почти то же самое!». И он был прав. Вот только это «почти» — гигантская непреодолимая пропасть.

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

+25

111

ru_vds 13 окт 2020 в 13:15

Об ответственном использовании Google Таблиц в роли баз данных

9 мин

26K

Блог компании RUVDS.comОблачные сервисы * Веб-разработка * Хранение данных *

Перевод

Хотя технологии баз данных и другие подобные инструменты существуют много лет и в наши дни чрезвычайно развиты, им всё ещё нелегко обойти самые обычные электронные таблицы в плане универсальности и интуитивной понятности. Правда, базы данных, основанные на электронных таблицах, лучше не применять в по-настоящему серьёзных проектах. Например — в приложениях, используемых для работы с данными о тех, кто заболел COVID-19. Но тот факт, что буквально все вокруг знают о том, как пользоваться электронными таблицами, означает, что таблицы отлично подходят для маленьких проектов, реализуемых в разнородных командах, когда просматривать и редактировать данные может понадобиться людям, далёким от программирования.

В этом руководстве я расскажу о том, как использовать Google Таблицы в роли базы данных. Рассмотренный мной учебный проект будет оснащён API, работать с которым можно по HTTP. Здесь мы воспользуемся Autocode — платформой для разработки Node.js-API, поддерживающей удобный редактор кода. Мы развернём простое приложение и организуем процесс прохождения аутентификации Google. Кроме того, я расскажу об ограничениях Google Таблиц, среди которых можно отметить возможности их применения в больших проектах. Я расскажу и о ситуациях, в которых тем, кто пользуется Google Таблицами, есть смысл поискать более продвинутые альтернативы.

База данных, основанная на электронной таблице

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

+28

skillfactory_school 13 окт 2020 в 12:46

Переменные CSS — курс молодого бойца

12 мин

26K

Блог компании SkillfactoryВеб-разработка * Программирование * Лайфхаки для гиковCSS *

Туториал

Перевод

Переменные CSS (также известные как настраиваемые свойства) поддерживаются браузерами почти 4 года. Мне нравится применять их в зависимости от проекта или ситуации. Они очень полезны и просты в использовании, но зачастую фронтенд разработчик неправильно использует или неправильно понимает их.

Основная цель статьи: я хочу иметь место, где собрано все, что я знаю о переменных CSS, чтобы узнать и понять больше. Здесь вы прочитаете обо всем, что должны знать о переменных CSS, включая примеры применения в коде. Вы готовы? Тогда погружаемся.

Приятного чтения!

+28

seregazhuk 13 окт 2020 в 11:10

Я сомневался в юнит-тестах, но…

6 мин

7.7K

Блог компании SkyengPHP * Отладка * Проектирование и рефакторинг * Веб-разработка *

Когда я пишу тест, то часто не уверен, что мой дизайн будет на 100% удачным. И хочу, чтобы он давал гибкость в рефакторинге кода — например, чтобы затем изменить класс, не меняя код теста.

Но если у меня стандартная пирамида, внизу которой много юнит-тестов, то не получится ли так, что тесты будут знать не про поведение системы, а про то, какие классы там есть?

+28

Katsuba 13 окт 2020 в 10:31

Возможности Angular DI, о которых почти ничего не сказано в документации

6 мин

44K

Блог компании Т-БанкВеб-разработка * JavaScript * Angular * TypeScript *

Angular — это достаточно большой фреймворк. Задокументировать и написать примеры использования для каждого кейса просто невозможно. И механизм внедрения зависимостей не исключение. В этой статье я расскажу о возможностях Angular DI, о которых вы почти ничего не найдете в официальной документации.

+31

aio350 12 окт 2020 в 08:20

Кастомные хуки. Part 1

16 мин

24K

JavaScript * ReactJS * Программирование * Веб-разработка *

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

Представляю вашему вниманию первую десятку пользовательских хуков.

Оглавление

useMemoCompare
useAsync
useRequireAuth
useRouter
useAuth
useEventListener
useWhyDidYouUpdate
useDarkMode
useMedia
useLocalStorage

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

alexzfort 11 окт 2020 в 20:10

Дайджест свежих материалов из мира фронтенда за последнюю неделю №436 (5 — 11 октября 2020)

3 мин

11K

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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

+27

snowmage 11 окт 2020 в 15:58

Laravel–Дайджест (5–11 октября 2020)

2 мин

5.2K

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

Полное руководство по аутентификации в Laravel. Новый фасад для ограничения скорости запросов. Быстрое параллельное тестирование. Стрим Тейлора: видео и текстовое резюме. Видеокурс по использованию Tailwind в Laravel.

Laravel Дайджест

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

js_n00b 11 окт 2020 в 14:16

Создание блога с помощью Nuxt Content (часть первая)

9 мин

11K

JavaScript * VueJS * Программирование * Веб-разработка *

Туториал

Перевод

Создание блога на Nuxt Content

От переводчика: Я собирался сделать собственную статью по Nuxt Content, но наткнулся на готовую статью, которая отлично раскрывает тему. Лучше у меня вряд ли получится, поэтому я решил перевести. Написал автору в твиттер и практически сразу получил согласие. Статья будет с моими дополнениями для лучшего понимания темы.

Модуль Content в Nuxt это headless CMS основанной на git файловой системе, которая предоставляет мощные функции для создания блогов, документации или просто добавления контента на обычный сайт. В этой статье мы разберем большинство преимуществ этого модуля и узнаем как создать блог с его помощью.

ru_vds 11 окт 2020 в 13:33

Использование Atomics.wait(), Atomics.notify() и Atomics.waitAsync()

8 мин

Блог компании RUVDS.comJavaScript * Веб-разработка *

Перевод

Статические методы Atomics.wait() и Atomics.notify() представляют собой низкоуровневые примитивы синхронизации, которые можно применять для реализации мьютексов и других подобных механизмов. Но, так как метод Atomics.wait() является блокирующим, его нельзя вызывать в главном потоке (если попытаться это сделать — будет выдана ошибка TypeError).

Движок V8, начиная с версии 8.7, поддерживает неблокирующий вариант Atomics.wait(), называемый Atomics.waitAsync(). Этим новым методом можно пользоваться в главном потоке.

Сегодня мы расскажем о том, как применить эти низкоуровневые API для создания мьютекса, который может работать и в синхронном режиме (в потоках воркеров) и асинхронно (в потоках воркеров или в главном потоке).

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

+34

HoroSamiK 10 окт 2020 в 05:05

Создание favicon для сайта 2020

10 мин

156K

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

Из песочницы

Что такое favicon и для чего он нужен?

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?

Десктопные браузеры
Chrome на Android
Иконка закладки в iOS (PWA)
macOS
Windows

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

+46

tin_vsl 9 окт 2020 в 16:52

RubyGems Digest 2020·09

5 мин

2.2K

Ruby * КонференцииВеб-разработка * Читальный зал

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

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

+16

IlyaNikk 9 окт 2020 в 13:07

Организация кодовой базы и тестирования в монорепозитории

10 мин

8.7K

Блог компании AvitoTechУправление разработкой * Системы управления версиями * Веб-разработка *

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

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

+14

zapolnoch 9 окт 2020 в 12:06

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

8 мин

47K

Блог компании VKВеб-разработка * JavaScript * ReactJS *

Технотекст 2020

Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions. На дворе 2020 год, а мы продолжаем обсуждать «нововведения» ES6-синтаксиса и преимущества MobX над Redux. Существует много причин использовать Redux в своем проекте, но так как я не знаю ни одной, расскажу о том, почему мы выбрали MobX.

Почему?

+71

242

aio350 9 окт 2020 в 08:39

Мониторинг Node.js-приложения

7 мин

14K

Блог компании ДомкликВеб-разработка * Node.JS *

Здравствуйте! Меня зовут Ренат Саматов, я возглавляю фронтенд-направление в линейке продуктов Витрина. Большая часть наших проектов рендерится на сервере. Сегодня мы побеседуем об одном из важнейших аспектов SSR-приложения: о мониторинге.

Даже в 2020-м мониторинг Node.js-приложения является непростой задачей. Node.js — среда выполнения JavaScript, однопоточного языка программирования с динамической типизацией. Интерпретатору и среде исполнения предоставлены широкие полномочия, что очень легко может привести к утечке памяти или высокой нагрузке на процессор. Node.js работает асинхронно (псевдопараллельно), однако если одна функция блокирует поток или очередь событий, производительность приложения начинает сильно проседать.

В этой статье я расскажу о том, как контролировать ваше Node.js-приложение и быть уверенным в том, что проблем с утечкой памяти, ресурсов процессора и блокировкой потока не возникает. Мы побеседуем об управлении производительностью приложения (Application Performance Management, APM) и метриках, на которые следует обращать внимание. Погнали!

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

+23

1 2 ...

248 249

250

251 252 ...

870 871

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

CSS-переменные

Отдаем корректный код 404 в связке VUE SPA + SSR

Не лайтхаусом единым: как проверить свой сайт со всех сторон

10 современных раскладок в одну строку CSS-кода

Мы делаем веб приложения ради экономии — но этот путь ведет нас во тьму

Об ответственном использовании Google Таблиц в роли баз данных

Переменные CSS — курс молодого бойца

Я сомневался в юнит-тестах, но…

Возможности Angular DI, о которых почти ничего не сказано в документации

Кастомные хуки. Part 1

Дайджест свежих материалов из мира фронтенда за последнюю неделю №436 (5 — 11 октября 2020)

Laravel–Дайджест (5–11 октября 2020)

Создание блога с помощью Nuxt Content (часть первая)

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

Использование Atomics.wait(), Atomics.notify() и Atomics.waitAsync()

Создание favicon для сайта 2020

Что такое favicon и для чего он нужен?

Какой формат использовать для favicon?

О каких платформах пойдет речь в этой статье?

RubyGems Digest 2020·09

Организация кодовой базы и тестирования в монорепозитории

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

Популярные npm-пакеты. Volume 1

Мониторинг Node.js-приложения