Все потоки

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

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

331,28

Рейтинг

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

monochromer 17 окт 2019 в 12:57

Знакомство с Sass модулями

12 мин

55K

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

Из песочницы

Привет, Хабр! Представляю вашему вниманию перевод статьи «Introducing Sass Modules» автора Miriam Suzanne.

Недавно в Sass появилась функциональность, которая вам знакома по другим языкам: модульная система. Это большой шаг вперед для @import, одной из наиболее часто используемых функций в Sass. Несмотря на то, что существующая директива @import позволяет вам подключать сторонние пакеты и разделять ваши стили на поддерживаемые элементы, у неё всё же есть несколько ограничений

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

+24

ru_vds 17 окт 2019 в 09:30

Метрики производительности для исследования невероятно быстрых веб-приложений

10 мин

14K

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

Перевод

Есть одно высказывание: «Что ты не можешь измерить, то ты не можешь улучшить». Автор статьи, перевод которой мы сегодня публикуем, работает в компании Superhuman. Он говорит, что эта компания занимается разработкой самого быстрого в мире почтового клиента. Здесь речь пойдёт о том, что такое «быстро», и о том, как создавать инструменты для измерения производительности невероятно быстрых веб-приложений.

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

+34

sanReal 17 окт 2019 в 09:16

Кибернетически улучшенные Web-приложения

8 мин

7.7K

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

Современный фронтенд шагнул далеко вперед со времен jQuery и обычных HTML страничек. У нас появились сборщики, менеджеры пакетов, компонентный подход, SPA, SSR и много еще чего.

Кажется, что у нас есть все, что нужно для счастья. Но индустрия двигается вперед. Я хочу вам рассказать о компилируемом фреймворке Svelte, и какие преимущества у него есть перед аналогами.

Автор изображения Andrew Walpole

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

+16

olegbunin 16 окт 2019 в 11:11

Почему надо создавать модули для nginx

15 мин

16K

Блог компании Конференции Олега Бунина (Онтико)Nginx * Open source * Высоконагруженные системы * Веб-разработка *

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

Вообще все в nginx — это модули, которые когда-то кем-то были написаны. Поэтому писать модули под nginx не только можно, но и нужно. Когда это необходимо делать и зачем, расскажет Василий Сошников (dedokOne) на примере нескольких кейсов.

Поговорим о причинах, которые побуждают писать модули на C, об архитектуре и ядре nginx, анатомии HTTP-модулей, о C-модулях, NJS, Lua и nginx.conf. Это важно знать не только тем, кто разрабатывает под nginx, но также тем, кто использует nginx-конфиги, Lua или другой язык внутри nginx.

Примечание: статья написана на основе доклада Василия Сошникова. Доклад постоянно модернизируется и обновляется. Информация в материале довольно техническая и, чтобы извлечь максимум пользы, читателям необходимо иметь опыт работы с кодом nginx на среднем уровне и выше.

+42

ru_vds 16 окт 2019 в 09:30

Создание собственных синтаксических конструкций для JavaScript с использованием Babel. Часть 1

7 мин

9.2K

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

Перевод

Сегодня мы публикуем первую часть перевода материала, который посвящён созданию собственных синтаксических конструкций для JavaScript с использованием Babel.

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

+40

ru_vds 15 окт 2019 в 09:30

Предварительная загрузка шрифтов

6 мин

26K

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

Перевод

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

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

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

+30

sanchik 15 окт 2019 в 08:08

Полный перевод инструкции для асессоров Google

5 мин

14K

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

Как ранжирует Google сайты, как работает его алгоритм? Этими вопросами можно долго мучиться и не находить на них ответа, в то время как давно доступна инструкция Google для асессоров. Безусловно, в ней нет алгоритмов, но есть принципы разметки сайтов в сети. Учитывая требования этой инструкции, мы можем начать делать более качественные сайты, с точки зрения поисковой системы, ну и людей, конечно.

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

+18

hisbvdis 14 окт 2019 в 09:37

Как CSS Grid меняет представление о структурировании контента

8 мин

18K

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

Перевод

Каждый, кто хотя бы немного занимался созданием веб-сайтов, знает, что теги <div> — являются важным строительным блоком для контроля над макетом.

HTML5 представил новые семантические элементы, чтобы помочь в этом. И хотя они являются фантастическим дополнением к языку, они немного похожи на украшение к нашему супу из <div> элементов.

С приходом CSS Grid, нам больше не нужно полагаться на элементы <div> для создания структуры страницы или даже более сложного компонента. Структура буквально определяется родительским элементом, а не тем, как расположено содержимое внутри него.

Это значит, что мы можем получить хороший простой макет, который структурирует содержимое, не обращая внимание на то, как оно изначально организовано с помощью элементов <div>.

+20

olegbunin 14 окт 2019 в 09:36

Высокая производительность и нативное партиционирование: Zabbix с поддержкой TimescaleDB

11 мин

29K

Блог компании Конференции Олега Бунина (Онтико)Базы данных * Высоконагруженные системы * Веб-разработка * Хранение данных *

Zabbix — это система мониторинга. Как и любая другая система, она сталкивается с тремя основными проблемами всех систем мониторинга: сбор и обработка данных, хранение истории, ее очистка.

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

Проблемы задержек при сборе и хранении в Zabbix решаются кэшированием: несколько видов кэшей, кэширование в БД. Для решения третьей проблемы кэширование не подходит, поэтому в Zabbix применили TimescaleDB. Об этом расскажет Андрей Гущин — инженер технической поддержки Zabbix SIA. В поддержке Zabbix Андрей больше 6 лет и напрямую сталкивается с производительностью.

Как работает TimescaleDB, какую производительность может дать по сравнению с обычным PostgreSQL? Какую роль играет Zabbix для БД TimescaleDB? Как запустить с нуля и как мигрировать с PostgreSQL и производительность какой конфигурации лучше? Обо всем этом под катом.

+24

ru_vds 14 окт 2019 в 09:30

[в закладки] PDF- и ePUB-версия руководства по React

3 мин

53K

Блог компании RUVDS.comВеб-разработка * Профессиональная литература * ReactJS * JavaScript *

Привет Хабр! В этом году мы делали перевод огрооомного обучающего курса по React — в нашем блоге он был аж в 27 постах. В каждой части, от простого к сложному, выдавался концентрат знаний, которые тепло оценили читатели нашего блога. А сегодня мы поймали себя на мысли, что не выпустили все части одним большим куском — исправляемся!

Для новых читателей нашего блога — два бонуса внутри.

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

+52

1cloud 14 окт 2019 в 07:10

Суд ЕС выступил против cookies по умолчанию — предустановленных галочек быть не должно

3 мин

5.8K

Блог компании 1cloud.ruХранение данных * Управление медиа * Веб-разработка * Законодательство в IT

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

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

+11

Tiendil 14 окт 2019 в 06:37

Генерация текста на русском по шаблонам

8 мин

20K

Natural Language Processing * Open source * Python * Веб-разработка * Разработка игр *

Когда я только начинал работать над своей текстовой игрой, решил, что одной из её главных фич должны стать красивые художественные описания действий героев. Отчасти хотел «сэкономить», поскольку в графику не умел. Экономии не получилось, зато получилась Python библиотека (github, pypi) для генерации текстов с учётом зависимости слов и их грамматических особенностей.

Например, из шаблона:

[Hero] [проходил|hero] мимо неприметного двора и вдруг [заметил|hero] играющих детей. Они бегали с деревянными мечами, посохами и масками чудовищ. Внезапно один из играющих остановился, выставил [игрушечный|hero.weapon|вн] [hero.weapon|вн], выкрикнул: «[Я|hero] [великий|hero] [Hero]! Получай!» — и бросился на «бестий». Они упали наземь, задрыгали руками-ногами, а после встали, сняли маски и засмеялись. [Хмыкнул|hero] и [сам|hero] [Hero], но не [стал|hero] выходить к малышне.

Мы можем получить такой текст (жирным выделены изменяющиеся слова):

Халлр проходил мимо неприметного двора и вдруг заметил играющих детей. Они бегали с деревянными мечами, посохами и масками чудовищ. Внезапно один из играющих остановился, выставил игрушечную золочёную шпагу, выкрикнул: «Я великий Халлр! Получай!» — и бросился на «бестий». Они упали наземь, задрыгали руками-ногами, а после встали, сняли маски и засмеялись. Хмыкнул и сам Халлр, но не стал выходить к малышне.

Или такой:

Фиевара проходила мимо неприметного двора и вдруг заметила играющих детей. Они бегали с деревянными мечами, посохами и масками чудовищ. Внезапно один из играющих остановился, выставил игрушечный катар, выкрикнул: «Я великая Фиевара! Получай!» — и бросился на «бестий». Они упали наземь, задрыгали руками-ногами, а после встали, сняли маски и засмеялись. Хмыкнула и сама Фиевара, но не стала выходить к малышне.

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

+12

RokeAlvo 13 окт 2019 в 21:15

Full-stack TypeScript Apps

14 мин

21K

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

Туториал

Из песочницы

Привет, Хабр! Представляю вашему вниманию перевод статьи "Full-Stack TypeScript Apps — Part 1: Developing Backend APIs with Nest.js" автора Ana Ribeiro.

Часть 1: Разработка серверного API с помощью Nest.JS

TL;DR: это серия статей о том, как создать веб-приложение TypeScript с использованием Angular и Nest.JS. В первой части мы напишем простой серверный API с помощью Nest.JS. Вторая часть этой серии посвящена интерфейсному приложению с использованием Angular. Вы можете найти окончательный код, разработанный в этой статье в этом репозитории GitHub

Что такое Nest.Js и почему именно Angular?

Nest.js это фреймворк для создания серверных веб-приложений Node.js.

Отличительной особенностью является то, что он решает проблему, которую не решает ни один другой фреймоворк: структура проекта node.js.

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

+7

alexzfort 13 окт 2019 в 20:58

Дайджест свежих материалов из мира фронтенда за последнюю неделю №384 (7 — 13 октября 2019)

4 мин

13K

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

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

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

+30

1cloud 12 окт 2019 в 10:36

Разобраться в политиках конфиденциальности приложений и сервисов — помогут нейросети

4 мин

2.4K

Блог компании 1cloud.ruUsability * Законодательство в ITВеб-разработка * Разработка мобильных приложений *

Политики конфиденциальности сайтов и приложений, в которых описаны условия обработки персональных данных пользователей, обычно пишут юристы и… для юристов. Простому смертному понять суть может быть сложно. Решением проблемы занялся резидент Hacker News — он разработал алгоритм машинного обучения, который помогает с чтением privacy policy.

Рассказываем о нем и других проектах для «переваривания» политик конфиденциальности.

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

+15

mxmvshnvsk 12 окт 2019 в 09:37

10 советов и приемов, которые помогут вам стать лучшим разработчиком на VueJS

4 мин

23K

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

Перевод

Перед вами вольный перевод статьи "10 Tips & Tricks to make you a better VueJS Developer" с сайта Dev.to. Автор расскажет нам об интересных и полезных вариантах применения привычных нам средств VueJS.

Введение

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

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

+22

Nickmob 11 окт 2019 в 10:34

[Не] используйте CDN

10 мин

25K

Сетевые технологии * Серверная оптимизация * Веб-разработка * Облачные сервисы * Клиентская оптимизация *

Практически в любой статье или инструменте для оптимизации скорости сайтов есть скромный пункт «используйте CDN». Вообще, CDN – это content delivery network или сеть доставки контента. Мы в компании «Метод Лаб» часто встречаемся с вопросами клиентов по этой теме, некоторые самостоятельно включают себе CDN. Цель этой статьи разобраться, что может дать CDN с точки зрения скорости загрузки сайта, какие проблемы могут возникать и в каких случаях использование CDN оправдано.

Обведённые на картинке задержки вызваны использованием CDN.

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

+22

ru_vds 11 окт 2019 в 09:00

Время до первого байта: что это такое и почему это важно

7 мин

40K

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

Перевод

Сейчас я работаю над проектом для одного клиента. Речь идёт о сайте из сферы электронной коммерции, поэтому меня очень сильно интересуют некоторые аспекты производительности. Для начала это — различные показатели, характеризующие время загрузки сайта. Дальше — это время начала рендеринга страницы, которое важно для тех посетителей, которые хотят, после захода на сайт, увидеть его содержимое как можно быстрее (в эту категорию, естественно, попадают все посетители сайта). Есть среди интересующих меня показателей производительности и такие, которые отражают специфику деятельности моего клиента. Например: «Насколько быстро загружается основное изображение товара?». Анализ всех этих показателей способен дать ценные сведения о состоянии проекта.

Однако есть один показатель, которому, как кажется, фронтенд-разработчики часто не уделяют должного внимания. Речь идёт о времени до первого байта (Time to First Byte, TTFB). Это можно понять, можно и хотя бы отчасти простить разработчикам такое отношение к TTFB, особенно учитывая то, что они видят этот показатель как нечто, зависящее только от бэкенда проектов. Но если попытаться буквально в двух словах выразить проблему, касающуюся этого показателя, то можно сказать следующее: «Хотя хорошее значение TTFB не обязательно означает того, что демонстрирующий его сайт можно счесть быстрым, плохой показатель TTFB практически гарантированно указывает на проблемы с производительностью проекта».

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

+34

GlobalSign_admin 11 окт 2019 в 07:37

Chrome полностью заблокирует смешанный контент

3 мин

21K

Блог компании GlobalSignВеб-разработка * Информационная безопасность * БраузерыGoogle Chrome

Загрузка картинок с незащищённых сайтов тоже будет блокироваться

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

Смешанный контент (mixed content) — это незащищённые элементы, передаваемые по HTTP-протоколу через страницы с SSL-сертификатом. Например, изображения, аудио и видео со сторонних (незащищённых) доменов. От такой практики придётся отказаться совсем.

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

+17

pavelgvozdb 10 окт 2019 в 20:11

Sass MediaScreen — Определяем девайсы на CSS

3 мин

9.8K

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

Из песочницы

Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.

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

+16

1 2 ...

311

312 313 ...