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

Занимаетесь ли вы торгово-коммерческой деятельностью, оказываете ли услуги или производите продукцию, наступает момент, когда мысли о собственном сайте перерастают в готовность заняться этим вопросом. И первая задача, которую предстоит решить – определиться с исполнителем. Кому доверить разработку сайта?

Определяем цели ресурса

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

Новый браузер Edge от Microsoft на движке Chrome недавно пополнил зоопарк «основанных на Chromium браузеров». Но его выгодно отличает от остальных то, что он идет в комплекте с Windows. А это значит, что все тесты работы ноутбуков от батареи будут проводить именно с ним, и Microsoft придется очень внимательно за этим следить. От полного перехода на Edge меня останавливал неработающий режим «offline» в гугловом офисе: документах, таблицах и презентациях. Незаменимая штука в полетах и поездах. Но теперь, когда в Edge можно устанавливать расширения для Chrome, несколько несложных манипуляций позволяют обмануть сервисы Google и заставить оффлайн режим работать!

Аудио версия на русском (яндекс.музыка) / iTunes

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

Прежде чем я начну объяснять, почему миру нужны разработчики CSS, мы должны вернуться назад и посмотреть на историю CSS.

Хочу поделиться с вами, как я при помощи «молота и наковальни» делал проект для планирования открытия заведений в сфере общепита, эдакий to-do планировщик. Почему «молота и наковальни»? Так это потому, что я только год назад начал программировать, и сейчас использовал только базовые html, php и js (jquery).

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

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



Код веб-страницы традиционно состоит из трех разделов, каждый из которых выполняет свои обязанности: HTML-код определяет структуру и семантику, CSS-код определяет внешний вид, а JavaScript-код определяет его поведение. В командах с участием дизайнеров, HTML / CSS разработчиков и JavaScript-разработчиков это разделение получается естественно: дизайнеры определяют визуальные элементы и пользовательский интерфейс, разработчики HTML и CSS размещают эти визуальные элементы на странице в браузере, а JavaScript-разработчики добавляют взаимодействие с пользователем, чтобы связать все вместе и «заставить это работать». Каждый может работать над своими задачами, не вмешиваясь в код остальных двух категорий разработчиков. Но все это справедливо для так называемого «старого стиля».

Недавно меня попросили подправить один лендинг. Среди того, что я нашла в его коде, было изображение, поверх которого были расположены два перекрывающих его полупрозрачных элемента. Оба — с одними и теми же RGB-значениями цвета в свойстве background-color. Выглядело это примерно так:

<img src='myImage.jpg'/>
<div class='over1'></div>
<div class='over2'></div>

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



В результате я решила избавиться от одного из слоёв и задать параметр opacity оставшегося так, чтобы внешне изображение выглядело так же, как и прежнее. Всё это хорошо, но тут возник вопрос: как настроить параметр opacity оставшегося элемента так, чтобы результат был таким же, как при применении двух полупрозрачных слоёв?

Всем привет! Сегодня я попробую поэкспериментировать с Dependency Injection на чистом JavaScript. Тех кто не в курсе, что это за дичь и как ее готовить, приглашаю ознакомиться. Ну а у тех кто в курсе будет повод написать важный и полезный комментарий. Итак, погнали…

Недавно я работал над современной реализацией блогролла (перечня внешних полезных/интересных блогов). Замысел был в том, чтобы предоставить читателям подборку из последних постов в этих блогах, упакованную в журнальную вёрстку, а не сухой список ссылок в сайдбаре.

Самая простая часть задачи — получение списка постов и их эксцерптов (эксцерпт — вступительный текст до ката) с наших любимых RSS–фидов. Для этого мы воспользовались WordPress-плагином Feedzy lite, который умеет агрегировать несколько фидов в один список, отсортированный по времени — идеальное решение в нашем случае. Трудная же часть в том, чтобы сделать всё красиво.

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

Это — один из тех случаев, когда «фреймворк является быстрым, а код — медленным».



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

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

Журналисты ежедневной американской деловой газеты «Уолл-стрит джорнэл» пишут, что «в этом финансовом эксперименте не пострадало ни одно животное, но эго некоторых человеческих существ было сильно уязвлено».


Вместо обезьяны всё сделает JavaScript

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

Предлагаю повторить эксперимент в домашних условиях, тем более что живая обезьяна после прочтения этой статьи вам не понадобится — JavaScript всё сделает в лучшем виде.

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

В статье приведу код эксперимента и дам ссылку на гитхаб.

На днях внимательная коллега (спасибо, Лена) зарепортила странный баг — сервер нормально ставил куку в браузере, но обратно она не прилетала. Днём ранее всё работало, теперь же кука выставлялась, но спустя несколько секунд магическим образом пропадала (хотя должна держаться сутки). Воспроизводилось это всего у нескольких человек в команде и только в новом Chrome 80, но у остальных в Chrome точно такой же версии всё было в порядке. В других браузерах всё работало как часы. Мистика. Начали разбираться, и спустя какое-то время в консоли Chrome заметили предупреждение для заголовка ответа, устанавливающего куки:

A cookie associated with a cross-site resource at _your_domain_ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`.

Начали изучать что это такое, и постепенно стало понятно, как ошибка возникла и почему проявлялась не у всех. Поскольку наш сервис должен обрабатывать запросы с разных доменов, то SameSite — как раз наш случай. Добавили SameSite=None; Secure, и проблема для нас решилась.

Почему так?

Для PHP есть хорошие утилиты статического анализа: PHPStan, Psalm, Phan, Exakat. Линтеры хорошо выполняют свою работу, но очень медленно, потому что почти все написаны на PHP (или Java). Для личного использования или небольшого проекта это нормально, но для сайта с миллионами пользователей — критический фактор. Медленный линтер замедляет CI pipeline и не даёт возможности использовать его в качестве решения, интегрируемого в текстовый редактор или IDE.



Сайт с миллионами пользователей — это ВКонтакте. Разработка и добавление новых функций, тестирование и починка багов, ревью — все это должно проходить быстро, в условиях жестких дедлайнов. Поэтому хороший и быстрый линтер, который сможет проверять кодовую базу на 5 млн строк за 5−10 секунд, незаменимая вещь. 

Подходящих линтеров на рынке нет, поэтому Юрий Насретдинов (youROCK) из ВКонтакте написал свой в помощь командам разработки — NoVerify. Это линтер для PHP, который написан на Go. Он работает в 10-30 раз быстрее аналогов, может находить то, о чем не предупредит PhpStorm, легко расширяется и хорошо интегрируется в проекты, в которых раньше не слышали о статическом анализе. 

Об этом линтере расскажет Искандер Шарипов. Под катом:как выбирали линтер и предпочли написать свой, почему NoVerify такой быстрый и как устроен изнутри, почему написан на Go, что может находить и как расширяется, на какие компромиссы пришлось пойти ради него и что можно построить на его базе.

Слышали об использовании ES6-модулей в браузере? Собственно — это обычные ES6-модули. Только применяются они в коде, предназначенном для браузеров.

Начнём этот материал с вопроса. ES2015-модуль increment содержит следующий код:

// increment.js
let counter = 0;
counter++;

export default counter;

В другом модуле, который мы назовём consumer, вышеприведённый модуль импортируется 2 раза:

// consumer.js
import counter1 from './increment';
import counter2 from './increment';

counter1; // => ???
counter2; // => ???

А теперь, собственно, вопрос. Что попадёт в переменные counter1 и counter2 после выполнения модуля consumer?



Для того чтобы ответить на этот вопрос, нужно понимать то, как JavaScript выполняет модули, и то, как они импортируются.

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

Если вы очень переживаете за показатели Google Page Speed в разработке сайтов, и у вас подгорает за каждый лишний килобайт не стоит продолжать читать данную статью.

Тех же, кого не пугают большие размеры, и любит риск прошу под кат ;)

Мы долго готовили обновление Smartcalls – визуального редактора для исходящих звонков – и вот оно случилось. Сегодня под катом расскажем про UI/UX-изменения и залезем под капот деморежима, чтобы показать, как мы приручали JointJS.

Mithril.js — непопулярный инструмент для создания клиентских веб приложений. На Хабре практически нет публикаций по этой теме. В этой заметке я хочу показать, как можно сделать небольшое приложение на Mithril. Приложение будем делать по мотивам вот этой публикации (перевод)

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

В середине 2018 года в Sports.ru задумались о переезде на новый WYSIWYG-редактор текста для пользовательских постов. С июня 2019 года редактор работает в режиме бета-версии. За это время мы решили множество проблем, связанных как с проектированием архитектуры всего сервиса, так и с реализацией самого редактора в браузере на основе библиотеки ProseMirror, и решили поделиться своим опытом.

Не так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.



Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о нескольких мощных, но малоизвестных клиентских фреймворках и библиотеках, основанных на JavaScript. Конечно, «большая тройка», в лице Angular, React и Vue, никуда не делась, но в мире веб-разработки есть и другие инструменты, достойные внимания. Такие, например, как Svelte, Preact и Riot. Вопрос выбора подходящего средства зависит от многих факторов. Среди них — знания разработчика, особенности проекта, ситуация на рынке. Поэтому давайте рассмотрим малоизвестные фреймворки, расширив тем самым свободу выбора тех, кто ищет подходящий инструмент для своего очередного проекта.