Как стать автором
Обновить
344.21

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

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

Сначала показывать
Порог рейтинга
Уровень сложности

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

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров7.7K

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

Статья подготовлена по материалам внутреннего митапа по информационной безопасности.

Читать далее
Всего голосов 19: ↑18 и ↓1+19
Комментарии7

Как веб-технологии помогают искать золото

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров1.9K

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

Читать далее
Всего голосов 11: ↑10 и ↓1+15
Комментарии5

PHP/FI 1. Personal Home Page Tools/Forms Interpreter

Уровень сложностиСредний
Время на прочтение17 мин
Количество просмотров3.5K

История зарождения PHP

История PHP начинается не с полноценного языка программирования, а с набора CGI-скриптов на C, известного как PHP/FI 1. В этой статье мы возвращаемся к истокам PHP, рассматривая его первую версию, её компиляцию и функциональность.

Читать далее
Всего голосов 20: ↑20 и ↓0+22
Комментарии8

Используем паттерн Decorator в Bitrix

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.1K

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

В статье я покажу на примере, как можно использовать паттерн Decorator.

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

Читать далее!
Всего голосов 6: ↑5 и ↓1+7
Комментарии0

Истории

Как Uber обслуживает более 40 миллионов чтений в секунду из онлайн-хранилища с помощью встроенного кэша

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров7.3K

Привет, Хабр! Представляю вам перевод статьи "How Uber Serves Over 40 Million Reads Per Second from Online Storage Using an Integrated Cache" автора Preetham Narayanareddy. Из неё вы узнаете, как в Uber проектировалась система кэширования на основе Redis, с какими сложностями и тонкостями пришлось столкнуться разработчикам, и как в итоге им удалось создать действительно высокопроизводительное решение.

Читать далее
Всего голосов 6: ↑5 и ↓1+8
Комментарии6

Рендерим таблицы с помощью Symbiote.js

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров1.7K

В этой статье, я хочу показать базовые приемы работы с HTML-таблицами при использовании библиотеки Symbiote.js и раскрыть на практике некоторые ее важные особенности.

Читать далее
Всего голосов 4: ↑3 и ↓1+4
Комментарии6

И снова о useCallback

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров6.4K

Привет, Хабр! Так вышло, что на текущем я попал под сокращение, а значит путь к собеседованиям открыт. Как раз вчера случилось одно (видимо, из многих), на котором зашла речь про useCallback.

Читать далее
Всего голосов 23: ↑20 и ↓3+21
Комментарии26

Как выбрать быстрый виртуальный сервер

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров4.6K

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

Для одного небольшого проекта нам понадобилось выбрать быстрый VPS, в статье расскажем, как мы его искали.

Читать далее
Всего голосов 10: ↑4 и ↓60
Комментарии7

Мега-Учебник Flask Глава 6: Страница профиля и аватары (издание 2024)

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров1.7K

Это шестая часть серии мега-учебника Flask, в которой я собираюсь рассказать вам, как создать страницу профиля пользователя.

Начать изучение
Всего голосов 4: ↑3 и ↓1+6
Комментарии0

Каково это — работать с Netscape Composer в 2024 году

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров5.2K

Как гик из начала 1990-х, который увлекался компьютерами с юных лет, я с почтением вспоминаю технологии конца того десятилетия и начала 2000-х.

Поэтому, когда в мои руки пару месяцев назад попал старый компьютер, я, недолго думая, установил на него Windows 98, чтобы поиграться с программами из моего детства. Среди интересовавших меня жемчужин был Netscape Communicator. Это программный пакет 1997 года, включавший Netscape Navigator — первый браузер, с которым мне довелось работать. В пакет также входил WYSIWYG-редактор Netscape Composer.

Через Netscape Composer я впервые познакомился с веб-разработкой. Ещё подростком я создавал с его помощью свои первые веб-страницы. В онлайн те страницы так и не попали, но я гордо таскал их с собой на дискете, показывая родственникам и друзьям на их компьютерах. Создавая эти страницы, я уяснил, что сайты состоят из простых файлов. Используя Netscape Composer, я также освоил основные веб-термины вроде «страница» и «гиперссылка».

Естественно, веб-ландшафт с тех пор сильно развился, и мне было любопытно снова попробовать это старое ПО, чтобы оценить его ограничения и посмотреть, как будет выглядеть генерируемый им код сегодня, в 2024 году. Первым делом мне нужна была цель. Я решил попробовать воссоздать домашнюю страницу своего личного сайта настолько точно, насколько позволит приложение. Такая цель выглядела разумной, поскольку у моего сайта довольно минималистичный дизайн и очень мало моментов, которые никак не реализуешь с помощью устаревшего инструмента.
Читать дальше →
Всего голосов 33: ↑32 и ↓1+53
Комментарии8

Как мы применяем гибкую вёрстку для адаптива страниц под большие экраны

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5.7K

Привет! Меня зовут Оля и я расскажу о том, как мы при помощи гибкой вёрстки настроили отображение контента на широких экранах. 

Эта статья будет полезна разработчикам веб-сайтов и послужит примером использования CSS при разработке адаптивности сайта для экранов свыше 1921 пикселей.

Читать далее
Всего голосов 8: ↑8 и ↓0+9
Комментарии4

Применение ключевого слова revert-layer в CSS

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров3.7K

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

Читать дальше →
Всего голосов 14: ↑14 и ↓0+16
Комментарии2

Доводы против самозакрывающихся тегов в HTML

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров3.9K

Самозакрывающиеся теги - зло? Prettier не прав? Разбор с примерами острой темы в HTML, где все будет разложено по полочкам

Читать далее
Всего голосов 10: ↑7 и ↓3+7
Комментарии18

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

Путь к потрясающему CSS Easing с помощью новой функции linear()

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров4.5K

С появлением на горизонте новой CSS функции linear() возможности создания естественных анимаций и переходов в будущем значительно расширяются. В этой статье Джейхи Томпкинс рассматривает текущее состояние CSS easing и демонстрирует, чего можно ожидать от linear(), включая удобные инструменты для работы с ней уже сегодня.

Читать далее
Всего голосов 9: ↑9 и ↓0+11
Комментарии0

Frontend внутри Bitrix. Использование и написание расширений + SPA приложение на Vue или React

Уровень сложностиСложный
Время на прочтение9 мин
Количество просмотров2.7K

В данной статье мы рассмотрим правильный подход к Frontend разработки в Bitrix. А именно разделение на расширения которые сможем подключать в любой момент времени. + напишем SPA приложение на React.

Читать далее
Всего голосов 11: ↑10 и ↓1+12
Комментарии5

Сложнейшая проблема компьютерных наук: центрирование

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров28K

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:

display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого.

Ещё можно использовать сетку:

display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Также не спрашивайте, почему выражение justify-content стало justify-items.
Читать дальше →
Всего голосов 191: ↑186 и ↓5+224
Комментарии56

Разбираем 5 способов ускорить сайт: от простого к сложному

Время на прочтение7 мин
Количество просмотров4K

Низкая скорость загрузки — это критично. По данным исследования Unbounce, долгое ожидание негативно влияет на пользователей: 45,4% из них с меньшей вероятностью совершат целевое действие, а 11,9% — вообще покинут сайт. Давайте обсудим несколько способов, которые помогут ускорить сайт быстро и без особых усилий. 

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

Читать далее
Всего голосов 6: ↑6 и ↓0+7
Комментарии10

Как Figma удалось открыть себе путь к почти бесконечному масштабированию баз данных

Уровень сложностиСредний
Время на прочтение17 мин
Количество просмотров10K

О нашем девятимесячном пути к горизонтальному шардингу Postgres-стека Figma и о возможности обеспечения (почти) бесконечной масштабируемости.

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

С 2020 года стек баз данных Figma вырос почти в сотню раз. Это хорошая проблема, ведь она означает, что наш бизнес расширяется. Но в то же время она стала причиной технических сложностей. В течение последних четырёх лет мы усиленно старались не отставать от прогресса и избегать потенциальных проблем, связанных с ростом. В 2020 году у нас работала единственная база данных Postgres, которая хостилась на самом большом физическом инстансе AWS, но к концу 2022 года мы уже создали распределённую архитектуру с кэшированием, репликами для чтения и десятком вертикально разделённых баз данных. Мы разбили группы связанных таблиц (например, «Figma files» или «Organizations») на отдельные вертикальные разделы, что позволило нам обеспечить удобство инкрементального масштабирования и оставить достаточно пространства для дальнейшего роста.

Читать далее
Всего голосов 13: ↑12 и ↓1+22
Комментарии1

Избавляемся от паролей

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров17K

Меня зовут Александр Чикайло, я разрабатываю межсетевой экран уровня веб-приложений PT Application Firewall в Positive Technologies и специализируюсь на защите веба. Сегодня речь пойдет о беспарольной аутентификации и ее безопасном применении в приложениях. В этом материале я освещу систему passwordless-аутентификации, уже работающую «из коробки», например, в Windows 11 и Chrome.

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

Читать далее
Всего голосов 16: ↑14 и ↓2+14
Комментарии23

Оптимизация JavaScript. Inline Caches

Время на прочтение13 мин
Количество просмотров4.2K

Думаю, ни для кого не секрет, что все популярные JavaScript движки имеют схожий пайплайн выполнения кода. Выглядит он примерно следующим образом. Интерпретатор быстро компилирует JS-код в байт "на лету". Полученный байт код начинает исполняться и параллельно обрабатывается оптимизатором. Оптимизатору требуется время на такую обработку, но в итоге может получиться высоко-оптимизированный код, который будет работать в разы быстрее. В движке V8 роль интерпретатора выполняет Ignition, а оптимизатором является Turbofan. В движке Chakra, который используется в Edge, вместо одного оптимизатора целых два, SimpleJIT и FullJIT. А в JSC (Safari), аж три Baseline, DFG и FTL. Конкретная реализация в разных движка может отличаться, но принципиальная схема, в целом одинакова.

Сегодня мы будем говорить об одном из множества механизмов оптимизации, который называется Inline Caches.

Читать далее
Всего голосов 11: ↑10 и ↓1+10
Комментарии3

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