Senior Frontend - javascript, html, css

Profile Card UI Карточки профилей реализованные на HTML и CSS. 👉 @seniorFront

Animating svg polygon points В HTML создана svg картинка. В ней есть элементы <polygon/>, которые анимируются библиотекой TweenMax. 👉 @seniorFront

Вот это подстава... 👉 @seniorFront

Animated Click Effect В этом видео создается анимированные эффект при клике на CSS и JS. 👉 @seniorFront

🐍💩👩‍💻👩‍💻🧑‍💻🧑‍💻🐧👩‍💻🧑‍💻👩‍💻👩‍💻 В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++/C# (343 видео, 87 книги) — Java/QA (176 видео, 32 книги) — Git/Linux (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP/1С (227 видео, 83 книги) — SQL/БД (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go/Rust (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

Masked Circle Slider Логика работы карусели реализована при помощи библиотеки slick-carousel. Элементы карусели - это SVG картинки, анимированные в JS. 👉 @seniorFront

Информационная безопасность для цифровых кочевников Сейчас я занимаюсь проектом по внедрению дополнительных механизмов проверки прав пользователей при доступе к корпоративным ресурсам. Этот опыт помог мне иначе взглянуть на угрозы, с которыми сталкиваются сотрудники, работающие удалённо и при этом часто меняющие место работы. В этой статье я хочу поделиться своими наблюдениями. Возможно, они помогут вам лучше защитить себя в дороге и заодно по-новому взглянуть на риски мобильной работы. 👉 @seniorFront

ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ Айтишники поймут ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ

​SOSAL: Современный социальный подход к программированию В мире программирования существуют различные идеологии написания кода, которые отвечают за коммуникации (Unix-way), гибкость (Agile), чистоту и читаемость кода (DRY, KISS). Все они помогают улучшить ваш код, но их уязвимость в единоличности программиста и его продукта, именно поэтому я выработал новую, социальную идеологию написания кода. Подход к программированию SOSAL основывается на предположении взаимодействия в процессе разработки множества самых различных людей. SOSAL позволяет адаптировать его для максимального удобства и продуктивности всей команды. SOSAL состоит из пяти принципов, каждый из них будет подробно описан в отдельных абзацах: 1. Socially-Conscious Code гласит о самом главном концепте работы в команде: кооперации. Для создания дружелюбной кодовой базы, каждому последователю идеологии SOSAL необходимо подробно изучить язык, но необычным образом. Самые главные части языка при работе в команде это стиль кода, чистота кода и идиоматические подходы: изучите стиль кода, распространённые методы решения проблем в языке. Это позволит остальным программистам команды быстрее влиться в решение рабочих задач. 2. Open by Default призывает к открытости кода, при отсутствии причин для обратного. Также этот принцип рекомендует комментировать код так, как будто его читают те, кто только учится программировать. Понять когда нужно комментировать или нет в этом случае очень просто (при условии что вы достаточно хороший программист): если решение проблемы не возникает машинально, или возникает через достаточно длительный срок, то рекомендуется оставить комментарий. 3. Simple Scalability рекомендует писать код, который легко масштабируется. Но стоит сказать, что реализация преждевременных оптимизаций – зло. Простота не есть примитивность, также как сложность не есть крутость. 4. Agile Adaptivity говорит о том, что код должен быть готов к изменениям, даже если они кажутся маловероятными. Обычно, при разработке сложных консольных утилит, я беру готовую библиотеку для обработки флагов и настроек, так как конфигурация на стадии разработки может очень сильно меняться. Стоит соблюдать границу между YAGNI (You Aren't Gonna Need It) и возможностью «эволюции» кодовой базы. 5. Learning-Driven Logic (Логика, основанная на обучении)Learning-Driven Logic призывает писать свой код так, чтобы в процессе написания он учил тебя и других. Рефакторинг – не наказание, а повод применить свои навыки. 👉 @seniorFront

Получите IT профессию с официальным ДОКУМЕНТОМ! Не просто курсы – а полноценное образование с дипломом о профессиональной переподготовке или удостоверением о повышении квалификации, внесенным в Росреестр! Выбирайте направление: -Web-разработчик -Инженер MikroTik -Специалист по AI и машинному обучению -Сетевой инженер -Linux-администратор -Python-программист -DevOps-инженер -Администратор Windows Server -Специалист по слаботочным сетям (СКС) Ваши гарантии: ✅Законный документ о квалификации ✅Право на ведение профдеятельности ✅Весомое преимущество при трудоустройстве ✅Поддержка ментора ✅Дистанционное обучение Инвестируйте в будущее – получите не только знания, но и официальную профессию! Перейти на сайт #реклама 16+ dms-it.ru О рекламодателе

Cool Layout with Complex Chainable Animation Создано и анимировано на HTML и SCSS. При нажатии на элемент запускается CSS анимация через событие click, обработанное в JS. 👉 @seniorFront

Что такое двустороннее связывание ? Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель. Как это работает У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле. Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы [(ngModel)], которая связывает значение HTML элемента формы (например, <input>) с свойством компонента.

<input [(ngModel)]="user.name">

В этом примере, user.name — это свойство компонента, которое связано с текстовым полем. Любое изменение в поле ввода немедленно обновит user.name, и любое изменение user.name будет немедленно отражено в поле ввода. Преимущества: - Упрощение разработки, поскольку не нужно вручную обновлять представление или модель при изменении другой части. - Улучшение пользовательского опыта, обеспечивая немедленное отображение изменений без дополнительных действий пользователя или дополнительного кода. Недостатки: - Сложность отладки, поскольку автоматическое обновление значений в обе стороны может привести к неожиданным эффектам и затруднить трассировку потока данных. - Производительность, особенно в больших и сложных приложениях, где непрерывная синхронизация данных между моделью и представлением может повлиять на быстродействие. 👉 @seniorFront

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

​Топ-10 антипаттернов в разработке ПО, которых стоит избегать Если вам достался проект, в котором копаться — всё равно что распутывать спагетти в боксерских перчатках, вы, скорее всего, столкнулись с антипаттернами. К этим практикам сначала прибегают как к быстрым решениям, но затем они превращаются в повторяющиеся ночные кошмары. Представьте себе магическую кнопку деплоя, которая ломает всё в 2 часа ночи — а дежурите вы. Антипаттерны проникают активнее всего, когда команды разработки ставят скорость выше структуры. То, что начинается как невинная короткая дорога, может перерасти в полноценного алгоритмического монстра, подрывая производительность и поддерживаемость. Джоэль Спольски говорит, что «читать код сложнее, чем его писать». А читать такой код попросту больно. Хорошая новость: вы не застряли в этом. Независимо от того, управляете ли вы кодом внутри компании или работаете с партнёрами по разработке ПО, главное — выявить эти проблемы вовремя. Давайте рассмотрим самые распространённые антипаттерны в программировании, от Спагетти-кода до «Лодочных якорей», с примерами реального кода. Вы научитесь замечать «запашки» на ранней стадии и проводить рефакторинг до того, как ваш продукт станет «Большим комком грязи» (Big Ball of Mud). 👉 @seniorFront

The Hashtag Generator Маркетологи тратят слишком много времени на введение хэштегов. Давайте поможем им с помощью нашего собственного генератора хэштегов! Вот что нужно сделать: ✓  Все слова должны начинаться с хэштега (#). ✓  Все слова должны быть написаны с заглавной буквы. ✓  Если конечный результат длиннее 140 символов, он должен вернуть false. ✓  Если входные данные или результат - пустая строка, то он должен возвращать false. Пример:

" Hello there thanks for trying my Kata"  =>  "#HelloThereThanksForTryingMyKata"
"    Hello     World   "   =>  "#HelloWorld"
""  =>  false

👉 @seniorFront

Ищем новичков в IT. Хотим показать, как с нуля получить реальный опыт в разработке сайтов и веб-приложений. Как зарабатывать на этом от 100 000 руб./мес. Как у нас новички получают заказы с первого месяца. Завтра запускаем бесплатный интенсив с куратором, где за 1 неделю поможем тебе: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг; - Использовать ChatGPT и Giga во Frontend-разработке; - Искать работу и заказы на фронтенд-разработку. Чтобы ты своими руками прошёл все этапы разработки и собрал качественный сайт, который не стыдно добавить в портфолио или продать. 👉 Успей пройти обучение — чтобы через месяц точно зарабатывать от 100 000₽ + Гайд «Как пройти собеседование в IT-компанию, если у вас нет опыта работы».

Expanding card page transition effect При нажатии на на карточку запускаются CSS анимации, а также анимации, реализованные в JS. 👉 @seniorFront

Light & Shadow Text Shadow Animation В этом видео создается источник света и анимированная тень на CSS и JS. 👉 @seniorFront

Получи грант на обучение в Центральном университете Несгораемый грант до 2 800 000 Р на учебу в бакалавриате Центрального университета. Подробнее о гранте: – Покрывает до 100% стоимости обучения – Выдается на все 4 года обучения в вузе – Сумма гранта не уменьшается, а может увеличиться за дополнительные достижения и успехи в учебе. Для учеников 10-х и 11-х классов. Участвуй в отборе! Подать заявку #реклама apply.centraluniversity.ru О рекламодателе