Чуть больше года назад выкладывал свой скрипт по автоматизации настройки Windows 10. Давеча переписал Windows 10 Sophia Script в виде модуля на 10 000+ строк. Под катом — всегда самое интересное!
Front-end, Back-end разработчик
Прокачиваем свои CSS-анимации
В процессе изучения CSS-анимаций мы обычно разбираем синтаксис, говорим что-то про keyframes, про transition, про связанные с ними свойства, про то, как их активировать при наведении мыши или с помощью навешивания классов. И часто на этом все и заканчивается. И вот, сделав пару меняющих цвет кнопок или выезжающих уведомлений, люди считают, что они знают про CSS-анимации все. Но так ли это?
Разумеется, нет. Главные сложности начинаются тогда, когда речь заходит о чем-то более хитром, нежели изменение цвета или прозрачности у элемента, тогда, когда мы сталкиваемся с дизайнером с широкими взглядами, который придумыват всякие разные штуки, не особенно заботясь о том, как их потом верстать. И вот тут многие фронтендеры начинают спотыкаться. Мои наблюдения показывают, что разработчикам, причем не только начинающим, не хватает широты взглядов, не хватает каких-то дерзких идей, ломающих привычный порядок элементов на странице, чтобы реализовать что-то более-менее сложное. И мне кажется, что нужно с этим что-то сделать. В связи с этим мы сегодня посмотрим на некоторые примеры CSS-анимаций с CodePen, которые могут стать триггерами, заставляющими задуматься о широте возможностей простых казалось бы инструментов, и дадим сами себе несколько советов по поводу того, что стоит попробовать сделать при изучении этого класса анимаций. Надеюсь кому-то это поможет взглянуть на CSS-анимации под новым углом и немного прокачать свои навыки их использования.
Крутой шаринг страниц в соцсети с помощью Open Graph
Понимание CSS Grid (1 часть): Grid-контейнер
Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Creating A Grid Container» автора Rachel Andrew
Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.
В данной начальной статье будет рассказано о том, что происходит, когда вы создаёте grid-контейнер и о различных свойствах, которые можно применять к родительскому элементу для управления сеткой. Вы узнаете, что в некоторых ситуациях достаточно только свойств, применяемых к grid-контейнеру.
В этой статье мы рассмотрим:
- Создание grid-контейнера с помощью
display: grid
илиdisplay: inline-grid
- Создание колонок и строк с помощью
grid-template-columns
иgrid-template-rows
- Управление размерами неявных треков (полос / дорожек) с помощью
grid-auto-columns
иgrid-auto-rows
Знакомимся с Web Animations API
Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.
Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).
Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации.
Давайте рассмотрим этот API на простом примере.
Умный дом с Xiaomi на примере бани
Объясняем современный JavaScript динозавру
Если вы не изучали JavaScript с самого начала, то осваивать его современную версию сложно. Экосистема быстро растёт и меняется, так что трудно разобраться с проблемами, для решения которых придуманы разные инструменты. Я начал программировать в 1998-м, но начал понимать JavaScript только в 2014-м. Помню, как просматривал Browserify и смотрел на его слоган:
Browserify позволяет делать require («модули») в браузере, объединяя все ваши зависимости
Я не понял ни слова из предложения и стал разбираться, как это может помочь мне как разработчику.
Цель статьи — рассказать о контексте, в котором инструменты в JavaScript развивались вплоть до 2017-го. Начнём с самого начала и будем делать сайт, как это делали бы динозавры — безо всяких инструментов, на чистом HTML и JavaScript. Постепенно станем вводить разные инструменты, поочерёдно рассматривая решаемые ими проблемы. Благодаря историческому контексту вы сможете адаптироваться к постоянно меняющемуся ландшафту JavaScript и понять его.
Тащим музыку из ВК без публичного music API
Как все начиналось
Дело было вечером, делать было нечего… Точнее, я просто хотел загрузить аудиокнигу перед парами и тут меня ждал сюрприз. Кэш в кейт мобайле отключили. Как так? Что делать? Конечно же писать свое приложение с кэшем и аудиозаписями. Но для начала нужно понять, как вк превращает ссылки вида audio%user_id%_%track_id% в прямые ссылки на mp3. Что из этого вышло
Создание модулей JS
В этой статье я хочу рассказать вам о моём подходе к написанию модулей на JavaScript. Профессионалы вряд ли найдут для себя что-то новое, а вот новичкам, я думаю, будет полезно ознакомиться с предложенным подходом и аргументами в его пользу.
Круглый график на Canvas
Приветствую!
Совсем недавно для одного проекта мне понадобилось отображать проценты в круглых графиках(?). И как обычно я принялся искать готовое решение в интернете, однако ничего путного найти не удалось (возможно из-за того что я точно не знаю как этот элемент правильно называется). Более-менее то что мне нужно я нашел в библиотеке Knob, но его функционал оказался излишен, т.к изменять значения в графике нет необходимости, помимо этого в библиотеке затесался баг. В итоге пришлось сочинять очередной велосипед.
Web Components — будущее Web
Спустя какое время стало ясно, что основная идея Prototype вошла в противоречие с миром. Создатели браузеров ответили на возрождение Javascript добавлением новых API, многие из которых конфликтовали с реализацией Prototype.
— Sam Stephenson, создатель Prototype.js, You Are Not Your Code
Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению
Array.prototype.forEach()
, map()
и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector()
и querySelectorAll()
.Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаос под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
Карточная игра на JavaScript и Canvas, или персональный Лас-Вегас. Часть 1
Для работы я, как всегда, не использовал никакие сторонние движки и библиотеки, даже jQuery мне не понадобилось. Только функции ванильного JavaScript, включая средства работы с холстом (canvas). Холст в игре – основа для вывода всей игровой графики. В WebGL, на этот раз, не было необходимости, поэтому зоопарк поддерживаемых браузеров расширился. Средой программирования, как обычно, стал продвинутый блокнот. Игра получилась объемом 3,8 Мб, из которых 3 Мб — это семь карт спрайтов в формате png. Запускается игра по html-файлу. Сервер на PHP. В случае выбора однопользовательской игры (то есть, с ИИ), запросы к серверу не отправляются и все расчеты ведутся на клиенте. Диздок не писал – он не нужен хипстерам.
Далее – занимательная геометрия и программирование, а во второй части будет рассказ о размещении игры в социальных сетях и в магазине.
Настройки Photoshop после установки
Несмотря на то, что Фотошопом пользуюсь всё реже и реже, к нему иногда приходится возвращаться. Скетч слишком плохо работает с растром (фактически никак), поэтому графику подготавливаю в Фотошопе. В этом посте поделюсь своими настройками интерфейса.
Консоль в массы. Переход на светлую сторону. Bash
Вступление
Удобство использования того или иного инструмента заключается в том, насколько он помогает в решении конкретной задачи. Также важно, чтобы мы могли настроить этот инструмент под свои нужды. Приятным бонусом будет и тот факт, что мы можем расширить и дополнить новыми возможностями наш инструмент.
Мы добрались до самой интересной и увлекательной темы — это скрипты на
bash
. Когда вы запускаете терминал, внутри него работает специальная программа-оболочка — shell
(англ) — интерпретатор команд. Shell понимает все команды, которые вы вводите с клавиатуры, и обрабатывает их. Также выводит сообщения об ошибках, следит за корректностью команд и их синтаксисом. Примером таких команд могут быть: сменить директорию, создать новую директорию, добавить текстовый файл, отредактировать текстовый файл, сохранить изменения и другие.Правила хорошего тона при написании плагина на jQuery
Писать расширения на jQuery довольно просто, но если хотите узнать как написать их так, чтобы потом их было просто поддерживать и расширять, добро пожаловать под кат.
CSS-маски для hover-эффекта
На многих сайтах-портфолио работы представлены в виде небольших картинок-миниатюр с приятными hover-эффектами. В этой статье будет рассказано о способе сделать такой эффект, используя CSS-маски. Работает только в современных браузерах, но к счастью и в старых верстка выглядит корректно и не съезжает.
Консоль в массы. Переход на светлую сторону. Часть вторая
Вступление
Довольно долгое время я использовал в своей работе screen. Но со временем он меня перестал устраивать. Я начал искать альтернативы. Такой альтернативой является tmux. На многих порталах его описывают так: «Это тот-же screen, только на стероидах». Сначала я не мог понять почему такое сравнение пока не попробовал. Скажу честно, я на него не с первого раза перешел. Раза три-четыре пробовал, возвращался к screen’у. Но tmux все же победил.
Мобильное приложение «Shared Track»
Shared track это простое приложение для смартфонов и планшетов на базе ANDROID / IOS для создания трасс своих путешествий, прогулок и поездок. К трассам можно добавлять фото и делиться ими с друзьями и близкими.
Приложение доступно на App Store и Google Play.
Как построить гоночный коптер и не устать
В этой статье я хотел бы поделиться тем, что на мой взгляд будет самый правильным и самым простым шагом к тому, чтобы начать летать на этих диких аппаратах.
Information
- Rating
- Does not participate
- Location
- Саранск, Мордовия, Россия
- Date of birth
- Registered
- Activity