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

Если вам нужен SSL-сертификат, но вы не являетесь специалистом в веб-технологиях, то эта заметка для вас. Описан простой способ выпуска базового SSL-сертификата Let’s Encrypt в ручном режиме, на локальном компьютере с Windows, с помощью приложения Certbot. Этот способ позволяет получить файлы SSL-сертификата в папку на своём локальном компьютере, после чего можно установить сертификат на свой хостинг.

Потребность в SSL-сертификатах возникла у меня в связи с тем, что срок старых истёк, а создать новые оказалось невозможным из-за возникших ограничений на доменные зоны RU и РФ. Если у вас такая же проблема или вам просто надоело искать веб-сервис для выпуска SSL-сертификатов, то эта заметка вам поможет.

Поскольку я пока не знаю наилучшего пути, то ниже просто опишу ту последовательность действий, которую сам выполнил и которая позволила мне создать SSL-сертификаты для десяти своих доменов (в том числе в зонах RU и РФ), а значит и вам этот способ может помочь.

Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.

В далеком 2016 году я твердо решил осуществить свою мечту – делать игры, несмотря ни на что. Было много всего, но пока самой успешной является викторина по фильмам со своеобразным юмором – УГАДАЙ по БУГУРТУ. 

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

Что написать на кнопке: “с вас тысяча рублей” или “подайте на хлебушек”? Влияют ли мемасы на продажу платных сервисов? Какую таблетку пользователи предпочитают чаще – красную или синюю? А если предложить им зелёную, то поползут ли метрики вверх? На эти вопросы можно получить ответ, если проводить А/В-эксперименты и growth hack-сессии.

Меня зовут Денис, я бэкенд-разработчик в hh.ru. Эта статья о том, как мы проводим и анализируем различные эксперименты. Дам немного теории, слегка обрисую внутреннюю кухню и расскажу с какими проблемами могут столкнуться команды, которые только внедряют у себя А/В-эксперименты. 

Добрый день всем, дорогие читатели!

На начало написания статьи я только успел обдумать общие подходы и немного опробовать эту идею и понятия не знаю, чем это закончится. Она может оказаться полностью бесполезной тратой времени, может вообще не иметь возможности реализоваться, может получиться хорошим обучающим материалом для опытных программистов, а может и привнести новые идеи в запутанную профессию Архитектора ПО. Посмотрим, что получится: я не буду кардинально править уже написанные части статьи, чтобы сохранить эту атмосферу неизведанного.

Если вы хотя бы чуть-чуть имели неудачу пообщаться с Архитекторами, то знаете, что в их понимании не существует идеальной архитектуры ПО и вся их работа состоит во взвешивании плюсов и минусов того или иного Архитектурного стиля. И поскольку Архитектурных стилей много и каждый имеет свои преимущества (даже Монолит) и недостатки (даже Микросервисы) - работа архитектора состоит в попытках применения данных стилей на конкретный продукт и попыток предугадать, что из этого получит в итоге для бизнес-части.

Как сказал мой добрый друг-программист про Factorio: "Эту игру создали программисты для программистов" и эти слова плотно въелись в мою память. И реально игра в эту игру очень сильно напоминает процесс разработки ПО: можно просто строить как попало и прийти к полностью запутанной и сложнообслуживаемой системе, а можно подойти к вопросу с умом изначально и в итоге получить производительную и легкую в обслуживании систему (Прям как в жизни!)

Pinia vs Vuex: Ананасовый экспресс сижу код пишу!

Pinia, легковесная библиотека управления состояниями для Vue.js, приобрела популярность в последнее время. Она использует новую систему реактивности во Vue 3 для создания интуитивно понятной и полностью типизированной библиотеки управления состояниями.

4 года назад я решила уйти из маркетинга и начать работать фронтенд-разработчиком. Расскажу о том, как искала первую работу, как жила на 30 тысяч в Москве, как обучалась, как устроилась фронтом в Prequel и что сделала бы иначе, окажись в той же ситуации. Также всем желающим могу рассказать, как выровнять блок по вертикали))

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

Как все начиналось

В далеком 2007 году я заканчивала экономический факультет Тверского университета, у нас был курс информатики на семестр, где 3-4 занятия были посвящены html и css. Преподаватель объяснила основы табличной верстки, без адаптива, на уровне “Цвет текста можно поменять вот так, а картинку вставить вот так”. Далее в голодные студенческие годы я начала заниматься фотографией и для поиска клиентов сделала свой первый сайт на Joomla. Отсутствие способностей к дизайну, несколько лекций по табличной верстке и случайно купленная книжка с маркетинговым названием “Как сделать сайт, продвинуть его и начать зарабатывать” дали свой ужасающий по стилю, но вполне работающий результат.

Вычитанные в этой книге советы по SEO сработали, удалось продвинуться по некоторым средне- и низкочастотным запросам, например, “деловая фотосессия”, помогло еще и то, что я жила в городе на 400 тысяч человек с умеренной конкуренцией в фотографии. Однако после универа и переезда в Москву заниматься фотографией стало сложнее – отработать полную неделю в Москве, а на выходных встать в 5 утра на съемку свадьбы было тяжеловато физически. В одну из суббот, отсняв армянскую свадьбу на 200 человек, я осознала, что с фото пора завязывать.

Дальше была попытка работать по специальности, однако я снова пришла к SEO и 2,5 года отработала в агентстве SEO-шником, но со временем меня перестало устраивать, что в оптимизации сложно отследить точное влияние своих действий на результат. Одновременно вокруг росло количество курсов, обещающих, что ты станешь Senior Java Developer за 2 недели (нет) и друзей-программистов, обещающих 150к уже через полгода (нет, нет, нет).

Я самоуверенно решила, что верстку и так знаю, купила книгу по JavaScript и начала читать и делать упражнения. Дополнительно посмотрела пару уроков на Youtube “Как сделать сайт за 2 часа”, повторила за авторами, получила несколько лендингов. Через пару месяцев отправилась на поиски работы, сайтики с видео-уроков представила как свое портфолио, но не скрывала, что сделаны по обучающим видосам.

Технология WebAssembly появилась относительно недавно (в 2015 году) и позиционировалась как альтернатива JavaScript для выполнения в среде браузера с максимально достижимой производительностью. Приложение на WebAssembly может использовать все возможности, доступные в "песочнице" браузера для JS (доступ к Document Object Model, дополнительным классам HTML5), но при этом может быть изначально написано на других технологиях разработки и скомпилировано в формат байт-кода WASM, предоставляя свои интерфейсы сценариям на JavaScript.

Наиболее известным набором инструментов для компиляции в wasm32 является emscripten, с его помощью можно скомпилировать приложение, написанное на C/C++ или на любом языке, имеющим frontend-компилятор для LLVM. При этом компилятор подменяет вызовы OpenGL и POSIX на соответствующие аналоги в браузере, что например используется при компиляции библиотеки skia для браузера (canvaskit) из исходного кода на C++, а также портирование существующих библиотек (например, ffmpeg или opencv). Но некоторые языки программирования поддерживают wasm32 как одну из целевых платформ, среди которых можно выделить Kotlin (Native) и Go. В этой статье мы обсудим общие вопросы о запуске приложений Go в среде браузера и использование библиотеки Vecty для создания веб-приложений на основе переиспользуемых компонентов.

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

Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.

Академия началась 10 лет назад с интерактивных тренажёров по вёрстке, которые сделал Саша Першин. Через год появились полноценные интенсивные курсы для верстальщиков, а чуть позже добавились курсы по JavaScript, React и PHP. 

Всё это добро нужно было кому-то вести — сначала всё делали Саша и Лёша Симоненко, а потом их сменили другие авторы. Некоторых вы и без меня хорошо знаете — например, Вадима Макеева, который несколько лет вёл в Академии курсы по HTML и CSS. А всего за 10 лет у курсов Академии было 14 авторов. При этом автор — не наставник и не преподаватель в привычном смысле. Он не занимается отдельно с каждым студентом и не проверяет домашние задания и итоговые проекты. 

Чтобы узнать, чем на самом деле занимаются авторы, я подловил их в тёмном коридоре и задал кучу неудобных вопросов. Поговорили о работе авторов, секретах профессии, бесящих студентах, революциях в вебе, HTML 6, замене JavaScript и ответственности за судьбы людей.

Если вы работали на macos в docker окружении, то наверняка сталкивались с проблемой в производительности, например, при работе над php проектом, операции с файловой системой (обновление пакетов composer, ребилд контейнеров symfony, etc.) занимают просто неадекватное количество времени. Об особенностях работы docker'а на macos написано уже множество статей, а также workaround'ов как заставить его работать быстрее. В этой небольшой статье покажу как в решении этой проблемы Mutagen помог мне с php проектом и быть может поможет вам.

Сегодня в этой статье я хочу поделиться личным опытом работы и решением конкретного кейса. Как подружить сервер авторизации на протоколе OpenId Connect и веб-приложения, накрытых обратным прокси-сервером YARP.

Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских.

Горячее

Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax().

Узнайте о JavaScript контейнерах.

Что случится если вы откажетесь от React?

Ещё один сайт на HTML. Да, так тоже можно.

Остальные новости и статьи — под катом.

Дисклеймер: Нет, это не дайджест авторства Романа Пронского. К сожалению, у меня нет достоверной информации - будет ли выходить его дайджест далее.

Однако я взял на себя смелость временно продолжить дело Романа и написать новый дайджест за тот месяц, что прошел с выхода последнего.

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

"Это пшеница, что в темном чулане хранится, в доме, который построил Джек"

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

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

Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

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

Современный фронтенд – больше чем просто формы и стили. Это сложные модели, композитные компоненты, графики, интерактивные редакторы, системы локализации на несколько языков и многое другое.

Для развития и поддержки такого левиафана требуется много разработчиков — чтобы писали ещё больше кода. Крупнеет команда, растёт кодовая база – работать с монолитом становится всё сложнее и сложнее. Казалось бы: выхода нет — сиди и страдай, но мы смогли выпутаться из этой непростой ситуации.

Меня зовут Влад Коротун, я ведущий фронтенд-разработчик в одной из продуктовых команд hh.ru. В этой статье расскажу о нашем пути от большого монолита до так называемых "микрофронтендов".

В этой статье мы рассмотрим основные принципы миграции БД без даунтайма и дадим быстрые рецепты для наиболее распространенных случаев.