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

Недавно мы провели онлайн-шоу «Ошибка выжившего» с автором Allure/Allure 2 Артемом Ерошенко. Если вы еще не видели его, обязательно посмотрите запись эфира.

А уже 8 мая мы ждем вас на следующем выпуске «Ошибки», где мы с Артемом обсудим будни тестировщиков и ответим на ваши вопросы в прямом эфире.



Под катом — все детали и ссылка на регистрацию.

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

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

Окружение JupyterLab

Проект Jupyter уже несколько лет прилагает усилия к тому, чтобы закрыть разрыв между блокнотами и обычными IDE. Эти усилия, в значительной мере, представлены платформой JupyterLab, которая даёт разработчику более совершенный и удобный интерфейс, в который входят менеджер файлов, текстовые редакторы, консоли, блокноты.

Правда, до недавнего времени в JupyterLab кое-чего не хватало. Речь идёт о том, что являло собой главную причину, по которой пользователи вынуждены были переключаться на другие среды. Пользователям Jupyter не хватало визуального отладчика. Пользователи, особенно те из них, которые привыкли к обычным IDE, долго просили об этой возможности.

Добрый день, хабровчане! Не так давно я опубликовал перевод статьи "Полностью отзывчивый дизайн — это больше, чем просто медиа-запросы". В той публикации я пообещал рассказать вам, как я применял данную технику в своем проекте, с чем мне пришлось столкнуться и все связанные с этой техникой особенности, на которые обязательно стоит обратить внимание при разработке. В сегодняшней публикации я постараюсь выполнить свое обещание. Если вам интересен опыт практического использования техники отзывчивых шрифтов в реальном проекте, прошу под кат.

Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Grid Template Areas» автора Rachel Andrew

При использовании CSS Grid, вы можете располагать элементы на сетке, указывая начальную и конечную grid-линии. Однако, существует и другой, более наглядный способ описания разметки. В этой статье мы узнаем, как использовать свойство grid-template-areas для размещения элементов на сетке и выясним, как оно в действительности работает.

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

Вывод отзывчивых изображений предусматривает применение достаточно сложной логики. Сюда, кроме прочего, входит определение того, изображение какого размера будет выведено, а также выяснение того, работает ли пользователь с экраном высокого разрешения. К счастью, браузеры лучше, чем люди, умеют определять то, какие именно изображения лучше всего подходят каждому конкретному пользователю. Всё, что нам нужно — это дать им некоторые подсказки. Атрибут srcset даёт браузеру список графических ресурсов, из которых он может выбирать наиболее подходящее изображение. Атрибут sizes позволяет сообщить браузеру о том, изображение какого размера нужно показать в том или ином случае.



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

Перевод Understanding CSS Grid: Grid Lines» Rachel Andrew

В первой статье из серии "Понимание CSS Grid" мы рассмотрели, как создавать родительский grid-контейнер и различные свойства, применяемые к данному элементу. Когда сетка создана, в нашем распоряжении оказывается набор grid-линий. В этой статье вы узнаете, как располагать элементы вдоль данных линий путём добавления свойств к дочерним элементам grid-контейнера.

Мы охватим следующие моменты:

1. Свойства размещения элементов grid-column-start, grid-column-end, grid-row-start, grid-row-end и их краткие формы записи grid-column and grid-row
2. Как использовать grid-area для размещения элементов по номерам grid-линий
3. Как располагать элементы с помощью именованных линий
4. Отличие в размещении элементов в явной и неявной сетке
5. Использование ключевого слова span с небольшим бонусом subgrid
6. Чего следует остерегаться при одновременном использовании ручного и автоматического размещения элементов

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



В этом материале я расскажу обо всём, что нужно знать о стилизации выделений средствами CSS. В частности, речь пойдёт о псевдоэлементе ::selection и о свойстве user-select. Эта статья направлена на то, чтобы показать всем желающим возможности CSS по работе с выделениями, и на то, чтобы рассказать о том, когда и как использовать разные методы работы с выделениями.

Привет, Хабр! Представляю вашему вниманию перевод статьи «To Wash It All Away» автора James Mickens.



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

Свежая подборка со ссылками на новости и материалы. В выпуске: 4 принятых RFC предложения для PHP 8, включая атрибуты (аннотации / декораторы), порция полезных инструментов, онлайн-конференции и митапы, видео, подкасты и многое другое.

Приятного чтения!

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

Сегодня мы с вами, как следует из названия, напишем простое приложение для формирования и хранения заметок.

Возможности нашего приложения будут следующими:

1. Создание заметки.
2. Хранение заметок.
3. Удаление заметки.
4. Отметка о выполнении задачи.
5. Информация о дате выполнения задачи.
6. Напоминание о необходимости выполнения задачи.

Приложение будет написано на JavaScript.

Заметки будут храниться в индексированной базе данных (IndexedDB). Для облегчения работы с IndexedDB будет использована эта библиотека. Как заявляют разработчики данной библиотеки, она представляет собой «тоже самое, что и IndexedDB, но с промисами».

Предполагается, что вы знакомы с азами IndexedDB. Если нет, то прежде чем продолжить рекомендую прочитать эту статью.

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

Итак, поехали.

На собеседовании многие начинающие (и не только) претенденты на позиции, связанные с HTML, неожиданно понимают, что не могут ответить на одни и те же типовые, и казалось бы, элементарные вопросы. Но ведь когда-то этому должен настать конец? Думаю, ответ на этот вопрос вы точно знаете.

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

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

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



Компании хотелось сделать так, чтобы посетители их виртуальных мероприятий, ни на что не отвлекаясь, и нигде не застревая, видели бы самое главное. А именно — идеи представляемых публике стартапов, выраженные в виде содержимого веб-страниц. Виртуальные демонстрационные дни могут быть интересны достаточно широкой аудитории. Некоторые представители этой аудитории, возможно, впервые принимают участие в чём-то подобном. Поэтому компании нужно было сделать всё самым лучшим образом и обеспечить высокую скорость загрузки страниц, представляющих стартапы. Они решили, что это — как раз тот случай, когда им может пригодиться высокопроизводительное прогрессивное веб-приложение (PWA, Progressive Web App). Главный вопрос заключался в подборе подходящей технологии для разработки PWA.

Привет, Хабр!

Мне давно хотелось добавлять в любые проекты Spring-анимации. Но делал я это только для React-проектов с помощью react-spring, так как не знал ничего другого.

Но наконец я решил разобраться, как оно все устроено и написать свою реализацию!

Если вы тоже хотите использовать Spring-анимации везде, заходите под кат. Там вы найдете немного теории, реализацию Spring на чистом JS и внедрение Spring-анимации во Vue с помощью компонентов и composition-api.

Привет, Хабр! Представляю вашему вниманию перевод статьи «Creating A VR Audio/Visual Experience On the Web With A-Frame and Tone.js» автора Sean Sullivan.



A-Frame — это фреймворк для создания виртуальной реальности в вебе. Используя лишь ссылку, любой человек с VR-шлемом или поддерживающим VR смартфоном может погрузиться в 3D пространство. Tone.js — это JavaScript библиотека для создания звуков. Давайте взглянем, что будет, если их совместить.

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

В этой статье мы с вами, как следует из названия, напишем простой калькулятор на JavaScript.

Желание написать калькулятор возникло у меня после просмотра одного туториала, посвященного созданию «simple calculator», который оказался далеко не симпл и толком ничего не умел делать.

Наш калькулятор будет true simple (42 строки кода, включая пробелы между блоками), но при этом полнофункциональным и масштабируемым.

Для расчетов будет использоваться эта замечательная библиотека (Math.js).

Без дальнейших предисловий, приступаем к делу.

В статье "Contemporary Front-end Architectures" рассмотрены архитектуры фронт-энда с точки зрения потоков данных в исторической ретроспективе.

Материал состоит из трех частей

1. Теория и история
2. Реализация

3. Перспективы

Каждый JavaScript-проект начинается с благих намерений, заключающихся в том, что его создатели обещают себе не использовать слишком много NPM-пакетов в ходе его разработки. Но даже если разработчики прилагают немалые усилия к тому, чтобы сдержать это обещание, NPM-пакеты постепенно проникают в их проекты. Размер файла package.json со временем растёт. А с package-lock.json после установки зависимостей происходит настоящий ужас, выражающийся в добавлениях и удалениях пакетов, особенно заметных при очередном PR…



«Всё нормально», — говорит тимлид. Остальные члены команды согласно кивают. А что ещё делать-то? Нам всем хорошо от того, что экосистема JavaScript жива и здорова. Нам не надо каждый раз изобретать колесо и пытаться решать задачи, уже решённые сообществом опенсорса.

Предположим, вы собираетесь сделать блог и хотите воспользоваться Gatsby.js. Попытайтесь добавить этот генератор сайтов в зависимости своего проекта. А теперь — принимайте поздравления. Только что в вашем проекте оказалось 19000 дополнительных зависимостей. Это нормально? Насколько сложным может стать дерево JavaScript-зависимостей? Как дерево зависимостей превращается в ад? Давайте с этим разберёмся.

Всем привет.

Работа с API не обходится без взаимодействия с HTTP-запросами. Кто-то не заморачивается и использует глобальные массивы $_GET, $_POST и $_REQUEST. Признаться, сам так делал, но не так давно озадачился мыслью о необходимости какой-нибудь обёртки для удобства использования. Может быть, подобные библиотеки уже и есть, но я их пока не нашёл, кроме как в API Битрикса (возможно, плохо искал), а посему решил написать свою. К тому же согласитесь, что гораздо приятнее использовать свои библиотеки при работе с кодом.

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