Обновить
512K+

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

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

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

Секретная информация? Используй 2FA для VPS/VDS

Время на прочтение4 мин
Охват и читатели6.5K
image

Часто задаваемый вопрос, как надежно защитить свой VPS / выделенный сервер от взлома? Поэтому я решил написать инструкцию о внедрении двухфакторной аутентификации.

2FA является вторым уровнем защиты данных, благодаря которому получить доступ к учетной записи можно только после подтверждения собственной личности. Теперь, даже если злоумышленник будет знать логин и пароль, благодаря двухфакторной аутентификации он не сможет получить доступ к вашему серверу.
Читать дальше →

Месяц до релиза PHP8. А на какой версии ты в основном сидишь сейчас?

Время на прочтение3 мин
Охват и читатели3.5K
С этим вопросом мы пошли к докладчикам ульяновского PHP-митапа: его можно будет аккуратно посетить или свободно посмотреть в интерактивном формате уже в эти выходные.


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

Ответы и другие интересные истории от выступающих под катом.

Композиция компонентов в React JS

Время на прочтение7 мин
Охват и читатели18K
По прошествии 2-х лет работы с React у меня накопилось немного опыта, которым хотелось бы поделиться. Если вы только начали осваивать React, то надеюсь эта статья поможет выбрать правильный путь развития проекта из 1-5 форм до огромного набора компонентов и при этом не запутаться.

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

В этой статье речь пойдет о моем личном мнении как организовать композицию компонентов.
Читать дальше →

Настройка Webpack 5 с нуля

Время на прочтение10 мин
Охват и читатели233K


Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

  • команда «webpack-dev-server» теперь выглядит как «webpack-serve»
  • отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
  • полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?


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

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

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

Превращаем реактивные формы Angular в строго типизированные за одну минуту

Время на прочтение4 мин
Охват и читатели4.9K

Привет, Хабр! Представляю вашему вниманию перевод статьи "Convert into Strongly Typed Angular Forms in a Minute" автора Ajay Ojha.



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

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

Использование «глобального» await в JavaScript

Время на прочтение8 мин
Охват и читатели17K


Новая возможность, которая может изменить наш подход к написанию кода

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

Одним из предложений по улучшению JavaScript является предложение под названием «top-level await» (await верхнего уровня, «глобальный» await). Цель данного предложения состоит в превращении ES модулей в некое подобие асинхронных функций. Это позволит модулям получать готовые к использованию ресурсы и блокировать модули, импортирующие их. Модули, которые импортируют ожидаемые ресурсы, смогут запускать выполнение кода только после получения ресурсов и их предварительной подготовки к использованию.

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

Не переживайте из-за этого. Продолжайте читать. Я покажу, как можно использовать названную фичу уже сейчас.
Читать дальше →

PHP-Дайджест № 190 (5 – 19 октября 2020)

Время на прочтение4 мин
Охват и читатели12K
Фото: Илья Шихалеев.

Свежая подборка со ссылками на новости и материалы. В выпуске: PHP 8.0 RC 2, Xdebug 3 beta, PhpStorm EAP с поддержкой PHPStan и Psalm, порция полезных инструментов, статьи, видео, митапы.

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


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

Ищете бесплатные альтернативы cPanel? Держите сразу 7

Время на прочтение7 мин
Охват и читатели22K
image

Приветствую вас, уважаемые читатели и почитатели Хабра!

В этой статье я расскажу вам о 7 популярных альтернативах cPanel. Вы узнаете:

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

Эту статью я начал готовить неделю назад. Вчера и позавчера она даже мне снилась. Я часто вижу вещие сны, и именно потому вы сейчас читаете эти строки (вот сказал сейчас что-то умное, но до конца не понял, что именно).

Говоря о cPanel, стоит отметить, что ее преимущества всё ещё превышают недостатки. К последним относится её платная основа. Как говорится, не заплатишь – не попользуешься. Смотрим тарифы… от 15 баксов в месяц! Хм. Многие даже за сервер в месяц платят меньше.
Читать дальше →

SiteAnalyzer 2.3 — Динамика загрузки страниц

Время на прочтение2 мин
Охват и читатели2.8K

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


SiteAnalyzer 2.3

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

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

Время на прочтение3 мин
Охват и читатели9.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Как эффективно применять React Context

Время на прочтение9 мин
Охват и читатели64K

В статье Как управлять состоянием React приложения без сторонних библиотек, я писал о том как сочетание локального состояния и контекста (React Context) поможет вам упростить управление состоянием при разработке приложения. В этой статье я продолжу эту тему - мы поговорим о методах эффективного использования потребителей контекста (Context Consumer), которые помогут вам избежать ошибок и упростят разработку приложений и/или библиотек.

Рекомендую перед прочтением этой статьи прочитать Как управлять состоянием React приложения без сторонних библиотек. Особенно обратите внимание на рекомендацию о том что не нужно применять контексты для решения всех проблем связанных с передачей состояния. Однако, когда вам все таки понадобиться применять контексты, надеюсь эта статья поможет вам делать это наиболее эффективным образом. Так же помните о том что контексты НЕ обязательно должны быть глобальными, контекст может (и скорее всего, должен) быть частью какой либо ветки в структуре вашего приложения.

Давайте, для начала, создадим файл src/count-context.js и пропишем там наш контекст:

Читать далее

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

Время на прочтение1 мин
Охват и читатели3.5K

Практические советы от Spatie по продажам цифровых продуктов с помощью Laravel. Новый пакет для генерации API-документации. Правильная валидация электронной почты. Применение Коллекций для работы со сложными данными.


Laravel Дайджест

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

Выбор CSS макета — Grid или Flexbox?

Время на прочтение9 мин
Охват и читатели108K


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

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

Языки программирования помогают сделать сайты «живыми», но в основе каждой страницы по-прежнему лежит старый добрый HTML. При рассмотрении макетов необходимо учитывать факторы, определяющие их качество, а именно отзывчивость, порты просмотра, устройства отображения, браузеры и размеры экранов пользователей. Грамотный макет не только здорово смотрится, но также может сохранять задуманную структуру, вписываясь в экраны с любым возможным соотношением сторон. Как раз за эту подстройку и отвечает CSS. В текущей статье мы в общих чертах рассмотрим два его мощнейших инструмента: Flexbox и Grid.
Читать дальше →

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

29 ноября в Москве конференция PHP Russia будет офлайн

Время на прочтение7 мин
Охват и читатели4.1K
Пандемия повлияла на все бизнес-процессы, мы долго были в онлайне. Но 29 ноября PHP-разработчики смогут наконец встретиться офлайн в тёплой атмосфере, увидеть лучших спикеров PHP-вселенной, и задав им вопросы, разобрать актуальные кейсы и обсудить проблемы. PHP Russia 2020 пройдёт в Москве в гостинице Radisson Slavyanskaya. Приходите, если хотите получить ускорение и направление в развитии плюс набраться новых идей для своих проектов!

Александр Макаров расскажет о предстоящих активностях на конференции, о некоторых интерактивах и других нюансах. Александр — эксперт в PHP, лидер фреймворка Yii, соавтор Yii 2 и представитель Yii в PHP-FIG. Кроме разработки фреймворка успел поработать в разных компаниях, таких как Skyeng, Wrike и Stay.com и перепробовать в бою целые поколения разных технологий.

Мы расспросили Александра как главу программного комитета по PHP Russia 2020 обо всех активностях и интересностях встречи.


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

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

Время на прочтение12 мин
Охват и читатели5K

обложка


Продолжаем изучать Nuxt Content.


Первая часть доступна здесь.


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

Продвинутый CSS-in-TS

Время на прочтение11 мин
Охват и читатели9.7K


Здравствуйте, меня зовут Дмитрий Карловский и я… автор одного из первых фреймворков целиком и полностью написанных на тайпскрипте — $mol. Он по максимуму использует возможности статической типизации. И сегодня речь пойдёт о максимально жёсткой статической фиксации стилей.


Это расшифровка выступления на PiterJS#46. Вы можете либо посмотреть видео запись, либо открыть в интерфейсе проведения презентаций, либо читать как статью...

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

Визуализация сложных данных с использованием D3 и React

Время на прочтение9 мин
Охват и читатели18K

Существует много возможныx вариантов реализации сложных графиков в ваших проектах. Я за несколько лет попробовал все возможные варианты. Сначала это были готовые библиотеки типа AmCharts 4. AmCharts сразу же оказался большим и неповоротливым. После этого были более гибкие и дружелюбные библиотеки, такие как Recharts. Recharts был поначалу очень хорош, но со временем сложные фичи создавались такими костылями, которые даже показывать стыдно, а какие-то фичи и вовсе были невозможны в реализации. Таким образом, я пришел к D3 и решаю на нем любые задачи, связанные с графиками. Иногда это занимает немного больше времени по сравнению с готовыми инструментами. Но остается одно неоспоримое преимущество – мы всегда знаем, что никогда не упремся в рамки и ваш код не захочется отправить в помойку через пару месяцев.


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


Разработка онлайн-сервиса для инвесторов на pythonanywhere.com с использованием данных Yahoo Finance

Время на прочтение7 мин
Охват и читатели3.5K
Цель настоящей статьи — поделиться опытом разработки аналитического онлайн-сервиса для инвесторов на python. Основное внимание уделено в большей степени концептуальным моментам, а не детальному описанию какой-то отдельной технологии. Надеюсь, что любые детали читатель легко найдет, немного погуглив. Ради наглядности даю ссылку на сервис в самом начале изложения www.emarkoff.com .

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

PHP-митапы возвращаются в смешанном формате. Вот ссылки на трансляции из Ульяновска, Йошкар-Олы, Самары, Краснодара

Время на прочтение2 мин
Охват и читатели1.9K
В 2019-м у сообщества появилась своя конференция, а многие ребята, которые собрались на ней, решили организовать или возродить встречи в своих регионах. Карта городских митапов ширилась с каждым месяцем и казалось, что в 2020-м…



В 2020 у сообщества две конференции, а вот митапов не было с весны. Но год приучил нас к гибридным форматам. Поэтому каждую субботу с 17 октября по 7 ноября один из городских чатов будет устраивать трансляцию докладов для всех желающих. Ну а если будет получаться — собираться небольшим составом (и со всеми мерами предосторожности). Подробности ниже.
Читать дальше →

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

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



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

Готовы? Если так — приступим.
Читать дальше →