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

Прошло уже почти 2 недели с момента презентации next 11. К сожалению, эта новость обошла хабр стороной и пора бы это исправить. Сперва немного о презентации. Восьмого числа, узнав про ивент, не теряя ни минуты, я пошел на него регистрироваться. Это был сайт, на котором странным образом были видны цветные курсоры и время от времени рядом с ними печатался текст. Немного поразмышляв и прочитав первые комментарии стало понятно, что передо мной такие же участники этого события. Неплохое и многообещающее интро. Однако, это был, пожалуй, единственный намек на то, чего стоит ждать от презентации. Веб-серфинг не принес никаких результатов и не удалось найти ни единого слова. Конечно же, используя next последние несколько лет можно было примерно представлять, какие технологии должны вот-вот появиться с полноценной поддержкой, понять, кто будет помогать в их реализации и какие цели будет преследовать компания, но все же, vercel умеет удивлять.

Пару слов о технологии, если кто-то умудрился обойти ее стороной. Next – backend-фреймворк для… Инкрементальной сборки, Серверного рендеринга, статической генерации или гибридного варианта приложений, построенных на react. Созданием занималась компания zeit, имеющей к 2016г. утилиту now. Затем, в 2020 году, после инвестиций в 21 млн$, компания была переименована в vercel, а утилита now (переименованная также в vercel) переросла в веб-сервис с дополнительным функционалом для выкладки приложений, в первую очередь, построенных на next, но также nuxt, Gatsby, angular и многих других популярных инструментов.

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

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

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

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

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

Установка

Приложение я оформил в виде docker контейнера, поэтому запустить его у себя на машине не должно составить труда. Также можно запустить приложение из исходников, инструкция есть в репозитории.

Итак, для запуска приложения у себя на компьютере нужно выполнить следующие команды:

docker pull lingtrain/aligner:habr
docker run -p 80:80 lingtrain/aligner:habr

Контейнер скачается с репозитория Docker Hub и запустится на 80-м порту. Откроем приложение в вашем любимом браузере по адресу localhost.

Сделаем три шага: загрузка, выравнивание, генерация.

Привет! Меня зовут Андрей, я Backend Node.JS разработчик в одной из зарубежных компаний, занимающихся разработкой системы для администрирования офисов. Наше приложение и его веб-версия предоставляют арендодателям возможность отслеживать заполненность офиса, обеспечивать подключение IoT-устройств для отслеживания, например, количества еды в холодильниках или остатка воды в кулерах, выдавать пропуски для сотрудников в своё здание и много чего другого. Одним из важнейших узлов в этой системе является API как для внутренних пользователей, использующих приложение или веб-сайт, так и для клиентов, использующих наше Whitelabel решение. Всего в нашей системе зарегистрировано более двух сотен API эндпоинтов, для построения которых мы использовали фреймворк NestJS. Если вы по какой-то причины ещё не слышали про Nest, то я настоятельно рекомендую ознакомиться со статьёй NestJS - тот самый, настоящий бэкенд на nodejs. Одной из основных и наиболее значимых особенностей NestJS является нативная поддержка декораторов, что в свою очередь позволяет создавать эндпоинты декларативно.

Библиотека React Intl предоставляет механизм для перевода текста на другие языки.

В данном "туториале" мы используем названную библиотеку для реализации интернационализации в проекте, написанном на React. Мы создадим простое приложение, позволяющее пользователю выбирать язык приложения.

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

Те из верстальщиков кто часто клепает формы регистрации или обратной связи обязательно столкнутся с задачей по выводу множественного выбора результатов - multiselect. К сожалению, не все элементы тега <select> все ещё можно из коробки стилизовать по желанию дизайнера. В этом маленьком уроке я хотел бы поделиться своим опытом решения данной проблемы на базе знания CSS и немного ванильного JS.

Во время карантина, который то ослабевает, то активизируется с удвоенной силой, появилось огромное множество новых профессий. Сторисмейкеры, инфопродюсеры, специалисты по запускам инфопродуктов и прочие неведомые звери - все они освоили новую работу, которая смогла прокормить их в пандемию. Нанимаете сторисмейкера, который прошел какие-то курсы (дай бог, нормальные, а не от инфоцыган) - он пилит за вас вовлекающие истории в Инстаграм и ваш курс продается. С контентмейкерами та же история - просто нанимаете такого человека, он вам и шапку профиля везде оформит, и на каком-нибудь Геткурсе уроки упорядочит, и статьи напишет, которые тоже помогут в продвижении курсов. Полный полет фантазии: если вам кажется, что какой-то профессии не существует, значит вы просто мало сидите в интернете. В принципе онлайн-работа популяризировалась и теперь уже вряд ли кто-то скажет: "Да он фигней какой-то занимается - ТикТоки свои снимает, а лучше бы на заводе вкалывал!".

В 2020 году автор оригинальной статьи решил написать более эффективную библиотеку PJAX, похожую на проект Rezo Zero — Starting Blocks, но так, чтобы легко работать с barbajs. Он понимал, что Starting Blocks легче расширить с помощью настраиваемых функций и их можно сделать более плавными, быстрыми и простыми в использовании. Со временем намерения автора изменились, и он начал замечать, как часто сайты с awwwards.com используют PJAX, но также часто мешают естественному восприятию сайта и браузера.

Многие сайты на первый взгляд выглядели круто, но если вы работали с ними долго, то это была другая история — полосы прокрутки часто переопределялись, предварительное извлечение часто было слишком активным и не оптимизированным для людей без мощного подключения к Интернету, ЦП и/или графических процессоров. К старту курса о Fullstack-разработке на Python делимся переводом обзора библиотеки @okikio/animate от её автора. На КДПВ вы видите первый кадр любопытной анимации из демо к библиотеке, эта анимация работает в закреплённой шапке сайта.

Когда-то вы кодили на одном большом и могучем серваке, с кучей памяти и кучей процов. Сервер был безграничен, все ваши сервисы были здесь, все ваши Redis’ы и даже зачастую MySQL-и были тут. Все ваши приложения были здесь же: какая-то аналитика, какой-то бэкенд для админки, еще десяток сервисов — все было рядом. 

Но вот вы заехали в Swarm. Все приложения — это набор контейнеров. А контейнеры это, по сути, набор микросерверов со своей файловой системой, своей памятью, своими процами. И они уже не всегда рядом. Соответственно, это тянет за собой некоторые изменения. 

Вы когда-нибудь слышали об XSS-атаках, связанных с внедрением (инъекцией) вредоносного кода в DOM (далее — DOM XSS)? Если не слышали, то

DOM XSS — это тип атаки на веб-приложение, когда хакер использует полезную нагрузку (payload), которая выполняется как результат модификации DOM в браузере.

Это может привести к тому, что на стороне клиента будет выполнен посторонний код. Таким образом, на стороне клиента появляется уязвимость безопасности. Злоумышленники используют объекты, позволяющие внедрять вредоносную полезную нагрузку. Вот почему такие атаки называются инъекциями.

Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!

В компании Outsourcify мы работаем над проектами разного размера: от небольших сайтов, состоящих из нескольких страниц, до сложных бизнес-приложений. В зависимости от конкретного случая мы рекомендуем клиентам разные технические решения (например, мы пишем много одностраничных приложений на JavaScript и работаем с WordPress), но в самых сложных сценариях, когда разрабатываются крупные веб-приложения, занимающие группу разработчиков на несколько недель или месяцев, мы отдаем предпочтение фреймворку Symfony.

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Что такое CSS Grid?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.

С июля 2018 Google начали учитывать скорость страниц в выдаче. В ноябре 2019 года они добавили отчет о скорости страниц в личный кабинет Web Search Console. В июне 2021 они ужесточили критерии PageSpeed, подняв влияние Total Blocking Time (TBT) с 25% до 30% и Cumulative Layout Shift (CLS) с 5% до 15%.

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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