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 для создания веб-приложений на основе переиспользуемых компонентов.
Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство 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. В этой статье расскажу о нашем пути от большого монолита до так называемых "микрофронтендов".
В этой статье мы рассмотрим основные принципы миграции БД без даунтайма и дадим быстрые рецепты для наиболее распространенных случаев.
Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая.
— Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5.
— Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений.
– Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например, import test from 'node:test';. Не все базовые модули на данный момент будут использовать через префикс, например fs.
– Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научитесь делать пуш-уведомления полезными.
Больше новостей и статей под катом. Хватит почитать на все майские!
Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.
В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки!
В этой статье я постарался рассмотреть Shopify как с точки зрения разработчика, так и обычного пользователя, поделившись своим опытом и наблюдениями при работе с разными темами. Если вы еще не знакомы с Shopify, я также постараюсь донести основную информацию, необходимую для работы с темами и разработки магазинов на этой платформе.
Несколько лет назад во время учебы я достаточно активно брал фрилансерские заказы и поработал тогда с различными движками для создания сайтов. Постепенно я свел подобные заказы к минимуму - когда ко мне обращаются сделать небольшой сайт на WordPress или сверстать одностраничник, то я стараюсь либо перенаправить на кого-то из знакомых, либо отказываюсь. Иногда, всё-таки, я за что-то берусь от скуки или если присутствует какой-нибудь интерес. И вот об опыте выполнения одного из таких заказов будет рассказано далее.
Привет Хабр! Последняя статья про инструменты для профилирования php датируется аж 2018 годом. Но все перечисленные решения разработаны много лет назад и имеют недостатки: древний интерфейс btp (аналог pinba), оверхед xhprof и необходимость ручного запуска phpspy на stage.
Я тимлид в рекомендательном сервисе Zoon и перед моей командой стояла цель найти инструменты, которые профилируют весь код на проде 24/7 и хранят данные. Инструменты, с которыми могут работать рядовые разработчики, без доступа к проду. Инструменты, которые позволяют находить "бутылочные горлышки" за 30 секунд.
В конце 2021 года показался свет в конце туннеля, в виде системы на основе семплирующего eBFP профайлера: prodfiler.
С какими трудностями мы столкнулись при настройке и что вышло в итоге - под катом.
