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

Всем привет! Мы рады представить второе крупное обновление WebStorm в этом году. В нем вы найдете несколько долгожданных улучшений, включая поддержку Nuxt.js и возможность использовать Prettier для форматирования кода по умолчанию.

А сейчас давайте рассмотрим основные улучшения.

• Bootstrap
• Materialize
• Bulma
• Foundation
• Semantic
• Skeleton
• Tailwind
• Uikit
• Pure
• Milligram
• Spectre
• Base
• Picnic

• Bootstrap — stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
• Materialize — cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
• Bulma — cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
• Foundation — cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css
• Semantic — cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
• Skeleton — cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css
• Tailwind — cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.2/tailwind.min.css
• Uikit — cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css
• Pure — unpkg.com/purecss@2.0.3/build/pure-min.css
• Milligram — cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css
• Spectre — unpkg.com/spectre.css/dist/spectre.min.css
• Base — unpkg.com/@getbase/base/core.css
• Picnic — cdn.jsdelivr.net/npm/picnic

Подборка новых статей по фреймворку Laravel. Посмотрим доклады с Laracon. Подивимся визуальному генератору кода Vemto. Изучим Event Sourcing. Узнаем, как добиться финансового успеха c Laravel. Отпразднуем новую версию Laravel Excel и 20 миллионов скачиваний.

Нативная отложенная загрузка для изображений была добавлена в Chrome 76 через атрибут loading, а затем пришла и в Firefox. Мы рады сообщить, что встроенная отложенная загрузка для iframe теперь стандартизирована и также поддерживается в браузерах на основе Chrome и Chromium.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Встроенная lazy-loading загрузка iframe откладывает загрузку закадровых элементов iframe до тех пор, пока пользователь не прокрутит их рядом. Это сохраняет данные, ускоряет загрузку других частей страницы и уменьшает использование памяти.

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

Что такое Deno?

• Он основан на современном JavaScript
• Он имеет расширяемую стандартную библиотеку
• Он имеет стандартную поддержку TypeScript (это означает, что вам не нужно вручную компилировать TypeScript, Deno делает это автоматически)
• Он поддерживает ES модули
• Он не имеет пакетного менеджера
• Он имеет глобальный await
• Он имеет встроенное средство тестирования
• Его цель — максимальная совместимость с браузером. Для этого он предоставляет встроенный fetch и глобальный объект window

Кто такой Front-End разработчик?

<span class='amount'>0</span>
<span class='cart_cost'>0</span>
<span class='order_cost'>0</span>
<span class='order_cost_tax'>0</span>

jQuery().event('cost', '.amount');
jQuery().event('cost', '.cart_cost');
jQuery().event('cost', '.order_cost');
jQuery().event('cost', '.order_cost_tax',function(){ return this*1.2});
jQuery().event('cost', function(){ console.log('Стоимость продуктов:',this)});

jQuery().var('cost',200); 

<span class='amount'>200</span>
<span class='cart_cost'>200</span>
<span class='order_cost'>200</span>
<span class='order_cost_tax'>240</span>

Привет, Хабровчане! В преддверии старта занятий в ближайшей группе профессионального курса «Безопасность веб-приложений», мы подготовили для вас еще один полезный перевод.

Что такое CRLF?

Когда браузер отправляет запрос веб-серверу, тот отправляет ответ, который содержит заголовки HTTP-ответа и сам контент сайта, то есть тело ответа. HTTP-заголовки и HTML-ответ (содержимое сайта) разделяются определенной комбинацией специальных символов, а именно возвратом каретки (carriage return) и подачей строки (line feed). Сокращается это как CRLF.

Веб-сервер использует CRLF, чтобы понять, где начинается новый HTTP-заголовок и заканчивается старый. Также CRLF может сообщить веб-приложению или пользователю, что новая строка начинается в файле или в блоке текста. Символы CRLF – это стандартное сообщение HTTP/1.1, поэтому оно используется любым типом веб-сервера, включая Apache, Microsoft IIS и другие.

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

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

Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной 14 апреля 2020 года автора Stephanie Eckles

Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В не очень далёком прошлом, когда JQuery ещё был "Царём горы", наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch

Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:

background-size: cover;

Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.

Альтернативный метод использует стандартный тег img и магию свойства

object-fit: cover;

Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.

Приветствую. Представляю вашему вниманию перевод статьи «Equal Height Elements: Flexbox vs. Grid», опубликованной 9 апреля 2020 года автором Stephanie Eckles

Это вторая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

Однажды (приблизительно 7 лет назад) я написала JQuery-плагин, который работал с тремя колонками, расположенными на одной строке. А именно, рассчитывал и задавал одинаковую высоту для элементов, независимо от количества содержимого в каждом из них. Метод вёрстки на float, который был тогда основным, не мог справиться с этой проблемой.

Если вы когда-нибудь участвовали в разработке крупного angular-проекта с поддержкой локализации, то эта статья для вас. Если же нет, то возможно, вам будет интересно, как мы решили проблему скачивания больших файлов с переводами при старте приложения: в нашем случае ~2300 строк и ~200 Кб для каждого языка.