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

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

Profile Publications 15Comments 131Bookmarks 139

maxpetrikov Jul 26 2021 at 02:40

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

6 min

13K

Open source*JavaScript*ReactJS*

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

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

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

aio350 Jul 21 2021 at 10:41

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

27 min

31K

Information Security*Website development*JavaScript*Programming*Timeweb Cloud corporate blog

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

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

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

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

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

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

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

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

+15

aio350 Jun 28 2021 at 12:00

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

29 min

903K

Website development*Programming*SQL*

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

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

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

+42

nikolayshabalin Jun 23 2021 at 08:38

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

14 min

30K

Website development*Semantics*HTML*HTML Academy corporate blog

Tutorial

Translation

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

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

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 Apr 20 2017 at 10:14

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

4 min

122K

GTD*

Translation

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

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

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

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

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

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

+44

r1c0 May 25 2021 at 13:57

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

4 min

23K

Website development*API*

From sandbox

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

owlofmacloud May 25 2021 at 15:00

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

5 min

15K

Website development*JavaScript*ReactJS*Маклауд corporate blog

Translation

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

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

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

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

+10

owlofmacloud May 22 2021 at 14:00

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

10 min

65K

Website development*HTML*ReactJS*Маклауд corporate blog

Translation

Настоящий или реальный (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 Aug 31 2018 at 18:00

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

4 min

18K

JavaScript*

From sandbox

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

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

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

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

etnolover Jul 19 2016 at 08:24

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

11 min

583K

JavaScript*

From sandbox

От переводчика:
Предлагаю вашему вниманию перевод краткого (действительно краткого) руководства по 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 May 2 2021 at 12:02

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

7 min

28K

Website development*JavaScript*ReactJS*RUVDS.com corporate blog

Translation

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

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

+43

aio350 Apr 19 2021 at 08:50

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

14 min

25K

Website development*JavaScript*Programming*ReactJS*

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

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

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

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

ru_vds Apr 20 2021 at 12:04

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

8 min

18K

Website development*JavaScript*Perfect code*ReactJS*RUVDS.com corporate blog

Tutorial

Translation

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

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

+42

ssurrokk Apr 13 2021 at 18:51

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

24 min

98K

Website development*ReactJS*

Tutorial

Translation

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

xamd Mar 13 2015 at 08:37

Введение в fetch

5 min

299K

Website development*JavaScript*Programming*

Translation

Прощай, XMLHttpRequest!

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

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

+25

145

Porky_Prince Mar 12 2021 at 12:18

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

12 min

81K

Mathematics*Popular science

From sandbox

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

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

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

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

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

Итак:

+24

honyaki Feb 10 2021 at 13:59

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

11 min

9.2K

JavaScript*Programming*Skillfactory corporate blogStudying in IT

Tutorial

Translation

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

Для программистов, особенно программистов-самоучек, первое знакомство с миром «рекурсии» в основном связано с математикой. При упоминании рекурсии программисты сразу вспоминают некоторые из наших любимых слов на 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 Jan 25 2021 at 12:20

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

11 min

124K

CMS*Website development*Usability*Web analytics*Internet marketing*

From sandbox

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

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

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

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

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

ragequit Jan 18 2021 at 10:04

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

5 min

252K

Development for Android*SmartphonesSoftwareVDSina.ru corporate blog

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

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

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

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

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

+168

203

AlexSergey Jan 18 2021 at 13:17

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

12 min

114K

Website development*JavaScript*Node.JS*ReactJS*Search engine optimization*

Tutorial

В данной статье мы разберем влияние 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