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

Вы когда-нибудь встречали такие операторы, как materialize и dematerialize в RxJS? А что насчет класса Notification? Вероятно, многие слышали, но не до конца представляли, где их можно применить на практике.

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

Materialize

Для начала вспомним, какие типы значений может эмитить объект типа Observable: это next, error и complete. Если вы не помните, что это значит, здесь можно почитать.
Соответственно и про observer, набор коллбэков (onNext, onError, onComplete), тоже советую вспомнить.

Вот что говорится в документации о materialize операторе: «A function that returns an Observable that emits Notification objects that wrap the original emissions from the source Observable with metadata».

Итак, вообще для чего нужна последовательность в проектировании? Я бы привела аналогию с замешиванием теста. Есть много нюансов, которые нужно делать последовательно, не перемешивая процессы, иначе тесто получится не пригодным для наших самых красивых и вкусных синабонов. С этапами работы все так же. Ты не можешь отрисовать дизайн, а потом искать пользователей. Твоя работа окажется бесполезной и не удовлетворит конечного потребителя. Здесь я расскажу про каждый этап и какие лучше применять исследования, фреймворки и методологии.

Что нового в версии 2.10? Основные нововведения.

Сложность: Новичок.

Релиз Flutter версии 2.10 состоялся 03.02.2022 и в рамках этого релиза было объявлено о нескольких интересных вещах, включая большое обновление поддержки Flutter для Windows, несколько значительных улучшений производительности, новую поддержку значков и цветов в фреймворке, а также некоторые улучшения инструментов. Кроме того, было произведено удаление канала разработки, сокращение поддержки старых версий iOS и небольшое количество критических изменений о которых вы узнаете в статье. Приступим!

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 11 — 17 апреля 2022.

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

Микрофронтенды могут быть следующей важной вехой в фронтенд разработке.

Давайте я вам расскажу почему!

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

Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода?

На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021. Он рассказал о серверном рендеринге на примере приложения SuperJob. Читайте под катом, как SuperJob пришли к своей реализации серверного рендеринга, узнав по пути много интересного. Узнаете, когда хорош SSR и как он работает, из чего он устроен, чем может быть полезен и кому.  

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

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

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.

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

Анимация на КПДВ: Дилан Баунманн, codepen.

Мы часто слышим в новостях фразы «Хакеры атаковали», «Хакеры взломали», «Хакеры украли» и подобные. Как сообщают legaljobs, хакеры проводят 1 атаку в вебе каждые 32 секунды. По прогнозам cybercrime magazine, ущерб от киберпреступлений к 2025 году составит $10,5 трлн против $3 трлн в 2015 году. Но почему у них получается произвести атаку, как это происходит и кто же они такие, “эти хацкеры”?

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

Статья предназначена как frontend-разработчикам, которые хотят познакомиться с основными видами уязвимостей на клиенте и методами защиты от них, владельцам продуктов, которые заботятся о безопасности своих пользователей, так и тем, кто искал повод «никогда больше не быть онлайн».

В 2015 году, когда я пришёл на своё текущее место работы, мне было непривычно от необыкновенной свободы действий. Буквально, на новом месте можно было проявить весь творческий потенциал как DevOps-евангелиста. Мне нравилось выстраивать процессы, автоматизировать рутину, делать разработку удобной. Больше всего я люблю оптимизации, а больше всего ненавижу - рутину.

Эта история одной боли и попытке не просто "принять обезболивающее", а реально излечить её. Поэтому готовьтесь переварить лонгрид.

Я некоторое время разрабатывал спортсбуки, а также их врагов (парсеры, сканеры, боты для ставок) и решил поделиться опытом.

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

Спортсбуки должны использоваться только легально.

Многим ещё не привычна структура меню в админке Joomla 4 и поэтому появился модуль Phoca Top Menu Module. Однако, того же результата можно добиться штатными средствами и сделать структуру меню панели администратора как у Joomla 3, она становится почти такая же. Да и в принципе, к построению админки можно относиться так же, как и к шаблону сайта для фронта.

Нужно зайти в Система - Модули панели управления - Admin menu. В нём есть "Тип предустановки" меню. Включаем "Альтернативное главное меню".

Objection.js — минималистичная ORM-библиотека для Node.js, которая сильно упрощает взаимодействие с базами данных и не перегружена дополнительными функциями, как Sequelize или TypeORM. Разбираемся, в чем ее специфика и как строить запросы с ее помощью.

Недавно я увидел на StackOverflow историю разработчика, который столкнулся с проблемой использования ORM . Этот кейс натолкнул меня на мысль написать статью о альтернативе Sequelize — Objection.js, библиотеке, которая решает множество проблем ORM.

Привет, друзья!

В этом цикле из 2 статей я хочу рассказать вам о Supabase — открытой (open source), т.е. бесплатной альтернативе Firebase. В первой статье мы рассмотрели теорию, в этой — разработаем полноценное social app с аутентификацией, базой данных, хранилищем файлов и обработкой изменения данных в режиме реального времени.

Репозиторий с исходным кодом проекта.

Если вам это интересно, прошу под кат.

Дизайн-мышление - модный тренд, который за время пандемии добрался и до юристов. Если законы все еще пишут крючковатым языком, то юристы, занятые в частном секторе (B2B, судебные юристы и т.д.), стремятся сделать документы не только выигрышными, но и понятными.

Ознакомьтесь с подходами дизайн-мышления к договору и шаблоном задизайненного договора. Что такое legal design? только буллиты, картинки и комиксы с договором? или же нечто большее, нужное или даже необходимое?

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 5—11 апреля.

Спецификации

Опубликован первый рабочий черновик (First Public Working Draft) Region capture.

Последний призыв к рассмотрению предлагаемых изменений в Media Queries Level 3.

W3C приглашает к реализации WebXR Device API.

Спецификации preload становится отключенным черновиком (Discontinued Draft), чтобы продолжить развитие в HTML living standard.

Письмо генерального директора W3С к 33-й годовщине интернета.

Больше новостей о HTML, CSS, JavaScript и инструментах разработчика — под катом.

Статья является продолжением статьи: История утечки персональных данных через Github.

Сегодняшняя подборка:

1. Персданные, пароли, рабочие секреты, все в куче

2. Пасхалка с персональными данными в рабочем проекте

3. Креды для доступа в даркнет

Типовое решение онлайн-платформы для продажи B2B и B2C eCommerce-продуктов имеет набор определенных страниц, каждая из которых преследует цель формирования пользовательского опыта (Customer eXperience, CX). Во многом структура страниц B2B и B2C схожая, но есть и ряд значительных различий, о которых и поговорим.

Привет всем любителям покопаться в технологиях фронтенда! В этой статье я расскажу про то, как можно встроить JSX в проект на TypeScript со сборщиком Vite. Материал будет интересен, если вы:

⚛️ Работали с React, но не знаете, что у него под капотом

?️‍♂️ Интересуетесь всей теорией, связанной с фронтендом

? Гик, создающий проекты на ванильном JS/TS

Зачем? По большей части ради веселья! Вряд ли описанная идея может быть использована в реальных проектах без дополнительных переусложнений и создания нового фронтенд-фреймворка. Так что откройте в соседней вкладке GitHub-репозиторий с кодом проекта и устройтесь поудобнее. Впереди – глубокое погружение в JSX.

Привет, друзья!

Представляю вашему вниманию третью (заключительную) часть перевода этой замечательной книги по WebRTC.

• Первая часть.
• Вторая часть.

Если вам это интересно, прошу под кат.