@frontend_school #статья #CSS
CSS-спрайты: что это, почему это полезно и как их использовать?
Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.
CSS-спрайты: что это, почему это полезно и как их использовать?
Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.
Что такое CSS-спрайт?
Anonymous Quiz
4%
Изображение, отображающееся на вкладке сайте слева от имени вкладки
9%
Изображение с низкой детализацией, используемое для снижения нагрузки на браузер
61%
Несколько изображений, объединённых в одно, для уменьшения количества запросов на сервер
25%
Анимация, создаваемая посредством возможностей CSS
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Nodivember. Автомобиль
Сегодня в нашей рубрике очередной участник челенджа Nodivember. И как вы можете догадаться этот автомобиль и анимация сделаны на чистом CSS без использования HTML или JS. Проект классный, но жаль, что у автора не хватило опыта на создание более современной модели, да и по разметке ездить не самая хорошая привычка 🤔
Nodivember. Автомобиль
Сегодня в нашей рубрике очередной участник челенджа Nodivember. И как вы можете догадаться этот автомобиль и анимация сделаны на чистом CSS без использования HTML или JS. Проект классный, но жаль, что у автора не хватило опыта на создание более современной модели, да и по разметке ездить не самая хорошая привычка 🤔
@frontend_school #статья #JavaScript
У нас проблемы с промисами
Действительно крутая и полезная статья о промисах. Если вы думаете, что разбираетесь в промисах, то скорее всего вы ошибаетесь. Сегодня хочу вам предложить ознакомиться со статьёй, которая объясняет многие вещи, раскрывает нюансы и помогает понять и научиться правильно пользоваться промисами. Промисы вы обязательно будете использовать в своей работе, это точно. И чем раньше вы научитесь с ними работать, тем проще вам будет в дальнейшем.
У нас проблемы с промисами
Действительно крутая и полезная статья о промисах. Если вы думаете, что разбираетесь в промисах, то скорее всего вы ошибаетесь. Сегодня хочу вам предложить ознакомиться со статьёй, которая объясняет многие вещи, раскрывает нюансы и помогает понять и научиться правильно пользоваться промисами. Промисы вы обязательно будете использовать в своей работе, это точно. И чем раньше вы научитесь с ними работать, тем проще вам будет в дальнейшем.
Какое свойство CSS позволяет указать толщину рамки (border)?
Anonymous Quiz
17%
border-weight
32%
border-size
48%
border-width
3%
border-radius
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Бутерлоадер
Такой забавный и приятный лоадер отлично подойдёт для какого-нибудь кулинарного сайта или кафе, а делается достаточно просто. В этом проекте автор использовал всего две технологии - HTML и SCSS. Попробуйте повторить!
Бутерлоадер
Такой забавный и приятный лоадер отлично подойдёт для какого-нибудь кулинарного сайта или кафе, а делается достаточно просто. В этом проекте автор использовал всего две технологии - HTML и SCSS. Попробуйте повторить!
@frontend_school #задача №41
Первый контакт
Мы долго этого ждали и, конечно же, это случилось именно в 2020 году! Впервые с нами на связь вышла внеземная форма жизни и пытается начать с нами диалог! Но вот незадача, они посылают нам сообщения на непонятном языке и только вы можете помочь нам избежать межгалактического конфликта! Поможете нам?
Условие:
Написать функцию, которая будет принимать строку и переводить её в соответствии со словарём. Словарь доступен по этой ссылке.
Задание со звёздочкой:
Написать функцию так, чтобы она могла переводить в обе стороны - с инопланетного на человеческий и наоборот.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
Первый контакт
Мы долго этого ждали и, конечно же, это случилось именно в 2020 году! Впервые с нами на связь вышла внеземная форма жизни и пытается начать с нами диалог! Но вот незадача, они посылают нам сообщения на непонятном языке и только вы можете помочь нам избежать межгалактического конфликта! Поможете нам?
Условие:
Написать функцию, которая будет принимать строку и переводить её в соответствии со словарём. Словарь доступен по этой ссылке.
Задание со звёздочкой:
Написать функцию так, чтобы она могла переводить в обе стороны - с инопланетного на человеческий и наоборот.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
В каком порядке выполняться функции при работе кода, представленного на изображении выше?
Anonymous Quiz
10%
doSomethingElse(undefined) -> doSomething -> finalHandler(undefined)
44%
doSomething -> doSomethingElse(undefined) -> finalHandler(resultOfDoSomethingElse)
12%
doSomethingElse(undefined) -> doSomething -> finalHandler(resultOfDoSomethingElse)
34%
doSomething -> doSomethingElse(undefined) -> finalHandler(undefined)
@frontend_school #интересное
Редактор clip-path
Сегодняшний проект нацелен на облегчение жизни всем, кто на него наткнулся. С помощью этого редактора вы можете настроить анимацию, форму, размер элемента clip-path просто выбирая готовые пресеты и настраивая их с помощью шаблона превью. А дальше вы просто открываете вкладку CSS code или Preset code и копируете содержимое в ваш проект. Здорово! Правда?!
Добавляйте пост в избранное, чтобы не потерять и делитесь с друзьями-разработчиками!
Редактор clip-path
Сегодняшний проект нацелен на облегчение жизни всем, кто на него наткнулся. С помощью этого редактора вы можете настроить анимацию, форму, размер элемента clip-path просто выбирая готовые пресеты и настраивая их с помощью шаблона превью. А дальше вы просто открываете вкладку CSS code или Preset code и копируете содержимое в ваш проект. Здорово! Правда?!
Добавляйте пост в избранное, чтобы не потерять и делитесь с друзьями-разработчиками!
@frontend_school #статья #VSCode
10 полезных плагинов для VS Code, которые сильно облегчают работу
Сегодня предлагаем вашему вниманию собственную подборку плагинов, проверенных временем и лично нами. Плагины, представленные в подборку позволят значительно повысить читаемость кода и взаимодействие с ним.
Если вашего любимого плагина не оказалось в нашей подборке, поделитесь им с нами в нашем чате! Приятного чтения!
10 полезных плагинов для VS Code, которые сильно облегчают работу
Сегодня предлагаем вашему вниманию собственную подборку плагинов, проверенных временем и лично нами. Плагины, представленные в подборку позволят значительно повысить читаемость кода и взаимодействие с ним.
Если вашего любимого плагина не оказалось в нашей подборке, поделитесь им с нами в нашем чате! Приятного чтения!