CodeBase | Frontend
@codebase_frontend
2.13K subscribers
362 photos
129 videos
2 files
524 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
About
Blog
Apps
Platform
Join
CodeBase | Frontend
2.13K subscribers
CodeBase | Frontend
🟢 SAAS 🟢

⚡️ Sass — один из самых продвинутых и надежных CSS препроцессоров, пользующихся высокой популярностью среди опытных специалистов.

🟢 Возможность совместимости с различными версиями CSS позволит вам использовать любые CSS библиотеки в вашем проекте.
🟢 CSS препроцессоры, обладающие таким богатым функционалом, как Sass, являются редкостью.
🟢 Sass является одним из самых опытных CSS препроцессоров, который накопил множество знаний за свою долгую историю.
🟢 Удобство использования Sass фреймворков, таких как Bourbon, значительно облегчит жизнь разработчику. Мы также используем Bourbon в определенных выпусках Джедая верстки при работе с Sass.
🟢 Синтаксис Sass предлагает выбор между двумя вариантами: упрощенным (SASS) и более похожим на CSS (SCSS), чтобы каждый мог выбрать наиболее удобный.

🔗 Посмотреть урок [34:43]

CodeBase | Frontend | #обучение #sass
Please open Telegram to view this post
VIEW IN TELEGRAM
1.5K views
CodeBase | Frontend
🟢 Макет cайта школы серфинга: Wawe 🟢

🔵 Технологии: HTML/CSS, JS
🔵 Страницы: Одностраничный

🔗 Ссылка на макет

CodeBase | Frontend | #макет
Please open Telegram to view this post
VIEW IN TELEGRAM
1.5K views
CodeBase | Frontend
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Эффект наведения с подсветкой ⚡️
 
🟣Светящийся эффект наведения на карточках, реализованный с использованием CSS.

🔗 Ссылка

CodeBase | Frontend | #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
1.4K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.5K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.5K viewsedited  
CodeBase | Frontend
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Эффект волн - очень привлекательная анимация логотипа.

🔵 Реализована с использованием SCSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #scss_js
Please open Telegram to view this post
VIEW IN TELEGRAM
1.5K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.3K viewsedited  
CodeBase | Frontend
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ QUOKKA ⚡️

🟢 Расширение Quokka позволяет тестировать JavaScript-код, не переключаясь на консоль браузера.

🟢 Кроме того, Quokka помогает в прототипировании и работе с файлами.

🟢 В нем есть встроенные отчеты и функции форматирования вывода.

🔗 Ссылка

CodeBase | Frontend | #plugins
Please open Telegram to view this post
VIEW IN TELEGRAM
1.3K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.3K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.3K viewsedited  
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
👩‍💻 Расширение VS Code: Bookmarks

Bookmarks поможет вам ориентироваться в коде, легко и быстро перемещаясь между важными позициями. Также поддерживается набор команд выделения, позволяющий выделять строки с закладками и области между строками с закладками.

➡️ Ссылка на плагин

CodeBase | Frontend | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
1.2K views
CodeBase | Frontend
⚡️ Memos - это открытый сервис для создания заметок, который обеспечивает конфиденциальность.

🔵 Реализован с использованием технологий React и Go, позволяя удобно записывать свои мысли.

😀 Для быстрого запуска с помощью Docker:

docker run -d \
  --init \
  --name memos \
  --publish 5230:5230 \
  --volume ~/.memos/:/var/opt/memos \
  neosmemo/memos:stable


CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
1.2K views
CodeBase | Frontend
⚡️ AFISHA ⚡️

🔵 Сложность: Легкая
🔵 Страницы: Одностраничный
🔵 Язык: русский

🔗 Ссылка на макет
Please open Telegram to view this post
VIEW IN TELEGRAM
1.2K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
⚡️ Как отобразить сообщение, если JavaScript отключен? ⚡️

🟢 Большинство веб-страниц используют JavaScript, но при его отключении сайт может стать недоступным.

🟢 Некоторые пользователи отключают JavaScript ради безопасности, поэтому важно, чтобы ваша страница работала без него. Проверки должны выполняться на стороне клиента и сервера.

🟢 Если контент не работает без JavaScript, нужно показывать сообщение об ошибке.

1️⃣ Использование HTML тега <noscript>

🔵 Тег <noscript> отображает альтернативный контент в браузерах без поддержки скриптов или с отключенным JavaScript.

➡️ Пример:

<noscript>
Видео не может проигрываться, так как JavaScript отключен.
</noscript>


➡️ Полный пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h1>Пример тега noscript</h1>
    <noscript>
      <h2>JavaScript отключен в вашем веб-браузере. Некоторые функции не будут работать.</h2>
      <style type="text/css">
        #main-content { display: none; }
      </style>
    </noscript>
    <div id="main-content">
      <h2>JavaScript включен!</h2>
    </div>
  </body>
</html>


2️⃣ Использование метода meta refresh

🟣 Для отображения контента при отключенном JavaScript можно перенаправить пользователя на страницу с сообщением об этом. Метод meta refresh использует тег <meta> с атрибутом http-equiv="refresh" и атрибутом content, указывающим интервал времени до перенаправления.

➡️ Установив интервал в 0, можно мгновенно перенаправить пользователя:

<noscript>
  <meta http-equiv="refresh" content="0;URL=ShowErrorPage.html">
</noscript>


🟣 Если JavaScript отключен, браузер перенаправит пользователя на "ShowErrorPage.html" с предупреждающим сообщением.

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
⚡️ ESLintESLint ⚡️

➡️ ESLint обеспечивает проверку кода на наличие синтаксических ошибок и предлагает варианты исправлений.

➡️ Хотя в VS Code есть встроенная система IntelliSense для отображения подсказок, ESLint становится более удобным выбором, особенно если требуются различные настройки для JSX, обычного JavaScript или среды Node.js.

➡️ Линтер также может интегрироваться в систему проверки кода, позволяя убедиться в правильности кода перед отправкой файлов в репозиторий.

🔗 Документация

CodeBase | Frontend | #plugin
Please open Telegram to view this post
VIEW IN TELEGRAM
980 views