This media is not supported in your browser
VIEW IN TELEGRAM
Shy Ghost
Создано и анимировано в HTML и SCSS. Логика запуска анимаций реализована в JS.
👉 @seniorFront
Создано и анимировано в HTML и SCSS. Логика запуска анимаций реализована в JS.
👉 @seniorFront
❤11🔥5👍2
Что возвращает метод isSupersetOf()?
Anonymous Quiz
39%
true, если текущая коллекция включает в себя все элементы другой коллекции, false в противном случае
19%
true, если текущая коллекция является подмножеством другой коллекции, и false в противном случае
31%
true, если текущая коллекция является супермножеством другой коллекции, и false в противном случае
12%
true, если текущая коллекция имеет одинаковые элементы с другой коллекцией, false в противном случае
👍6❤1
Media is too big
VIEW IN TELEGRAM
Ghost Text
В этом видео создается эффект исчезновения текста при помощи CSS blur и transform при наведении.
👉 @seniorFront
В этом видео создается эффект исчезновения текста при помощи CSS blur и transform при наведении.
👉 @seniorFront
👍2🤔2
1's, 0's and wildcards
Верните массив, содержащий все возможные значения, которые можно получить, заменяя '?' нулём или единицей.
Пример:
👉 @seniorFront
Верните массив, содержащий все возможные значения, которые можно получить, заменяя '?' нулём или единицей.
Пример:
'101?' -> ['1010', '1011']
'1?1?' -> ['1010', '1110', '1011', '1111']
👉 @seniorFront
👍1
Как использовать менеджер состояний NgRx для Angular-проектов
Итак, начнем с определения. В контексте веб-разработки менеджер состояний NgRx — это инструмент, который управляет глобальным для всего приложения состоянием. Согласно документации, он является инструментом изоляции побочных эффектов для создания более чистой архитектуры компонентов. Также с введением NgRx появляются инструменты для разработки и отладки, расширяющие возможности создания различных типов приложений.
В этой статье разбираются особенности применения, плюсы и минусы NgRx.
👉 @seniorFront
Итак, начнем с определения. В контексте веб-разработки менеджер состояний NgRx — это инструмент, который управляет глобальным для всего приложения состоянием. Согласно документации, он является инструментом изоляции побочных эффектов для создания более чистой архитектуры компонентов. Также с введением NgRx появляются инструменты для разработки и отладки, расширяющие возможности создания различных типов приложений.
В этой статье разбираются особенности применения, плюсы и минусы NgRx.
👉 @seniorFront
Как работает браузер ?
Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку:
Запрос ресурса:
Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с
DNS-разрешение:
Браузер преобразует доменное имя (например,
Установка соединения:
Браузер устанавливает TCP-соединение с сервером, а если используется
Отправка HTTP-запроса:
Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.
Получение HTTP-ответа:
Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.
Разбор (парсинг) HTML:
Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.
Обработка CSS:
Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).
Построение рендер-дерева:
DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.
Визуализация (рендеринг):
Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).
Обработка JavaScript:
Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.
Асинхронные операции:
Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.
Весь этот процесс происходит быстро и незаметно для пользователя, предоставляя ему готовую к взаимодействию веб-страницу.
👉 @seniorFront
Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку:
Запрос ресурса:
Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с
http:// или https://, браузер отправляет запрос на сервер.GET /index.html HTTP/1.1
Host: example.com
DNS-разрешение:
Браузер преобразует доменное имя (например,
example.com) в IP-адрес с помощью DNS-сервера.Установка соединения:
Браузер устанавливает TCP-соединение с сервером, а если используется
https, то устанавливает также SSL/TLS-соединение для безопасной передачи данных.Отправка HTTP-запроса:
Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.
GET /index.html HTTP/1.1
Host: example.com
Получение HTTP-ответа:
Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Разбор (парсинг) HTML:
Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Обработка CSS:
Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).
h1 {
color: blue;
}
Построение рендер-дерева:
DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.
Визуализация (рендеринг):
Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).
Обработка JavaScript:
Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.
document.querySelector('h1').textContent = 'Hello, JavaScript!';
Асинхронные операции:
Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.
Весь этот процесс происходит быстро и незаметно для пользователя, предоставляя ему готовую к взаимодействию веб-страницу.
👉 @seniorFront
👍21
Performance review
Это процесс, который компании выставляют как справедливый способ для карьерного роста и распределения благ между сотрудниками. На деле, этот процесс далёк от справедливости и невыгоден сотрудникам по следующим причинам:
1. Система закрыта для сотрудников. Вы не можете посмотреть результаты ревью ваших коллег, вы не можете влиять на итоговую оценку. Нередки ситуации, когда вы получаете большинство положительных отзывов от коллег, но достаточно одного негативного отзыва и руководитель принимает «объективное решение» снизить вам оценку. Иногда достаточно и просто мнения вашего руководителя, чтобы он снизил вам итоговую оценку независимо от положительных отзывов. PR только создаёт видимость коллективной оценки вашего труда, но по факту её результат формируется вашим руководителем, который вынужден преследовать собственный KPI, и у вас нет никаких способов влияния на это.
2. Не существует объективных способов оценки. Процесс, в котором вы рассказываете руководству, что вы сделали за отчётный период, парадоксален. Весь период руководство занималось какими-то своими делами, а теперь вам надо рассказать, что вы сделали ценного для компании. И основная проблема тут — показать видимый для руководства результат работы. Это значит, что ваш коллега, что написал новый сервис с нуля, находится в гораздо более выигрышной ситуации, чем ваши правки легаси сервисов, код которых поддерживается ещё с 1990-х годов. Даже в том случае, если они помогут сохранить бизнесу кучу денег на длинной дистанции. Можно, конечно, предположить, что ваше руководство объективно и достаточно в теме, чтобы понять сложность и необходимость вашей работы с легаси кодом и по достоинству вас оценить. Но тогда зачем такому руководству PR, если оно и так в курсе вашего вклада в общее дело?
3. PR занижает вашу рыночную стоимость. Вот вы хотите увеличить себе зарплату. Компания предлагает решение — для этого надо показать оценку выше средней на следующем PR. Если ваши рабочие задачи к этому располагают, то это может быть неплохим вариантом. Но получить оценку выше средней, как правило, тяжелее, чем оффер в другой компании на ту сумму, что вы хотите. Существуют и политики компании, что вам не могут повысить зарплату выше определённого порога, как, например, в «Озоне». В итоге, если вы выбираете путь PR, вы выполняете больше работы за меньшую оплату. Если вы верите в справедливость PR, то для компаний это очень эффективный инструмент снижения вашей стоимости, а значит, собственных издержек.
4. PR часто используют для обоснования сокращений. Поскольку процесс закрытый, вы вполне можете получать из года в год хорошие оценки, но внезапно получить плохую, потому что компании нужно провести сокращения. Нам известно о таких случаях в «Додо» и «Авито», например. Самое мерзкое в этом то, что компания может не признавать факт сокращений, а все увольнения будет оправдывать неэффективностью увольняемых.
👉 @seniorFront
Это процесс, который компании выставляют как справедливый способ для карьерного роста и распределения благ между сотрудниками. На деле, этот процесс далёк от справедливости и невыгоден сотрудникам по следующим причинам:
1. Система закрыта для сотрудников. Вы не можете посмотреть результаты ревью ваших коллег, вы не можете влиять на итоговую оценку. Нередки ситуации, когда вы получаете большинство положительных отзывов от коллег, но достаточно одного негативного отзыва и руководитель принимает «объективное решение» снизить вам оценку. Иногда достаточно и просто мнения вашего руководителя, чтобы он снизил вам итоговую оценку независимо от положительных отзывов. PR только создаёт видимость коллективной оценки вашего труда, но по факту её результат формируется вашим руководителем, который вынужден преследовать собственный KPI, и у вас нет никаких способов влияния на это.
2. Не существует объективных способов оценки. Процесс, в котором вы рассказываете руководству, что вы сделали за отчётный период, парадоксален. Весь период руководство занималось какими-то своими делами, а теперь вам надо рассказать, что вы сделали ценного для компании. И основная проблема тут — показать видимый для руководства результат работы. Это значит, что ваш коллега, что написал новый сервис с нуля, находится в гораздо более выигрышной ситуации, чем ваши правки легаси сервисов, код которых поддерживается ещё с 1990-х годов. Даже в том случае, если они помогут сохранить бизнесу кучу денег на длинной дистанции. Можно, конечно, предположить, что ваше руководство объективно и достаточно в теме, чтобы понять сложность и необходимость вашей работы с легаси кодом и по достоинству вас оценить. Но тогда зачем такому руководству PR, если оно и так в курсе вашего вклада в общее дело?
3. PR занижает вашу рыночную стоимость. Вот вы хотите увеличить себе зарплату. Компания предлагает решение — для этого надо показать оценку выше средней на следующем PR. Если ваши рабочие задачи к этому располагают, то это может быть неплохим вариантом. Но получить оценку выше средней, как правило, тяжелее, чем оффер в другой компании на ту сумму, что вы хотите. Существуют и политики компании, что вам не могут повысить зарплату выше определённого порога, как, например, в «Озоне». В итоге, если вы выбираете путь PR, вы выполняете больше работы за меньшую оплату. Если вы верите в справедливость PR, то для компаний это очень эффективный инструмент снижения вашей стоимости, а значит, собственных издержек.
4. PR часто используют для обоснования сокращений. Поскольку процесс закрытый, вы вполне можете получать из года в год хорошие оценки, но внезапно получить плохую, потому что компании нужно провести сокращения. Нам известно о таких случаях в «Додо» и «Авито», например. Самое мерзкое в этом то, что компания может не признавать факт сокращений, а все увольнения будет оправдывать неэффективностью увольняемых.
👉 @seniorFront
Как сделать React Server Components в Electron с помощью Next.js и без открытых портов
С появлением React Server Components и Server Actions разработка веб-приложений стала проще, чем когда-либо. Удобно когда у разработчика есть все серверные API прямо внутри веб-приложения, нативно, с типами и полной поддержкой от фреймворка, например Next.js (и других фреймворков, поддерживающих RSC, конечно).
В то же время, Electron является де-факто стандартом для современных настольных приложений, написанных с использованием веб-технологий, особенно когда приложению нужен доступ к файловой системе и другим системным API, и девелопер знает только JS (Tauri заслуживает почётного упоминания, если вы знаете Rust или если вам нужен только простой WebView2 shell).
Я задался вопросом: почему бы не объединить лучшее из обоих миров и не запустить обычное приложение Next.js прямо внутри Electron, чтобы насладиться всеми преимуществами React Server Components?
👉 @seniorFront
С появлением React Server Components и Server Actions разработка веб-приложений стала проще, чем когда-либо. Удобно когда у разработчика есть все серверные API прямо внутри веб-приложения, нативно, с типами и полной поддержкой от фреймворка, например Next.js (и других фреймворков, поддерживающих RSC, конечно).
В то же время, Electron является де-факто стандартом для современных настольных приложений, написанных с использованием веб-технологий, особенно когда приложению нужен доступ к файловой системе и другим системным API, и девелопер знает только JS (Tauri заслуживает почётного упоминания, если вы знаете Rust или если вам нужен только простой WebView2 shell).
Я задался вопросом: почему бы не объединить лучшее из обоих миров и не запустить обычное приложение Next.js прямо внутри Electron, чтобы насладиться всеми преимуществами React Server Components?
👉 @seniorFront
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Реакция разраба на дизайнера, который презентует концепт сайта с анимациями и эффектами
👉 @seniorFront
👉 @seniorFront
❤37🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
Lightweight Water Distortion Effect
Реализовано на canvas и чистом JS. Можно изменять параметры анимации, а также подгружать свою картинку.
👉 @seniorFront
Реализовано на canvas и чистом JS. Можно изменять параметры анимации, а также подгружать свою картинку.
👉 @seniorFront
👍3🔥2❤1
Какое из следующих утверждений о inline-block элементах неверно?
Anonymous Quiz
16%
Они ведут себя как часть текста, как inline элементы
19%
Они могут содержать другие блочные или инлайн элементы
22%
Они всегда располагаются в одной строке
42%
Они занимают всю доступную ширину, как блочные элементы
👎18🤔7
Media is too big
VIEW IN TELEGRAM
Image Trails Effects
В этом видео создается эффект проявления картинок при движении мыши на чистом CSS.
👉 @seniorFront
В этом видео создается эффект проявления картинок при движении мыши на чистом CSS.
👉 @seniorFront
👍5
Пивомида
Давайте представим, что ваша компания только что наняла вашего друга из колледжа и выплатила вам реферальный бонус. Чтобы отпраздновать это событие, вы ведете свою команду в бар по соседству и используете реферальный бонус, чтобы купить и построить самую большую трехмерную пирамиду из пивных банок, какую только сможете
Пирамида пивных банок возводит в квадрат количество банок на каждом уровне: 1 банка на верхнем уровне, 4 на втором, 9 на следующем, 16, 25...
Завершите функцию beeramid, чтобы получить количество полных уровней пирамиды из пивных банок, которую вы можете построить, учитывая параметры:
ваш реферальный бонус и цена банки пива
Пример:
👉 @seniorFront
Давайте представим, что ваша компания только что наняла вашего друга из колледжа и выплатила вам реферальный бонус. Чтобы отпраздновать это событие, вы ведете свою команду в бар по соседству и используете реферальный бонус, чтобы купить и построить самую большую трехмерную пирамиду из пивных банок, какую только сможете
Пирамида пивных банок возводит в квадрат количество банок на каждом уровне: 1 банка на верхнем уровне, 4 на втором, 9 на следующем, 16, 25...
Завершите функцию beeramid, чтобы получить количество полных уровней пирамиды из пивных банок, которую вы можете построить, учитывая параметры:
ваш реферальный бонус и цена банки пива
Пример:
beeramid(1500, 2); // should === 12
beeramid(5000, 3); // should === 16
👉 @seniorFront
👍3
SOLID на котиках
Каждый программист хоть раз слышал о принципах SOLID. На собеседованиях и экзаменах в вузах многие из нас пытались вспомнить, о чем же был тот самый принцип Лисков. Однако вряд ли цель преподавателей и интервьюеров — заставить нас заучивать строчки из учебников. SOLID действительно помогает писать качественный код, когда во всем разберешься! Если вы этого еще не сделали, добро пожаловать под кат. Еще раз взглянем на то, как устроены всем известные принципы. Обещаю — без духоты, все рассмотрим на примерах с котиками.
👉 @seniorFront
Каждый программист хоть раз слышал о принципах SOLID. На собеседованиях и экзаменах в вузах многие из нас пытались вспомнить, о чем же был тот самый принцип Лисков. Однако вряд ли цель преподавателей и интервьюеров — заставить нас заучивать строчки из учебников. SOLID действительно помогает писать качественный код, когда во всем разберешься! Если вы этого еще не сделали, добро пожаловать под кат. Еще раз взглянем на то, как устроены всем известные принципы. Обещаю — без духоты, все рассмотрим на примерах с котиками.
👉 @seniorFront
👎6❤2👍1