CSS в 2023 году: главные изменения
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
Media is too big
VIEW IN TELEGRAM
Как исполняется код JavaScript и почему эти знания — суперсила веб-разработчиков?
После получения файла JavaScript с сервера код JS преобразуется в то, с чем компьютер может работать. В этом компьютеру помогают движки, встроенные в браузеры. В них и кроется суперсила использования JavaScript.
Зная тонкости преобразования кода, вы научитесь писать качественные программы, работающие без подвисаний и разумно использующие имеющиеся API. И наконец-то сможете понять, почему JavaScript может показаться странным.
Да, это не самая простая тема. Но вот несколько материалов, которые точно помогут в ней разобраться и здорово прокачать скилл работы c JavaScript:
1. Компактная статья с доступными объяснениями и крутыми анимациями: https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf
2. Серия из 19 статей на русском, после которых у вас точно не останется вопросов: https://habr.com/ru/company/ruvds/blog/337042/
#javascript #веб
После получения файла JavaScript с сервера код JS преобразуется в то, с чем компьютер может работать. В этом компьютеру помогают движки, встроенные в браузеры. В них и кроется суперсила использования JavaScript.
Зная тонкости преобразования кода, вы научитесь писать качественные программы, работающие без подвисаний и разумно использующие имеющиеся API. И наконец-то сможете понять, почему JavaScript может показаться странным.
Да, это не самая простая тема. Но вот несколько материалов, которые точно помогут в ней разобраться и здорово прокачать скилл работы c JavaScript:
1. Компактная статья с доступными объяснениями и крутыми анимациями: https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf
2. Серия из 19 статей на русском, после которых у вас точно не останется вопросов: https://habr.com/ru/company/ruvds/blog/337042/
#javascript #веб
Подборка игр для обучения веб-разработке:
1. В Elevator Saga вам предстоит управлять лифтом с помощью JavaScript, разгадывая задачки. Игра опенсорс, так что можно покопаться в исходниках: http://play.elevatorsaga.com/
2. В Hex Invaders игрок должен быстро переводить шестнадцатеричное значение цвета на человеческий язык и сбивать пришельцев, чтобы спасти человечество: http://www.hexinvaders.com/
3. Если вы хотите изучить Ruby, то Ruby Warrior — то, что вам нужно: отличная игра для начинающих программистов. Есть два уровня сложности: https://www.bloc.io/ruby-warrior/
4. Flexbox Froggy — это логическая онлайн-игра, в которой вы должны помочь лягушкам добраться до их кувшинок. Делается это с помощью CSS Flexbox, что очень поможет развить навыки вёрстки: http://flexboxfroggy.com/
5. CSS Diner — отличная игра для знакомства с CSS-селекторами. Игроку даётся стол с посудой, заданный анимированной HTML-формой, и предмет или предметы, которые нужно взять со стола: https://flukeout.github.io/
#начинающим #веб
1. В Elevator Saga вам предстоит управлять лифтом с помощью JavaScript, разгадывая задачки. Игра опенсорс, так что можно покопаться в исходниках: http://play.elevatorsaga.com/
2. В Hex Invaders игрок должен быстро переводить шестнадцатеричное значение цвета на человеческий язык и сбивать пришельцев, чтобы спасти человечество: http://www.hexinvaders.com/
3. Если вы хотите изучить Ruby, то Ruby Warrior — то, что вам нужно: отличная игра для начинающих программистов. Есть два уровня сложности: https://www.bloc.io/ruby-warrior/
4. Flexbox Froggy — это логическая онлайн-игра, в которой вы должны помочь лягушкам добраться до их кувшинок. Делается это с помощью CSS Flexbox, что очень поможет развить навыки вёрстки: http://flexboxfroggy.com/
5. CSS Diner — отличная игра для знакомства с CSS-селекторами. Игроку даётся стол с посудой, заданный анимированной HTML-формой, и предмет или предметы, которые нужно взять со стола: https://flukeout.github.io/
#начинающим #веб
Разбираемся с CORS
Cross-origin resource sharing (CORS) — это механизм браузера, который обеспечивает контролируемый доступ к ресурсам, расположенным за пределами заданного домена. В вебе это довольно важная тема.
Поэтому держите небольшой набор статей, который поможет понять, как это вообще устроено. А если уже понимаете, но вас задолбали ошибки, то и с этим тоже:
Лайтовое введение в CORS: история возникновения, как устроен и оптимальные методы работы: https://habr.com/ru/companies/macloud/articles/553826/
Более серьёзное руководство с многочисленными примерами и дополнительной информацией: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Наиболее частые ошибки и способы их устранения: https://fatimamo.com/become-a-cors-wizard
#cors #веб
Cross-origin resource sharing (CORS) — это механизм браузера, который обеспечивает контролируемый доступ к ресурсам, расположенным за пределами заданного домена. В вебе это довольно важная тема.
Поэтому держите небольшой набор статей, который поможет понять, как это вообще устроено. А если уже понимаете, но вас задолбали ошибки, то и с этим тоже:
Лайтовое введение в CORS: история возникновения, как устроен и оптимальные методы работы: https://habr.com/ru/companies/macloud/articles/553826/
Более серьёзное руководство с многочисленными примерами и дополнительной информацией: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Наиболее частые ошибки и способы их устранения: https://fatimamo.com/become-a-cors-wizard
#cors #веб
Next.js: руководство по структурированию крупномасштабных проектов
Хорошая структура важна в любом проекте, а особенно в крупном, если, конечно, только вы не хотите чувствовать себя Индианом Джонсом, продирающимся сквозь густые джунгли компонентов, хуков и конфигурационных файлов.
Эта статья посвящена именно этому. Следуя приведённой структуре, вы потратите меньше времени на размышления о том, куда что идет, и больше времени на создание потрясающих функций.
#веб #js
Хорошая структура важна в любом проекте, а особенно в крупном, если, конечно, только вы не хотите чувствовать себя Индианом Джонсом, продирающимся сквозь густые джунгли компонентов, хуков и конфигурационных файлов.
Эта статья посвящена именно этому. Следуя приведённой структуре, вы потратите меньше времени на размышления о том, куда что идет, и больше времени на создание потрясающих функций.
#веб #js
Forwarded from Точка входа в программирование
Как повысить производительность сайта: улучшаем UX за счет сокращения времени загрузки
Мы все сталкивались с раздражением от ожидания долгих загрузочных экранов. Обычно это происходит из-за того, что сайт пытается получить все необходимые данные, как только вы попадаете на страницу.
Одна из возможных способов борьбы с этим явлением — предварительная выборка данных. Это классный трюк для сокращения времени загрузки страниц. В этой статье подробно описывается, как и когда применять эту технику, с примерами кода и полезными советами.
#веб
Мы все сталкивались с раздражением от ожидания долгих загрузочных экранов. Обычно это происходит из-за того, что сайт пытается получить все необходимые данные, как только вы попадаете на страницу.
Одна из возможных способов борьбы с этим явлением — предварительная выборка данных. Это классный трюк для сокращения времени загрузки страниц. В этой статье подробно описывается, как и когда применять эту технику, с примерами кода и полезными советами.
#веб
This media is not supported in your browser
VIEW IN TELEGRAM
Как менялось соотношение популярности браузеров за последние 28 лет — свежая визуализация от Eeagli.
Муд оперы: стабильность залог успеха 😂
#веб
#веб
Please open Telegram to view this post
VIEW IN TELEGRAM