Разработка веб-сайтов *

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

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

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

Каждый день сайтом 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.

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

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

Краткий этот туториал проведет вас, шаг за шагом, через все этапы создания элегантного слайдера на основе Ruby on Rails 6 и Bootstrap 5; мне хотелось,чтобы несложный этот rails-app обладал, тем не менее, некоторым рядом опций, управление которыми реализовано посредством удобной панели управления ActiveAdmin. Данная дока не является переводом или адаптацией чьих-то иных усилий: как авторство, так и любые щелчки по носу по праву принадлежат лишь автору в награду за его бессонную ночь (но не за "ночную сборку", не подумайте), ушедшую на написание этой статьи и (в значительно меньшей степени) создание собственно rails-app. Описанная далее последовательность команд выверена вполне добросовестно, придерживайтесь ее: приложение более-менее тщательно оттестировано.

Ранее мы анонсировали JupyterLite — дистрибутив JupyterLab, полностью запускаемый в браузере. Материалом, который будет полезен авторам документации библиотек Python, делимся к старту флагманского курса по Data Science.

В виду того, что мне срезали подписку на Medium решил поддерживать отечественные IT ресурсы. Попробую кидать интересные статьи с переводом на русском, а правообладатели пусть сами разбираются, я честно платил за подписку.

На текущий момент VS Code остается средой разработки, которая доступна в период санкций, когда JetBrains отказался продавать лицензии, про Visual Studio даже не узнавал. Сам использую VS Code много лет в разных стеках. VS Code предоставляет возможности разработки практически во всех направлениях: веб-разработка, мобильные приложения, часто встречаются приложения для встраиваемых систем. Ниже перечислены наиболее популярные расширения, которые облегчают разработку приложений.

Atom One Dark Theme

При всем изобилии тем в VS Code тема Atome One Dark наиболее популярная, потому-что имеет наиболее удачный контраст и прекрасно выглядит.

Многие компании при внедрении  практик gitops выбирают такой инструмент как ArgoCD и сталкиваются с проблемой заведения учетных записей и разграничением прав пользователей. В этой статье мы рассмотрим как настроить авторизацию в ArgoCD через Gitlab CI/CD с разграничением прав по группам.

Предлагаем пройти этот непростой путь по шагам и тогда он станет для вас простым. 

Итак, argocd уже установлен и настроен в вашем кластере.