Как стать автором
Обновить
0
0
Ломакин Антон @t0H

Front-end, Back-end разработчик

Отправить сообщение

Скрипт настройки Windows 10. Часть II

Время на прочтение 4 мин
Количество просмотров 109K

Чуть больше года назад выкладывал свой скрипт по автоматизации настройки Windows 10. Давеча переписал Windows 10 Sophia Script в виде модуля на 10 000+ строк. Под катом — всегда самое интересное!

Читать далее
Всего голосов 60: ↑59 и ↓1 +58
Комментарии 143

Прокачиваем свои CSS-анимации

Время на прочтение 10 мин
Количество просмотров 78K


В процессе изучения CSS-анимаций мы обычно разбираем синтаксис, говорим что-то про keyframes, про transition, про связанные с ними свойства, про то, как их активировать при наведении мыши или с помощью навешивания классов. И часто на этом все и заканчивается. И вот, сделав пару меняющих цвет кнопок или выезжающих уведомлений, люди считают, что они знают про CSS-анимации все. Но так ли это?


Разумеется, нет. Главные сложности начинаются тогда, когда речь заходит о чем-то более хитром, нежели изменение цвета или прозрачности у элемента, тогда, когда мы сталкиваемся с дизайнером с широкими взглядами, который придумыват всякие разные штуки, не особенно заботясь о том, как их потом верстать. И вот тут многие фронтендеры начинают спотыкаться. Мои наблюдения показывают, что разработчикам, причем не только начинающим, не хватает широты взглядов, не хватает каких-то дерзких идей, ломающих привычный порядок элементов на странице, чтобы реализовать что-то более-менее сложное. И мне кажется, что нужно с этим что-то сделать. В связи с этим мы сегодня посмотрим на некоторые примеры CSS-анимаций с CodePen, которые могут стать триггерами, заставляющими задуматься о широте возможностей простых казалось бы инструментов, и дадим сами себе несколько советов по поводу того, что стоит попробовать сделать при изучении этого класса анимаций. Надеюсь кому-то это поможет взглянуть на CSS-анимации под новым углом и немного прокачать свои навыки их использования.

Всего голосов 18: ↑18 и ↓0 +18
Комментарии 3

Крутой шаринг страниц в соцсети с помощью Open Graph

Время на прочтение 2 мин
Количество просмотров 91K
Решил собрать в одной статье короткий рецепт приготовления страницы, которая круто шарится во все основные соцсети. Тем, кто вообще не в теме, придётся сначала прочитать про Open Graph protocol.
Читать дальше →
Всего голосов 18: ↑13 и ↓5 +8
Комментарии 5

Понимание CSS Grid (1 часть): Grid-контейнер

Время на прочтение 10 мин
Количество просмотров 45K

Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Creating A Grid Container» автора Rachel Andrew


Понимание CSS Grid: Создание Grid-контейнера


Хотя технология 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
Всего голосов 7: ↑7 и ↓0 +7
Комментарии 3

Знакомимся с Web Animations API

Время на прочтение 5 мин
Количество просмотров 20K
Доброго времени суток, друзья!

Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.

Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).

Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации.

Давайте рассмотрим этот API на простом примере.
Читать дальше →
Всего голосов 21: ↑21 и ↓0 +21
Комментарии 2

Умный дом с Xiaomi на примере бани

Время на прочтение 12 мин
Количество просмотров 76K
В интернете довольно много обзоров и видеороликов о построении умных домов. Бытует мнение, что все это достаточно дорого и хлопотно в организации, то есть, в целом, удел гиков. Но прогресс не стоит на месте. Устройства становятся более дешевыми, при этом более функциональными, а проектирование и монтаж – довольно простыми. Однако, в основном, обзоры фокусируются на 1-2 примерах использования, практически не покрывая нюансы и не создавая целостной картины. Поэтому в данной статье я хочу сделать обзор законченного проекта, продемонстрировать сценарии использования и встретившиеся подводные камни в построении умного дома с помощью устройств Xiaomi на примере бани. Описанные идеи с небольшими вариациями можно применить и при автоматизации квартиры.

image

Читать дальше →
Всего голосов 39: ↑37 и ↓2 +35
Комментарии 99

Просто о D3.js

Время на прочтение 6 мин
Количество просмотров 81K


70 тысяч звездочек на гитхабе и сотни интересных проектов. Кажется, что D3 это что-то большое и очень сложное, но это не так. Я расскажу об основах D3 и поделюсь опытом разработки инфографики Бюростат.

Читать дальше →
Всего голосов 34: ↑34 и ↓0 +34
Комментарии 21

Объясняем современный JavaScript динозавру

Время на прочтение 15 мин
Количество просмотров 264K


Если вы не изучали JavaScript с самого начала, то осваивать его современную версию сложно. Экосистема быстро растёт и меняется, так что трудно разобраться с проблемами, для решения которых придуманы разные инструменты. Я начал программировать в 1998-м, но начал понимать JavaScript только в 2014-м. Помню, как просматривал Browserify и смотрел на его слоган:


Browserify позволяет делать require («модули») в браузере, объединяя все ваши зависимости


Я не понял ни слова из предложения и стал разбираться, как это может помочь мне как разработчику.


Цель статьи — рассказать о контексте, в котором инструменты в JavaScript развивались вплоть до 2017-го. Начнём с самого начала и будем делать сайт, как это делали бы динозавры — безо всяких инструментов, на чистом HTML и JavaScript. Постепенно станем вводить разные инструменты, поочерёдно рассматривая решаемые ими проблемы. Благодаря историческому контексту вы сможете адаптироваться к постоянно меняющемуся ландшафту JavaScript и понять его.

Всего голосов 174: ↑171 и ↓3 +168
Комментарии 505

Тащим музыку из ВК без публичного music API

Время на прочтение 6 мин
Количество просмотров 90K

Как все начиналось


Дело было вечером, делать было нечего… Точнее, я просто хотел загрузить аудиокнигу перед парами и тут меня ждал сюрприз. Кэш в кейт мобайле отключили. Как так? Что делать? Конечно же писать свое приложение с кэшем и аудиозаписями. Но для начала нужно понять, как вк превращает ссылки вида audio%user_id%_%track_id% в прямые ссылки на mp3. Что из этого вышло приложения я не написал и как скачать определенный плейлист можно прочитать под катом.
Читать дальше →
Всего голосов 35: ↑34 и ↓1 +33
Комментарии 46

Создание модулей JS

Время на прочтение 4 мин
Количество просмотров 22K
Здравствуйте!

В этой статье я хочу рассказать вам о моём подходе к написанию модулей на JavaScript. Профессионалы вряд ли найдут для себя что-то новое, а вот новичкам, я думаю, будет полезно ознакомиться с предложенным подходом и аргументами в его пользу.
Читать дальше →
Всего голосов 27: ↑15 и ↓12 +3
Комментарии 7

Круглый график на Canvas

Время на прочтение 5 мин
Количество просмотров 26K

Приветствую!


Совсем недавно для одного проекта мне понадобилось отображать проценты в круглых графиках(?). И как обычно я принялся искать готовое решение в интернете, однако ничего путного найти не удалось (возможно из-за того что я точно не знаю как этот элемент правильно называется). Более-менее то что мне нужно я нашел в библиотеке Knob, но его функционал оказался излишен, т.к изменять значения в графике нет необходимости, помимо этого в библиотеке затесался баг. В итоге пришлось сочинять очередной велосипед.

image
Читать дальше →
Всего голосов 36: ↑33 и ↓3 +30
Комментарии 22

Web Components — будущее Web

Время на прочтение 12 мин
Количество просмотров 114K
Спустя какое время стало ясно, что основная идея 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 среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
Читать дальше →
Всего голосов 95: ↑89 и ↓6 +83
Комментарии 90

Карточная игра на JavaScript и Canvas, или персональный Лас-Вегас. Часть 1

Время на прочтение 11 мин
Количество просмотров 30K
Однажды на досуге я придумал карточную игру и, недолго думая, создал ее электронную версию. А потом добавил еще четыре игры, включая покер Техасский Холдем. А чтобы было еще интереснее, я встроил некое подобие прогресса: выигрываешь в одной игре – открывается новая. Запланировал я разместить свою игру в двух социальных сетях и в магазине Windows Store как html5-js приложение. А также, возможно, создать еще сборки под Android и iOs. Можно играть чрез сервер с другими людьми, а можно – офф-лайн с ИИ.

Для работы я, как всегда, не использовал никакие сторонние движки и библиотеки, даже jQuery мне не понадобилось. Только функции ванильного JavaScript, включая средства работы с холстом (canvas). Холст в игре – основа для вывода всей игровой графики. В WebGL, на этот раз, не было необходимости, поэтому зоопарк поддерживаемых браузеров расширился. Средой программирования, как обычно, стал продвинутый блокнот. Игра получилась объемом 3,8 Мб, из которых 3 Мб — это семь карт спрайтов в формате png. Запускается игра по html-файлу. Сервер на PHP. В случае выбора однопользовательской игры (то есть, с ИИ), запросы к серверу не отправляются и все расчеты ведутся на клиенте. Диздок не писал – он не нужен хипстерам.


Далее – занимательная геометрия и программирование, а во второй части будет рассказ о размещении игры в социальных сетях и в магазине.
Читать дальше →
Всего голосов 30: ↑28 и ↓2 +26
Комментарии 45

Настройки Photoshop после установки

Время на прочтение 2 мин
Количество просмотров 42K

image


Несмотря на то, что Фотошопом пользуюсь всё реже и реже, к нему иногда приходится возвращаться. Скетч слишком плохо работает с растром (фактически никак), поэтому графику подготавливаю в Фотошопе. В этом посте поделюсь своими настройками интерфейса.

Читать дальше →
Всего голосов 45: ↑29 и ↓16 +13
Комментарии 31

Консоль в массы. Переход на светлую сторону. Bash

Время на прочтение 6 мин
Количество просмотров 54K
keep-calm-and-bin-bash

Вступление


Удобство использования того или иного инструмента заключается в том, насколько он помогает в решении конкретной задачи. Также важно, чтобы мы могли настроить этот инструмент под свои нужды. Приятным бонусом будет и тот факт, что мы можем расширить и дополнить новыми возможностями наш инструмент.

Мы добрались до самой интересной и увлекательной темы — это скрипты на bash. Когда вы запускаете терминал, внутри него работает специальная программа-оболочка — shell (англ) — интерпретатор команд. Shell понимает все команды, которые вы вводите с клавиатуры, и обрабатывает их. Также выводит сообщения об ошибках, следит за корректностью команд и их синтаксисом. Примером таких команд могут быть: сменить директорию, создать новую директорию, добавить текстовый файл, отредактировать текстовый файл, сохранить изменения и другие.
Всего голосов 69: ↑57 и ↓12 +45
Комментарии 108

Правила хорошего тона при написании плагина на jQuery

Время на прочтение 7 мин
Количество просмотров 32K
Правила хорошего тона при написании плагина на jQueryЯ написал уйму плагинов на jQuery. Если посмотреть код всех плагинов, сортируя их по дате публикации на github, то можно проследить эволюцию кода. Ни в одном из этих плагинов не соблюдены все рекомендации, которые будут описаны ниже. Все что будет описано, лишь мой личный опыт, накопленный от проекта к проекту.
Писать расширения на jQuery довольно просто, но если хотите узнать как написать их так, чтобы потом их было просто поддерживать и расширять, добро пожаловать под кат.
Читать дальше →
Всего голосов 31: ↑27 и ↓4 +23
Комментарии 36

CSS-маски для hover-эффекта

Время на прочтение 4 мин
Количество просмотров 71K


На многих сайтах-портфолио работы представлены в виде небольших картинок-миниатюр с приятными hover-эффектами. В этой статье будет рассказано о способе сделать такой эффект, используя CSS-маски. Работает только в современных браузерах, но к счастью и в старых верстка выглядит корректно и не съезжает.
Читать дальше →
Всего голосов 58: ↑54 и ↓4 +50
Комментарии 11

Консоль в массы. Переход на светлую сторону. Часть вторая

Время на прочтение 6 мин
Количество просмотров 34K
tmux example

Вступление


Довольно долгое время я использовал в своей работе screen. Но со временем он меня перестал устраивать. Я начал искать альтернативы. Такой альтернативой является tmux. На многих порталах его описывают так: «Это тот-же screen, только на стероидах». Сначала я не мог понять почему такое сравнение пока не попробовал. Скажу честно, я на него не с первого раза перешел. Раза три-четыре пробовал, возвращался к screen’у. Но tmux все же победил.
Всего голосов 31: ↑28 и ↓3 +25
Комментарии 38

Мобильное приложение «Shared Track»

Время на прочтение 2 мин
Количество просмотров 2.3K


Shared track это простое приложение для смартфонов и планшетов на базе ANDROID / IOS для создания трасс своих путешествий, прогулок и поездок. К трассам можно добавлять фото и делиться ими с друзьями и близкими.

Приложение доступно на App Store и Google Play.

Читать дальше →
Всего голосов 15: ↑6 и ↓9 -3
Комментарии 8

Как построить гоночный коптер и не устать

Время на прочтение 6 мин
Количество просмотров 24K
Многих интересует тема строительства мультироторных гоночных квадрокоптеров на раме ZMR250, но как только начинаешь исследовать тему, то обнаруживается просто тонна специфической информации, которая может только отпугнуть новичков, но никак не помочь при этом.

В этой статье я хотел бы поделиться тем, что на мой взгляд будет самый правильным и самым простым шагом к тому, чтобы начать летать на этих диких аппаратах.


Читать дальше →
Всего голосов 25: ↑25 и ↓0 +25
Комментарии 55

Информация

В рейтинге
Не участвует
Откуда
Саранск, Мордовия, Россия
Дата рождения
Зарегистрирован
Активность