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

Доброго времени суток, друзья!

Представляю вашему вниманию перевод Руководства по Node.js в формате одностраничного прогрессивного адаптированного приложения.

Данный формат означает следующее:

• SPA — новые данные (разделы или главы руководства) загружаются без перезагрузки страницы — реализовано с помощью динамического импорта
• PWA — приложение можно установить на мобильный телефон или компьютер; приложение работает даже при отсутствии подключения к сети — реализовано с помощью сервис-воркера и кэширования
• mobile-first — приложение предназначено для использования, в первую очередь, на смартфонах, но хорошо выглядит и на широких экранах

Посмотреть и установить приложение можно ЗДЕСЬ.

Код проекта на GitHub

Статья, перевод которой мы публикуем сегодня, посвящена 10 полезным инструментам, которые предназначены для веб-разработчиков. Автор материала считает, что это — как раз такие инструменты, которые позволяют, как говорится, «работать с умом, а не до ночи».

English Version
Vuecket — веб-фреймворк, интегрирующий VueJS с клиентской стороны и Apache Wicket с серверной. Он берет все самое лучшее от обоих и позволяет разрабатывать full-stack приложения еще быстрее и проще. Конечно, это всё громкие слова, ведь Vuecket'у на данный момент (Август 2020) меньше месяца, и он не прошел ещё крещение «огнем и кровью» продакшн серверов. Но он уже включил в себя всё самое лучшее из наработанного нами при разработке нашего ключевого Open Source продукта Orienteer(платформа для быстрой разработки бизнес приложений). И именно из-за молодого возраста Vuecket'у нужна ваша помощь: поделитесь, пожалуйста, тем, что вам понравилось, что не очень, где нужна доработка и т.д.

Основные принципы, которыми мы руководствуемся при построении Vuecket'а:

1. Быть декларативным — не императивным. Vuecket не диктует какие-то специальные требования к коду. Он может быть приложен достаточно быстро и легко к уже существующим Vue.JS или Apache Wicket проектам.
2. Следовать принципу Парето. Vuecket должен обеспечивать 80% нужного функционала из коробки, но для оставшихся 20% должны быть хорошие и удобные точки расширения.

Легко заметить, что эти принципы также применимы и к Vue.JS, и к Apache Wicket.

Итак, как именно мы будем знакомиться с Vuecket? Предлагаю сделать чат/гостевую доску с поддержкой Markdown. Не буду сильно томить: законченное приложение здесь, а код здесь.

Согласно аналитическим исследованиям, в марте 2020 года лидирующие позиции в рунете среди CMS заняли WordPress, 1С-Битрикс, Joomla!, OpenCart и Drupal. Разберемся, какие особенности у каждой системы, и рассмотрим, для каких проектов они подойдут.

С тех пор как вам доверяют не только кодить под строгим контролем, но и принимать даже минимальные решения, вы становитесь в полной мере ответственны за будущее проекта. В том числе, за стоимость его последующей поддержки. Имея опыт с действительно долгосрочными историями, мы собрали несколько советов о том, как не “стрелять в ноги” себе, своим коллегам и тем, кто придет на проект после вас.

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

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

UPD ЛАЗЕР ВЗЛОМАН!

Гиря, летящая в аквариум на сервер, его уничтожение, короткое замыкание и пожар через полтора часа, отсчет пошел. Enjoy the show!



Присоединиться к зрителям можно в дискорде.

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

Автор статьи, перевод которой мы сегодня публикуем, предлагает React-разработчикам отойти от использования create-react-app (CRA) и создать собственный шаблон для React-приложений. Здесь речь пойдёт о преимуществах и недостатках CRA, а так же будет предложено решение, которое способно заменить create-react-app.

5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.


В этой демке content-visibility: auto, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз

Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

1. Зачем нужен этот инструмент?
2. Какие задачи он выполняет?

Если вы не можете ответить на эти вопросы, возможно, вам не нужна изучаемая технология. Давайте попробуем ответить на эти вопросы применительно к Webpack.

Web-приложения всё больше "затачиваются" под мобильные устройства, а service worker'ы являются фундаментом прогрессивных web-приложений (PWA). При первом ознакомлении с данной технологией может сложиться впечатление, что основной задачей service worker'ов является кэширование контента. И это так. Задача service worker'ов — обеспечение функционирования web-приложения в условиях нестабильного или вообще отсутствующего подключения к Сети, что достигается при помощи кэширования данных.

Под катом пара мыслей о том, к каким последствиям для web-приложений привело появление возможности кэшировать данные посредством service worker'ов.

Сыграем в игру?



Вам наверное интересно, где вы окажетесь, кликнув на ссылку? Мы скажем вам где.

Это трансляция из офиса веб-студии Сокол, предоставляющей услуги подкроватного хостинга. Комната наполнена iot-устройствами, которые полностью управляются с сайта компании.

Владелец офиса уехал отдыхать на Бали, но успел построить продвинутую систему слежения и защиты от грабителей. Свои деньги, 200 000 рублей, честно заработанные на создании убогих сайтов, он засунул в шредер — только офис попытаются взломать, деньги начнут уничтожаться и не достанутся никому.

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

Там же вы видите, как меняется комната под управлением умных устройств. Вокруг вас спрятаны подсказки, которые помогут вам выйти победителями.

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

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

Ох, не зря в названии намёк на нетленку Фаулера. И когда фронтенд-приложения успели стать настолько сложными, что мы начали рассуждать о высоких материях? Node.js… фронтенд… погодите, но Нода же на сервере, это бэкенд, а там ребята и так всё знают!



Давайте по порядку. И сразу небольшой дисклеймер: статья написана по мотивам моего выступления на Я.Субботнике Pro для фронтенд-разработчиков. Если вы занимаетесь бэкендом, то, возможно, ничего нового для себя не откроете. Здесь я попробую обобщить свой опыт фронтендера в крупном энтерпрайзе, объяснить, почему и как мы используем Node.js.

Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «CS Visualized: CORS» автора Lydia Hallie.

Каждому разработчику приходилось сталкиваться с ошибкой Access to fetched has been blocked by CORS policy. Существует несколько способов быстрого решения данной проблемы. Однако, давайте не будем спешить и подробно рассмотрим, что из себя представляет политика CORS.

У нас часто возникает необходимость отобразить данные, находящиеся в другом месте. Прежде чем мы сможем это сделать, браузер должен отправить запрос на сервер, чтобы получить эти данные.

«Летом между 2 и 3 курсом я пошла искать работу — а в Новосибе того времени почти все вакансии для ребят без опыта были про PHP. Начинала с очень простых вещей — WordPress, Drupal… Потом писала бэкенды на Yii и много еще разного. Go впервые попробовала в 2014-м, вдохновившись докладом, и затем часто находила работу, связанную с разработкой на нем, через сообщество.

Считается, что Go гораздо проще поддерживать, чем PHP. Я не согласна. Видела очень много чистого, легко читаемого и поддерживаемого кода на PHP, а сейчас время от времени встречаю много плохо написанного кода на Go. Проблемы начинаются тогда, когда мы не следуем лучшим практикам языков и систем, которые разрабатываем… Или когда выбираем для своих задач не тот инструмент», — Елена Граховац, руководитель ПК GolangConf 2019 и соведущая подкаста GolangShow.


В эту субботу днем обсудим типичные ошибки выбора в стриме с Леной, Сашей Макаровым и другими замечательными людьми. Подключайтесь.

Если вы — программист, то я полагаю, что вы, наверняка, знаете о существовании чрезвычайно компактной и нетребовательной к ресурсам СУБД SQLite, или даже пользовались ей. Эта система обладает практически всеми возможностями, которых можно ожидать от реляционной СУБД, но при этом всё хранится в единственном файле. Вот некоторые сценарии использования SQLite, упомянутые на официальном сайте этой системы:

• Встраиваемые устройства и IoT.
• Анализ данных.
• Перенос данных из одной системы в другую.
• Архивирование данных и (или) упаковка данных в контейнеры.
• Хранение данных во внешней или временной БД.
• Заменитель корпоративной БД, используемый в демонстрационных или испытательных целях.
• Обучение, освоение начинающими практических приёмов работы с БД.
• Прототипирование и исследование экспериментальных расширений языка SQL.

В документации к SQLite можно найти и другие причины использования этой СУБД.



Данный материал посвящён использованию SQLite в Python-разработке. Поэтому для нас особенно важно то, что эта СУБД, представленная модулем sqlite3, входит в стандартную библиотеку языка. То есть оказывается, что для работы с SQLite из Python-кода не нужно устанавливать некое клиент-серверное ПО, не нужно поддерживать работу какого-то сервиса, отвечающего за работу с СУБД. Достаточно лишь импортировать модуль sqlite3 и приступить к его использованию в программе, получив в своё распоряжение систему управления реляционными базами данных.

Мы часто читаем о бэст практикс в программировании, о новых функциях фреймворков или о том, что нового в очередной версии PHP. Читаем, как поменять «то на это», почему какая-то техника хороша или плоха, или какой новый пакет вы можете использовать в своём проекте. Но всё это — рассуждения только о прошлом или настоящем.

Сейчас я заканчиваю чтение книги «The Inevitable», написанной основателем журнала Wired, речь в которой исключительно про будущее. Вдохновившись этой книгой, предлагаю посмотреть на будущее программирования.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Подборка новых статей по фреймворку Laravel. Новая версия с исправлением двух уязвимостей. Книга по оптимизации приложений. Рилтайм чат на сокетах. Соблюдение SRP в Laravel.