Обложка канала

Frontend Головного Мозга. Страница 17

12111 @frontend_mind
Открыть

Настоящий клондайк для frontend-разработчиков.

  • Frontend Головного Мозга

    ☝️iPhone UI Kit Халявный комплект интерфейса разработанный Брэдли Буссолини (да-да =)). Он был создан для iPhone 6 и включает в себя все элементы сетки интерфейса, тщательно с масштабируемого вектора (кнопок, графиков, иконок), чтобы быть адаптированным к любому размеру смартфона. #полезно #UI 👉 @frontend_mind

    phone-ui-kit-psd.zip

    application/zip

  • Frontend Головного Мозга

  • Frontend Головного Мозга

    ru.hexlet.io/blog/po…otchikov Песочницы — это онлайн-редакторы кода. Специально выделенная (изолированная) среда для безопасного исполнения компьютерных программ. Здесь вы можете сверстать страницу, решить задачу или написать программу, и результат вашей работы сразу отобразится. Часто песочницы используют для проверки незнакомого кода из непроверенных источников. #полезно #статья 👉 @frontend_mind
    Лучшие онлайн-песочницы для разработчиков

    Список лучших онлайн-песочниц для разработчиков

    ru.hexlet.io

  • Реклама

  • Frontend Головного Мозга

    ☝️CSS-препроцессоры Это надстройки над самим CSS, открывающие новые возможности языка и делающие процесс работы проще и доступнее для разработчика с помощью особых конструкций. Программисты называют их «синтаксическим сахаром». «Синтаксический сахар» — конструкции, которые не вносят ничего принципиально нового в технологию, но делают работу с ней удобнее, проще и человечнее. Например, в названиях классов можно использовать разные спецсимволы (кроме, _,), чтобы придать выразительности коду: 
    <div class="@sidebar $main">
        <div class="@sidebar $wrapper">
               <div class="@sidebar $text color:red"></div>
       </div>
</div>
    Такой код будет на 100% валидным, но выглядит ужасно. Зато с помощью препроцессора он станет таким: 
    .\@sidebar.\$main { ... }
.\@sidebar.\$wrapper { ... }
.\@sidebar.\$wrapper.color\:red { ... }
    Что бы там ни говорили, изучить CSS довольно-таки непросто. Чем больше осваиваешь язык и разбираешься в нюансах, тем больше понимаешь, как плохо его знаешь. Поэтому использовать один из двух популярных препроцессоров — удобное решение: SASS — компилируется с помощью Ruby; LESS — использует JavaScript или Node.js. #codepen #css #готовые_решения 👉 @frontend_mind

  • Frontend Головного Мозга

    Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем рекламу? Следуйте 3 простым шагам, чтобы сделать это: 1) Регистрируйтесь по ссылке: https://telega.in/c/frontend_mind 2) Пополняйтесь удобным способом 3) Размещайте рекламное сообщение Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

  • Frontend Головного Мозга

    Короче, вот вам архивы с платными книгами, иначе так не выучите ни один язык: 📚 Полка Разработчика 📖 Кладовая Книг 🚽 IT Memes — тут чисто поржать, пока компилятор там возится; 🗞 3D News — актуальные новости IT-индустрии на случай, если мемы надоели. Сохраняй, пригодится

  • Frontend Головного Мозга

    Plotly.js — Библиотека для визуализации данных Позволяет добавлять различные виды диаграмм и графиков в проект. Особенности / преимущества: ✔️Предоставляет более чем 40 типов диаграмм, включая трехмерные ✔️Доступна для JavaScript, Python, R, F# и т.д ✔️Построена на основе d3.js и stack.gl ✔️Открытый исходный код Сайт: https://plotly.com/javascript/ Гит: https://github.com/plotly/plotly.js #библиотеки #полезно #js 👉 @frontend_mind

  • Frontend Головного Мозга

    Электронные часы, выполненные с помощью SCSS и библиотеки React.js #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    Cloudinary — Медиасервис для хранения медиаресурсов Преобразует изображения и видео для более быстрой загрузки без ухудшения качества. Особенности: 👉 Поддерживает JavaScript, Python, Go, PHP и т.д 👉 Манипулирование изображениями 👉 Автоматическая оптимизация и доставка через CDN 👉 Простой API Сайт: https://cloudinary.com/ #полезно #инструменты 👉 @frontend_mind

  • Frontend Головного Мозга

    Анимированная сцена, выполненная с помощью Pug и SCSS, без использования JavaScript #codepen #scss #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    ✨Топ расширений Google Chrome для веб-разработчика, Часть 2: 👉 JSON Viewer — Поможет управлять данными JSON, представленными в окне браузера, сэкономив время на быстрое освоение и использование кода. 👉 BrowserStack — Расширение для проверки сайта на отзывчивость при изменении размера экрана или использовании другого браузера. 👉 EditThisCookie — Позволяет создавать, редактировать, экспортировать, блокировать и удалять файлы cookie для каждой отдельной страницы. 👉 Page Ruler — Помогает определить размеры элементов на странице, а также промежутки между ними. 👉 Talend API Tester — Упрощает вызов, обнаружение и тестирование HTTP и REST API. 👉 Ghostery — Плагин предназначен для блокировки навязчивой рекламы и элементов страницы, замедляющих ее загрузку, а также для предотвращения слива личных данных. А какими сервисами пользуетесь вы? Напишите в комментариях👇 #полезно #подборки_инструментов 👉 @frontend_mind

  • Frontend Головного Мозга

    Думаете сменить профессию? Можно попытаться уйти в IT. Но что, если сфера IT кажется трудной и тянет к чему-то творческому? Рассмотрите профессию Fullstack-дизайнера! Fullstack-дизайнер - это специалист, который работает на стыке дизайна и программирования. Что он умеет? - Проектировать интерфейсы на основе UX-исследований - Верстать сайты. Знает HTML, CSS, JS - Анимировать интерфейсы в Figma - Создавать сайты на Tilda - Тестировать готовые продукты Чтобы стать fullstack-дизайнером потребуется освоить множество навыков и из дизайна, и из программирования. Это делает таких универсальных специалистов очень востребованными и ценными. К тому же в этой работе есть место не только сосредоточенному программированию, но и творческому самовыражению. Уже не терпится начать карьеру в этой сфере? Переходите на сайт, запишитесь на курс со скидкой: https://clc.to/u63uJg

  • Frontend Головного Мозга

    Кнопка с анимацией при клике, выполненная с помощью SCSS и JavaScript #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    PhotoSwipe — Библиотека для добавления галереи изображений Позволяет просматривать изображения на сайте в удобном формате. Особенности / преимущества: ✔️Не зависит от сторонних библиотек ✔️Поддержка динамического импорта ✔️Улучшеная производительность анимаций ✔️Работает на тач-устройствах Сайт: https://photoswipe.com/ Гит: https://github.com/dimsemenov/Photoswipe #библиотеки #полезно #js 👉 @frontend_mind

  • Frontend Головного Мозга

    Tabbar с анимацией при наведении, выполненный с помощью SCSS, без использования JavaScript #codepen #scss #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Реклама

  • Frontend Головного Мозга

    Функции CSS-трансформации Трансформации к элементу применяются при помощи свойства transform. А значением для этого свойства являются функции трансформации. Функции перемещения translate(X, Y) — Используется для смещения элемента вверх-вниз или влево-вправо. Функции масштабирования scale(X, Y) — Используется для масштабирования элемента. Если в функцию передать 0, то элемент не будет виден. Единица соответствует нормальному масштабу. Числа от 0 до 1 — это уменьшенный масштаб. Числа больше единицы — увеличенный масштаб. Функции наклона skewX(X), skewY(Y) — Выполняют сдвиг одной стороны элемента относительно противолежащей. В результате элемент как бы наклоняется. Величина наклона зависит от положения точки применения трансформаций (transform-origin) и числа градусов, заданных в параметрах. Функции поворота rotateX(X), rotateY(Y), rotateZ(Z) — Используются для вращения элемента. В функцию передаём единицы измерения углов (deg, rad, turn), например 45deg или 0.5turn. Обратите внимание, что обычное вращение элемента на странице — вращение относительно оси Z. 👉 Читать статью полностью #статья #js 👉 @frontend_mind

  • Frontend Головного Мозга

    Текст с адаптивным цветом, выполненный с помощью CSS и JavaScript #codepen #css #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    Envato — Сервис для подбора цифровых материалов Позволяет уменьшить время разработки сайта, предоставляя различный цифровой контент. Особенности: 👉 Поддержка фреймворков Vue.js, Laravel, Angular и BootStrap и т.д 👉 Имеет 1000+ готовых шаблонов и компонентов 👉 Также предоставляет стоковые видео, фото и музыку 👉 Отменить подписку можно в любое время Сайт: https://www.envato.com/ #полезно #инструменты 👉 @frontend_mind