Зирка Андрей @BlackStar1991

Увлеченный сайтодел

Профиль Публикации 15Комментарии 131Закладки 139

maxpetrikov 26 июл 2021 в 02:40

Как разобраться в исходном коде React

6 мин

14K

Open source*JavaScript*ReactJS*

React самая популярная библиотека для построения пользовательских интерфейсов. Мы знаем про виртуальное дерево, движок fiber, процедуру reconcilation, хуки и другие прекрасные возможности react. Но как это работает на уровне исходного кода? Ответить на этот вопрос смогут очень небольшое количество программистов.

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

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

aio350 21 июл 2021 в 10:41

Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений

27 мин

34K

Блог компании Timeweb CloudИнформационная безопасность*Веб-разработка*JavaScript*Программирование*

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

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

Сначала мы с вами кратко разберем основные виды уязвимостей веб-приложений, а также основные виды атак, основанные на этих уязвимостях. Далее мы рассмотрим все современные заголовки, каждый — по отдельности. Это в теоретической части статьи.

В практической части мы реализуем простое Express-приложение, развернем его на Heroku и оценим безопасность с помощью WebPageTest и Security Headers. Также, учитывая большую популярность сервисов для генерации статических сайтов, мы настроим и развернем приложение с аналогичным функционалом на Netlify.

Исходный код приложений находится здесь.

Демо Heroku-приложения можно посмотреть здесь, а Netlify-приложения — здесь.

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

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

+15

aio350 28 июн 2021 в 12:00

Памятка/шпаргалка по SQL

29 мин

987K

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

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

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

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

+42

nikolayshabalin 23 июн 2021 в 08:38

Что можно положить в тег <head>

14 мин

32K

Блог компании HTML AcademyВеб-разработка*Семантика*HTML*

Туториал

Перевод

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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

+35

LukinB 20 апр 2017 в 10:14

К чёрту мотивацию, вам нужна дисциплина

4 мин

124K

GTD*

Перевод

Если вы желаете что-то сделать, то есть два способа этого достичь.

Первый, более распространённый и в значительной мере неправильный вариант — попытаться мотивировать себя.

Второй, весьма непопулярный, но абсолютно правильный выбор — воспитание дисциплины.

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

В чём же разница?

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

+44

r1c0 25 мая 2021 в 13:57

Как написать удобный API — 10 рекомендаций

4 мин

25K

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

Из песочницы

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

owlofmacloud 25 мая 2021 в 15:00

5 приемов по разделению «бандла» и «ленивой» загрузке компонентов в React

5 мин

16K

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

Перевод

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

Распространенные случаи разделения сборки и «ленивой» или отложенной загрузки (lazy loading) включают в себя следующее:

Загрузка дополнительного кода при переходе пользователя к новому представлению (view — слой, отвечающий за визуальное отображение)
Загрузка такого кода может быть связана с определенным действием, таким как прокрутка или нажатие кнопки
Также можно реализовать предварительную загрузку определенных ресурсов, которые представляют потенциальный интерес для пользователя
Это приводит к тому, что когда пользователь захочет получить доступ к определенной функциональности, она уже будет готова

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

+10

owlofmacloud 22 мая 2021 в 14:00

Немного о том, как работает виртуальный DOM в React

10 мин

69K

Блог компании МаклаудВеб-разработка*HTML*ReactJS*

Перевод

Настоящий или реальный (real) DOM

DOM расшифровывается как Document Object Model (объектная модель документа). Проще говоря, DOM — это представление пользовательского интерфейса (user interface, UI) в приложении. При каждом изменении UI, DOM также обновляется для отображения этих изменений. Частые манипуляции с DOM негативно влияют на производительность.

Что делает манипуляции с DOM медленными?

DOM представляет собой древовидную структуру данных. Поэтому изменения и обновления самого DOM являются достаточно быстрыми. Но после изменения обновленный элемент и все его потомки (дочерние элементы) должны быть повторно отрисованы (отрендерены) для обновления UI приложения. Повторный рендеринг — очень медленный процесс. Таким образом, чем больше у нас компонентов UI, тем более дорогими с точки зрения производительности являются обновления DOM.

Манипуляции с DOM являются сердцем современного интерактивного веба. К сожалению, они намного медленнее большинства JavaScript-операций. Ситуация усугубляется тем, что многие JavaScript-фреймворки обновляют DOM чаще, чем необходимо.

Допустим, у нас имеется список из 10 элементов. Мы изменяем первый элемент. Большинство фреймворков перестроят весь список. Это в 10 раз больше работы, чем требуется! Только 1 элемент изменился, остальные 9 остались прежними.

Перестроение списка — это легкая задача для браузера, но современные веб-сайты могут осуществлять огромное количество манипуляций с DOM. Поэтому неэффективное обновление часто становится серьезной проблемой. Для решения данной проблемы команда React популяризовала нечто под названием виртуальный (virtual) DOM (VDOM).

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

+30

ptzoo 31 авг 2018 в 18:00

Что делать, когда “this” теряет ссылку на контекст

4 мин

18K

JavaScript*

Из песочницы

Привет, Хабр! Представляю вашему вниманию перевод статьи «What to do when “this” loses context» автора Cristi Salcescu.

Лучший способ избежать потери контекста this – не использовать this. Однако, это не всегда возможно. Например, мы работаем с чужим кодом или библиотекой, которые используют this.

Литерал объекта, функция-конструктор, конструктор объектов класса в системе прототипов. Псевдопараметр this используется в системе прототипирования для того, чтобы дать доступ к свойствам объекта.

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

etnolover 19 июл 2016 в 08:24

ES6 по-человечески

11 мин

589K

JavaScript*

Из песочницы

От переводчика:
Предлагаю вашему вниманию перевод краткого (действительно краткого) руководства по ES6. В нём можно ознакомиться с основными понятиями стандарта.
Оригинальный текст в некоторых случаях был дополнен или заменён на более подходящий источник. Например, часть определения ключевого слова const является переводом документации с MDN.
Чтобы лучше разобраться в некоторых концепциях (для выполнения качественного перевода) использовалось описание стандарта на сайте MDN, руководство "You Don't Know JS: ES6 & Beyond" и учебник Ильи Кантора.

Перевод выложил на Гитхаб: https://github.com/etnolover/ES6-for-humans-translation. В случае нахождения ошибок пишите, исправлю.
Ссылка на оригинальный текст: https://github.com/metagrover/ES6-for-humans

Update 22.07.2016: добавил опрос про const

Содержание

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

+58

ru_vds 2 мая 2021 в 12:02

5 React-хуков, которые пригодятся в любом проекте

7 мин

28K

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

Перевод

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

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

+43

aio350 19 апр 2021 в 08:50

Заметка о том, как работают хуки в React

14 мин

26K

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

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

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

Вопрос звучит следующим образом: почему хуки можно использовать только на верхнем уровне? Вот что по этому поводу говорит официальная документация.

Начнем с правил использования хуков.

ru_vds 20 апр 2021 в 12:04

Простые советы по написанию чистого кода React-компонентов

8 мин

19K

Блог компании RUVDS.comВеб-разработка*JavaScript*Совершенный код*ReactJS*

Туториал

Перевод

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

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

+42

ssurrokk 13 апр 2021 в 18:51

React Server-Side Rendering (SSR) — руководство новичка

24 мин

102K

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

Туториал

Перевод

В этом уроке мы поговорим о серверном рендеринге (SSR), его преимуществах и подводных камнях. Затем мы создадим мини React проект и express сервер (Node.js), чтобы продемонстрировать, как можно достичь SSR.

xamd 13 мар 2015 в 08:37

Введение в fetch

5 мин

303K

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

Перевод

Прощай, XMLHttpRequest!

fetch() позволяет вам делать запросы, схожие с XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises (Обещания), которые позволяют использовать более простое и чистое API, избегать катастрофического количества callback'ов и необходимости помнить API для XMLHttpRequest.

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

+25

145

Porky_Prince 12 мар 2021 в 12:18

Производная и интеграл — проще некуда

12 мин

86K

Математика*Научно-популярное

Из песочницы

19 декабря 2020 г. на Хабре вышла статья «Интуитивное объяснение интеграла».

В комментариях к ней некоторые пользователи указали, что объяснение получилось не очень интуитивным, например:

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

Но конкретно интегралы это такая тема, которую надо описать или короче, чем у вас, или намного дольше.
Иначе и школьник не поймет, и те, кто знает, ничего нового не откроют."

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

Итак:

+24

honyaki 10 фев 2021 в 13:59

Как учить рекурсию разработчикам программного обеспечения

11 мин

9.4K

Блог компании SkillfactoryJavaScript*Программирование*Учебный процесс в IT

Туториал

Перевод

Пришло время переосмыслить обучение рекурсии с помощью реальных кейсов вместо элегантных математических уравнений

Для программистов, особенно программистов-самоучек, первое знакомство с миром «рекурсии» в основном связано с математикой. При упоминании рекурсии программисты сразу вспоминают некоторые из наших любимых слов на F – нет, не те самые слова на F, а:

Фибоначчи

function fibonacci(position) {
 if (position < 3) return 1;
 return fibonacci(position - 1) + fibonacci(position - 2);
}

Факториал

function factorial(num) {
 if (num === 1) return num;
 return num * factorial(num - 1);
}

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

+12

Topal-Olga 25 янв 2021 в 12:20

25 шагов SEO-настройки для нового сайта: что учесть, чтобы не переделывать

11 мин

131K

CMS*Веб-разработка*Usability*Веб-аналитика*Интернет-маркетинг*

Из песочницы

Ольга Топал, Middle SEO specialist, Boosta

SEO - это не так страшно, как кажется. А базовое SEO – еще проще. Правильная базовая SEO-настройка молодого сайта уже принесет результаты. Не каждый ваш конкурент оптимизирует свой сайт на 100%. Поэтому, если вы оптимизируете сайт правильно, есть все шансы побороться за органический трафик спустя некоторые время.

На каком этапе можно начинать делать SEO? Чем раньше, тем лучше. В этой статье я собрала 25 пунктов, которые нужно учесть до запуска сайта, чтобы первое сканирование, а позже индексирование прошли гладко и принесли максимальную пользу.

Этот чек-лист составлен с учетом всех рекомендаций поисковой системы Google и подходит как для русскоязычных сайтов, так и проектов «на Запад».

Читать больше о SEO-настройке

ragequit 18 янв 2021 в 10:04

Как удалить «неудаляемые» приложения со смартфона

5 мин

261K

Блог компании VDSina.ruРазработка под Android*СмартфоныСофт

Чтобы увеличить привлекательность смартфонов, производители ставят на них как можно больше разных программ. Это понятно. Просто берём и удаляем ненужное… Стоп.

Оказывается, некоторые программы невозможно удалить. Например, на отдельных моделях Samsung невозможно удалить Facebook (есть только опция 'disable'). Говорят, на Samsung S9 вдобавок предустановлены «неудаляемые» приложения Microsoft.

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

Всё это надо зачистить.

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

+168

203

AlexSergey 18 янв 2021 в 13:17

Server-Side Rendering с нуля до профи

12 мин

121K

Веб-разработка*JavaScript*Node.JS*ReactJS*Поисковая оптимизация*

Туториал

В данной статье мы разберем влияние SSR на SEO оптимизацию приложения.
Пройдем с вами путь по переносу обычного React приложения на SSR.
Разберем обработку асинхронных операций в SSR приложениях.
Посмотрим, как делать SSR в приложениях с Redux Saga.
Настроим Webpack 5 для работы с SSR приложением.
А также рассмотрим тонкости работы SSR: Генерация HTML Meta Tags, Dynamic Imports, работа с LocalStorage, debugging и прочее.

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

1 2

4 5 6 7