Подборка каналов для IT специалистов 🎯
Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
Excel лайфхак📌
https://yangx.top/Excel_lifehack
GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub
CodePen 📌
https://yangx.top/codepen_1 Сообщество пользователей CodePen
Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных
Вакансии для программистов 📌
https://yangx.top/progjob
Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском
Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка
Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков
Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика
Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр
Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/java_360 Книги по Java Rus
https://yangx.top/python_360 Книги по Python Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов
БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning
Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию
QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика
Шутки программистов 📌
https://yangx.top/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности
Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров
https://yangx.top/arhitekturamira World Architecture
Английский 📌
https://yangx.top/UchuEnglish Английский с нуля
Математика 📌
https://yangx.top/Pomatematike Канал по математике
Арбитраж трафика 📌
https://yangx.top/partnerochkin CPA и арбитраж трафика
Крипта 📌
https://yangx.top/bitkoinoff Новости криптовалют
DeepFake 📌
https://yangx.top/deepfakenow Публикуем deepfake видео
Мир технологий 📌
https://yangx.top/mir_teh Видео из мира технологий
Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
Excel лайфхак📌
https://yangx.top/Excel_lifehack
GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub
CodePen 📌
https://yangx.top/codepen_1 Сообщество пользователей CodePen
Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных
Вакансии для программистов 📌
https://yangx.top/progjob
Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском
Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка
Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков
Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика
Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр
Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/java_360 Книги по Java Rus
https://yangx.top/python_360 Книги по Python Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов
БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning
Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию
QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика
Шутки программистов 📌
https://yangx.top/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности
Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров
https://yangx.top/arhitekturamira World Architecture
Английский 📌
https://yangx.top/UchuEnglish Английский с нуля
Математика 📌
https://yangx.top/Pomatematike Канал по математике
Арбитраж трафика 📌
https://yangx.top/partnerochkin CPA и арбитраж трафика
Крипта 📌
https://yangx.top/bitkoinoff Новости криптовалют
DeepFake 📌
https://yangx.top/deepfakenow Публикуем deepfake видео
Мир технологий 📌
https://yangx.top/mir_teh Видео из мира технологий
👍2
HTML & CSS Project Tutorial - Build a Recipes Website
В этом учебном пособии по проектам HTML и CSS вы улучшите свои навыки HTML и CSS, создав сайт с рецептами.
https://www.youtube.com/watch?v=-8LTPIJBGwQ
💻 Code: https://github.com/john-smilga/html-css-simply-recipes
В этом учебном пособии по проектам HTML и CSS вы улучшите свои навыки HTML и CSS, создав сайт с рецептами.
https://www.youtube.com/watch?v=-8LTPIJBGwQ
💻 Code: https://github.com/john-smilga/html-css-simply-recipes
YouTube
HTML & CSS Project Tutorial - Build a Recipes Website
In this HTML and CSS project tutorial, you will improve your HTML and CSS skills by building a recipes website.
💻 Code: https://github.com/john-smilga/html-css-simply-recipes
✏️ Course from John Smilga of Coding Addict. Check out his channel: https://…
💻 Code: https://github.com/john-smilga/html-css-simply-recipes
✏️ Course from John Smilga of Coding Addict. Check out his channel: https://…
This media is not supported in your browser
VIEW IN TELEGRAM
Leaflet.js - JS библиотека для интерактивных карт.
Особенности / преимущества:
✔️Адаптирована под мобильные устройства
✔️Поддержка: Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11, Edge, Safari for iOS 7+; Android browser 2.2+, 3.1+, 4+; Chrome for mobile; Firefox for mobile; IE10+ for Win8 devices
✔️Открытый исходный код
✔️Лёгкий вес (39КБ)
✔️Подробная документация и множество гайдов, упрощающих понимание библиотеки
Оф. сайт: https://leafletjs.com/
Гит: https://github.com/Leaflet/Leaflet
Плагины для использования библиотеки: https://leafletjs.com/plugins.html
Гайды: https://leafletjs.com/examples.html
Примеры использования библиотеки: https://tennalian.github.io/leaflet_demo/index.html
#библиотеки #js #frontend
@frontend_1
Особенности / преимущества:
✔️Адаптирована под мобильные устройства
✔️Поддержка: Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11, Edge, Safari for iOS 7+; Android browser 2.2+, 3.1+, 4+; Chrome for mobile; Firefox for mobile; IE10+ for Win8 devices
✔️Открытый исходный код
✔️Лёгкий вес (39КБ)
✔️Подробная документация и множество гайдов, упрощающих понимание библиотеки
Оф. сайт: https://leafletjs.com/
Гит: https://github.com/Leaflet/Leaflet
Плагины для использования библиотеки: https://leafletjs.com/plugins.html
Гайды: https://leafletjs.com/examples.html
Примеры использования библиотеки: https://tennalian.github.io/leaflet_demo/index.html
#библиотеки #js #frontend
@frontend_1
👍6🔥1
Next.js за 100 секунд + полное руководство для начинающих
Изучите основы Next.js за 100 секунд! Затем создайте свое первое серверное приложение для react с полным руководством для начинающих по Next.js.
https://www.youtube.com/watch?v=Sklc_fQBmcs
@frontend_1
Изучите основы Next.js за 100 секунд! Затем создайте свое первое серверное приложение для react с полным руководством для начинающих по Next.js.
https://www.youtube.com/watch?v=Sklc_fQBmcs
@frontend_1
YouTube
Next.js in 100 Seconds // Plus Full Beginner's Tutorial
Learn the basics of Next.js in 100 Seconds! Then build your first server-rendered react app with a full Next.js beginner's tutorial. https://fireship.io/courses/react-next-firebase
#react #webdev #100SecondsOfCode
Next.js Docs https://nextjs.org/
Source…
#react #webdev #100SecondsOfCode
Next.js Docs https://nextjs.org/
Source…
👍3
Forwarded from CodePen Community
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Grid / Entrance Animation Test
Автор анимирует CSS-свойства grid элемента через CSS и добивается интересного эффекта появления элементов страницы.
#codepen #css
Подпишись👉 @codepen_1
Автор анимирует CSS-свойства grid элемента через CSS и добивается интересного эффекта появления элементов страницы.
#codepen #css
Подпишись👉 @codepen_1
🔥9👍1
Forwarded from GitHub Сообщество
Font-awesome – Культовый набор инструментов SVG, font и CSS
Наиболее популярный набор инструментов для иконок, который был переработан и построен с нуля. Кроме того, здесь есть такие фичи как лигатуры шрифтов значков, библиотека SVG иконок, официальные пакеты NPM для популярных клиентских библиотек, таких как React, и CDN
#GitHub | #Archive #Icons
👉 @Githublib
Наиболее популярный набор инструментов для иконок, который был переработан и построен с нуля. Кроме того, здесь есть такие фичи как лигатуры шрифтов значков, библиотека SVG иконок, официальные пакеты NPM для популярных клиентских библиотек, таких как React, и CDN
#GitHub | #Archive #Icons
👉 @Githublib
👍4
Написание собственной системы сборки: сочетание концепций gulp с современным JavaScript
https://palant.info/2022/02/08/writing-my-own-build-system-coupling-gulp-concepts-with-modern-javascript/
#js
https://palant.info/2022/02/08/writing-my-own-build-system-coupling-gulp-concepts-with-modern-javascript/
#js
Almost Secure
Writing my own build system: Coupling gulp concepts with modern JavaScript
Gulp’s reliance on streams makes extending it quite complicated. Async generators are much simpler to write and maintain.
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
GitKraken - удобный и высокоэффективный GUI git клиент.
Он упрощает работу с командами в Git, и позволяет работать с корпоративными репозиториями и исходным кодом.
Особенности:
👉 Кроссплатформенность
👉 Поддержка нескольких профилей
👉 Поддерживает GitHub, Bitbucket и Gitlab
👉 Горячие клавиши
👉 Быстрый и понятный интерфейс поиска
👉 Поддерживает кнопки отмены и повтора функции
👉 Возможность работы в команде
👉 Легко адаптируется к рабочей области пользователя
👉 Поддерживает подмодули и Git-flow
Оф.Сайт: https://www.gitkraken.com/
Ссылка на скачивание: https://www.gitkraken.com/download
Tutorials: https://www.gitkraken.com/learn/git/tutorials
Он упрощает работу с командами в Git, и позволяет работать с корпоративными репозиториями и исходным кодом.
Особенности:
👉 Кроссплатформенность
👉 Поддержка нескольких профилей
👉 Поддерживает GitHub, Bitbucket и Gitlab
👉 Горячие клавиши
👉 Быстрый и понятный интерфейс поиска
👉 Поддерживает кнопки отмены и повтора функции
👉 Возможность работы в команде
👉 Легко адаптируется к рабочей области пользователя
👉 Поддерживает подмодули и Git-flow
Оф.Сайт: https://www.gitkraken.com/
Ссылка на скачивание: https://www.gitkraken.com/download
Tutorials: https://www.gitkraken.com/learn/git/tutorials
👍4
Media is too big
VIEW IN TELEGRAM
Cypress — фреймворк для интерфейсного автоматизированного тестирования
В основе лежат тестовые JS-библиотеки Mocha и Chai. Фреймворк подходит для end-to-end, интеграционных и unit-тестов. В отличие от Selenium, Cypress не запускает удаленные команды, а выполняется прямо в браузере одновременно с тестируемым приложением.
Особенности:
👉 Открытый исходный код
👉 Перезагрузка в реальном времени
👉 Подробная документация
👉 Автоматическое ожидание загрузки DOM, видимых элементов, завершения анимации, завершения вызовов XHR и AJAX и многого другого
👉 Не использует Selenium
👉 Тесты написаны только на JavaScript
👉 Поддерживает Chrome, Firefox, Edge, Electron, Brave
Сайт: https://www.cypress.io/
Гит: https://github.com/cypress-io/cypress
В основе лежат тестовые JS-библиотеки Mocha и Chai. Фреймворк подходит для end-to-end, интеграционных и unit-тестов. В отличие от Selenium, Cypress не запускает удаленные команды, а выполняется прямо в браузере одновременно с тестируемым приложением.
Особенности:
👉 Открытый исходный код
👉 Перезагрузка в реальном времени
👉 Подробная документация
👉 Автоматическое ожидание загрузки DOM, видимых элементов, завершения анимации, завершения вызовов XHR и AJAX и многого другого
👉 Не использует Selenium
👉 Тесты написаны только на JavaScript
👉 Поддерживает Chrome, Firefox, Edge, Electron, Brave
Сайт: https://www.cypress.io/
Гит: https://github.com/cypress-io/cypress
👍5
Intercepting JavaScript Fetch API requests and responses
Перехват запросов и ответов JavaScript Fetch API
https://blog.logrocket.com/intercepting-javascript-fetch-api-requests-responses/
#js #api
Перехват запросов и ответов JavaScript Fetch API
https://blog.logrocket.com/intercepting-javascript-fetch-api-requests-responses/
#js #api
Основы внутреннего устройства JavaScript
С ростом популярности JavaScript команды разработчиков начали использовать его поддержку на многих уровнях своего стека — во фронтенде, бэкенде, гибридных приложениях, встраиваемых устройствах и многом другом. В этой статье мы хотим более глубоко рассмотреть JavaScript и то, как он работает. Эта статья на Eng
#js
С ростом популярности JavaScript команды разработчиков начали использовать его поддержку на многих уровнях своего стека — во фронтенде, бэкенде, гибридных приложениях, встраиваемых устройствах и многом другом. В этой статье мы хотим более глубоко рассмотреть JavaScript и то, как он работает. Эта статья на Eng
#js
Планируете переезд или остаётесь в России?
Если вы разработчик и у вас есть минута времени, поделитесь планами в анонимном опросе. Там всего 7 вопросов.
Ваши ответы помогут крупному IT-работодателю понять, в каких странах стоит открывать офисы и как условия нужны разработчикам.
Если вы разработчик и у вас есть минута времени, поделитесь планами в анонимном опросе. Там всего 7 вопросов.
Ваши ответы помогут крупному IT-работодателю понять, в каких странах стоит открывать офисы и как условия нужны разработчикам.
👍4
Подборка каналов для IT специалистов 🎯
Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
Вакансии 📌
https://yangx.top/sysadmin_rabota Системный Администратор
https://yangx.top/progjob Вакансии в IT
Чат программистов📌
https://yangx.top/developers_ru
Excel лайфхак📌
https://yangx.top/Excel_lifehack
GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub
CodePen 📌
https://yangx.top/codepen_1 Сообщество пользователей CodePen
Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных
Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском
Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка
Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков
Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика
Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр
Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/java_360 Книги по Java Rus
https://yangx.top/python_360 Книги по Python Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов
БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning
Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию
QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика
Шутки программистов 📌
https://yangx.top/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности
Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров
https://yangx.top/arhitekturamira World Architecture
Английский 📌
https://yangx.top/UchuEnglish Английский с нуля
Математика 📌
https://yangx.top/Pomatematike Канал по математике
Арбитраж трафика 📌
https://yangx.top/partnerochkin CPA и арбитраж трафика
Крипта 📌
https://yangx.top/bitkoinoff Новости криптовалют
DeepFake 📌
https://yangx.top/deepfakenow Публикуем deepfake видео
Мир технологий 📌
https://yangx.top/mir_teh Видео из мира технологий
Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
Вакансии 📌
https://yangx.top/sysadmin_rabota Системный Администратор
https://yangx.top/progjob Вакансии в IT
Чат программистов📌
https://yangx.top/developers_ru
Excel лайфхак📌
https://yangx.top/Excel_lifehack
GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub
CodePen 📌
https://yangx.top/codepen_1 Сообщество пользователей CodePen
Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных
Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском
Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка
Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков
Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика
Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр
Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/java_360 Книги по Java Rus
https://yangx.top/python_360 Книги по Python Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов
БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning
Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию
QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика
Шутки программистов 📌
https://yangx.top/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности
Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров
https://yangx.top/arhitekturamira World Architecture
Английский 📌
https://yangx.top/UchuEnglish Английский с нуля
Математика 📌
https://yangx.top/Pomatematike Канал по математике
Арбитраж трафика 📌
https://yangx.top/partnerochkin CPA и арбитраж трафика
Крипта 📌
https://yangx.top/bitkoinoff Новости криптовалют
DeepFake 📌
https://yangx.top/deepfakenow Публикуем deepfake видео
Мир технологий 📌
https://yangx.top/mir_teh Видео из мира технологий
👍4👎1
Forwarded from CodePen Community
This media is not supported in your browser
VIEW IN TELEGRAM
GitHub Dark Mode Toggle
Переключатель тёмной темы, реализованный на CSS и JS
#codepen #css #js
Подпишись👉 @codepen_1
Переключатель тёмной темы, реализованный на CSS и JS
#codepen #css #js
Подпишись👉 @codepen_1
👍4
Sliver во Flutter, или как работает скролл
Если вы уже встречались со сливерами, то наверняка оценили всю «прелесть» работы с ними.
На самом деле они совсем не так трудны и ужасны. Чтобы просто начать их использовать, как чаще всего бывает во Flutter, разбираться особо не нужно. А вот чтобы полноценно использовать их и при этом не страдать, придётся понять, как они работают. Именно этим мы и займемся.
#Sliver #Flutter
Если вы уже встречались со сливерами, то наверняка оценили всю «прелесть» работы с ними.
На самом деле они совсем не так трудны и ужасны. Чтобы просто начать их использовать, как чаще всего бывает во Flutter, разбираться особо не нужно. А вот чтобы полноценно использовать их и при этом не страдать, придётся понять, как они работают. Именно этим мы и займемся.
#Sliver #Flutter
👍4
👨🏼💻 Теперь official. Стартовала IT-ипотека. И в Банке ДОМ.PФ одни из самых выгодных условий!
✅ ставка — от 4,3%,
✅ первоначальный взнос — от 15%,
✅ MAX сумма кредита в регионах-миллионниках — 18 млн рублей, в остальных — до 9 млн рублей.
Кстати, за счет ипотеки можно купить не только строящуюся квартиру, но и готовую от юрлица, а еще построить дом или купить готовый жилой дом с земельным участком 🔥
Подробности можно чекнуть здесь
✅ ставка — от 4,3%,
✅ первоначальный взнос — от 15%,
✅ MAX сумма кредита в регионах-миллионниках — 18 млн рублей, в остальных — до 9 млн рублей.
Кстати, за счет ипотеки можно купить не только строящуюся квартиру, но и готовую от юрлица, а еще построить дом или купить готовый жилой дом с земельным участком 🔥
Подробности можно чекнуть здесь
Forwarded from CodePen Community
This media is not supported in your browser
VIEW IN TELEGRAM
Pure CSS Typing Animation
Эффект печатной машинки, сделанный с помощью библиотеки Babel.js и SCSS
#codepen #scss #js
Подпишись👉 @codepen_1
Эффект печатной машинки, сделанный с помощью библиотеки Babel.js и SCSS
#codepen #scss #js
Подпишись👉 @codepen_1