Frontender Libs - обзор библиотек JS / CSS
8.46K subscribers
2.02K photos
735 videos
2 files
239 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Bulma

Bulma - это современный фреймворк, который использует самые современные технологии. В первую очередь, это технологии верстки колонок с помощью так называемых Flexbox.
Верстая веб-страницы на Bulma вы создаете 100% адаптивные страницы под мобильные устройства.
Используя имена классов вы можете легко верстать колонки и забыть про различные сетки, float и.т.д.

Bulma имеет имена классов, которые очень легко читаются и запоминаются. Например, так можно создать колонки.

<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
</div>


👉 @sWebDev
AT-UI

Библиотека AT-UI создана специально для настольных веб-приложений. При работе с ней применим техпроцесс, предусматривающий использование NPM, WebPack и Babel. Хотя документация к библиотеке может вызвать сложности у англоговорящей аудитории, она включает в себя достойную коллекцию простых и удобных компонентов для разработки интерфейсов.

👉 @sWebDev
One Day Offer в Яндекс для frontend-разработчиков 🔥

25 сентября пройдёт новый One Day Offer для фронтендеров. One Day Offer — это онлайн-встреча, на которой можно получить оффер за один день.
Чтобы попасть на мероприятие, необходимо решить 2-3 задачи онлайн в системе Яндекс.Контест до 22 сентября. Это можно сделать в любое время — решение проверяет компьютер.

Если задачи решены успешно — мы пригласим на One Day Offer, где в течение дня участники смогут пройти две секции с кодом и тем же вечером получить предложение о работе.

Регистрация по ссылке: https://yandex.ru/promo/events/one-day-offer-250921/?from=tg_cpc_swebdev
Spectre.css

Это легкий, отзывчивый и современный CSS-фреймворк для более быстрой и расширяемой разработки. Spectre предоставляет базовые стили для типографики и элементов, систему адаптивного макета на основе Flexbox, а также компоненты и утилиты на чистом CSS.

👉 @sWebDev
Buefy

Библиотека Buefy представляет собой набор компонентов, построенных с использованием возможностей Vue и Bulma. На GitHub она собрала около 9 тысяч звёзд, компоненты, которые можно в ней обнаружить, подходят, без дополнительных усилий со стороны разработчика, для создания приложений, использующих отзывчивый дизайн. Хотя компонентов в этой библиотеке не так уж и много, она, определённо, достойна внимания.

👉 @sWebDev
TailwindCSS

Это CSS-библиотека, которая упрощает стилизацию HTML, тем же путем, как это делает Bootstrap, – добавляя огромное количество разнообразных классов. Но, в отличие от Bootstrap, который добавляет уже готовые к употреблению компоненты, такие как кнопки, алерты и навбары, классы TailwindCSS нацелены на конкретное свойство. В TailwindCSS нет заранее написанной кнопки, её ты должен сделать сам.

👉 @sWebDev
iView

Это высококачественный набор инструментов для компонентов пользовательского интерфейса, созданный на основе Vue.js. Он был создан TalkingData для настройки тем, многоязычного развертывания и других функций, что значительно повысило эффективность разработки.

👉 @sWebDev
Angular Google Maps

Использование библиотеки Google Maps в Angular всегда является серьезной проблемой, потому что библиотека загружается с использованием тега script, поэтому могут возникать некоторые ошибки компиляции, исправление которых может потребовать большого количества времени.

Эта библиотека решает все проблемы за вас и предоставляет удобный интерфейс для взаимодействия с google maps.

👉 @sWebDev
Nuxt.js

Это фреймворк для создания универсальных приложений на Vue.js с использованием Node.js. С помощью него можно рендерить UI на сервере и генерировать статические сайты.

👉 @sWebDev
💥Два дня живого общения на конференции FrontendConf 2021

Приглашаем вас на конференцию, в рамках которой вас ждёт знакомство с современными подходами в разработке, обзор лучших практик и перспективных технологий.

Программа конференции построена вокруг 6 тематик:
— архитектура и организация кодовой базы;
— The Frontend Operations Engineer;
— хорошие практики современного фронтенда;
— профессиональный, карьерный и социальный рост;
— взгляд со стороны (собеседования, команды, развитие);
— будущее (перспективы развития нашей сферы, недавние изменения и размышления о красоте вещей).

🔥И все это офлайн! Место и время встречи — Москва, Radisson Slavyanskaya, 11-12 октября.

По ссылке можно прочитать подробнее о конференции, изучить программму и забронировать билет 👉 https://clck.ru/XZLdg

Также уже открыт плейлист докладов прошлого года, где многие из тем актуальны до сих пор 👉https://clck.ru/XRjNv
ngx-translate

В какой-то момент вашему веб-приложению может потребоваться обслуживание многоязычной базы пользователей. Интернационализация, или, если коротко, i18n, - это процесс, с помощью которого вы можете сделать ваше приложение пригодным для использования на другом родном языке. Хотя Angular обладает некоторой встроенной функциональностью i18n, ngx-translate - это сторонний пакет, который упрощает процесс.

👉 @sWebDev
✏️ Вопрос из канала «Web Interview»:
В чем разница между null и undefined?

  Ответ:
 В JavaScript undefined означает, что переменная была объявлена, но ей еще не присвоено значение, например:

let a;
alert(a); //выведет undefined
alert(typeof a); //выведет undefined

null - это значение присваивания. Он может быть присвоен переменной, как представление без значения (когда разработчик решает, что значение пока что не определено):

let a = null; //разработчик сам присвоил null
alert(a); //выведет null
alert(typeof a); //выведет object

📌 Из предыдущих примеров ясно, что undefined и null являются двумя различными типами: undefined - это сам тип (неопределенный), а null - объект.

null === undefined // false
null == undefined // true
null === null // true

Хочешь быть готовым к вопросам на собеседовании? — подпишись на канал  «Web Interview»!

• Здесь ежедневно публикуются реальные вопросы по фронту и бэку с собеседований российских IT компаний.

• И еще! Канал ведет действующий Fullstack разработчик.
Mint UI

Это библиотека мобильных компонентов, созданных на CSS и JS, которые могут быть использованы для создания мобильных приложений. Использование этой библиотеки поможет вам еще быстрее создавать веб-страницы в едином стиле.

👉 @sWebDev
Keen UI

Библиотека Keen-UI, хотя её разработчики явно черпали идеи из уже не раз упомянутой на этом канале концепции Material Design, не является настоящим набором Material-компонентов. В её состав входят только компоненты, использующие JavaScript, она не является CSS-фреймворком и не включает в себя систему работы с сеткой или типографские стили.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Hover

Это CSS-библиотека. Hover — сборка эффектов наведения на CSS3, которые будут применяться к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. д. Эффекты доступны на CSS, Sass и LESS. Вы можете копировать и вставлять эффект, который вы хотите использовать в своей таблице стилей, или ссылаться на таблицу стилей библиотеки.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Запомните: айти в 2021 году – самая перспективная ниша.

1. Выучить «базу» 2-3 языков можно за месяц, даже если вы чайник.

2. Тысячи компаний платят новичкам от $800.

3. Из-за высокого спроса вы найдете работу за 1-2 недели.

Освоить всё с нуля поможет канал Frontend. Уроки по JavaScript, CSS, HTML и советы для собеседований. Впитываете знания – уверенно проходите интервью – получаете работу.

Ребята скомпоновали всё так, что влиться в процесс сможет каждый. Стартуйте сейчас: @frontendInterview
BootstrapVue

Эта библиотека предназначена для создания отзывчивых веб-приложений, при разработке которых ориентируются, в первую очередь, на мобильные платформы. Библиотека построена на базе Vue и Bootstrap 4. Она предназначена для Vue 2.4+, в ней реализована автоматическая разметка WAI-ARIA, направленная на создание веб-проектов, с которыми удобно работать людям с ограниченными возможностями.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Velocity

Velocity — это быстрый механизм анимации Javascript с тем же API, что jQuery $.animate(). Он включает в себя цветную анимацию, преобразования, смягчения, поддержку SVG и анимацию прокрутки.

👉 @sWebDev
В команду Юлы нужен DevOps-инженер!

Наш идеальный кандидат на «ты» с Kubernetes, любит новые и интересные технологии, хочет их внедрять и применять. Большим плюсом будет опыт из смежных направлений разработки и широкий кругозор, ведь задачи могут быть самые разные – и трафик поанализировать, и подебажить упавшую сборку, и помочь коллегам с внедрением CI-инструментов.
Если тебе это интересно, ищи подробности (стек, требования, условия) по ссылке.
Fish-UI

Fish-UI — это набор инструментов для веб-разработки, использующий возможности WebPack и ES2015. Несмотря на скудную документацию, библиотека Fish-UI достойна внимания, так как содержит в себе более 35-ти хорошо структурированных компонентов, позволяющих создавать простые и понятные интерфейсы, не перегруженные ненужными деталями.

👉 @sWebDev
Компоненты React от Khan Academy

Компоненты React, подготовленные силами Khan Academy, выпущены в виде библиотеки компонентов, в которой используется встроенный CSS и имеются комментарии. Отдельные компоненты библиотеки можно установить, воспользовавшись этой подборкой, созданной средствами Bit.

👉 @sWebDev