Персональный сайт Дмитрия Журавлева

Связь: dmitriyzhuravlev@yandex.ru

Написал скроллер для сайта: "модная" перемотка по вертикали большими блоками, размером с окно браузера.

Т.е. такое листание страниц целиком, как на некоторых лендингах.

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

Залил на гитхаб, если кому удобнее оттуда тянуть:
https://github.com/rudimadima/full-page-slider
Комментариев нет

Ни один современный браузер не даст запустить виндовый *.exe файл с помощью браузерного JS. Не разрешит даже содержимое файла прочитать с жёсткого диска без разрешения пользователя. Иначе бы любой кулкацкер лазил по чужим дискам при заходе на вредоносный сайт.

Но если очень хочется, то можно всё сделать. :) Надо пошаманить с помощью node.js.
Вариант будет удобен, когда есть парк ПК в одной организации.

Ставим на все компы node.js, ставим expressjs, делаем автостарт node.js при старте винды.

Создаём index.js:
const express = require('express');
const app = express();
const port = 5555;
const child_process = require('child_process');

app.get('/run/myscript.bat/', (req, res) => {
	res.send('Running myscript.bat');

	child_process.exec('myscript.bat', function(err, data) {  
			console.log(err);
			console.log(data.toString());                       
	});
});

app.listen(port, () => {
	console.log(`Listening at http://localhost:${port}`);
});

И создаём myscript.bat:
c:\Windows\System32\calc.exe
Для примера тут используется виндовый калькулятор.

Далее нужно всего лишь открыть в браузере адрес:
http://localhost:5555/run/myscript.bat/
и калькулятор запустится.

Соответственно нужен просто сайт/html-страница со ссылками на нужный урл. Кликаем ссылку - делаются нужные дела на компе (запускаются приложения, чистятся папки, выключается ПК и пр.).
Ну или автоматически во фреймах открывать/закрывать нужные адреса, когда требуется, т.е. вообще контроль будет со стороны сервера. В общем, простор для фантазии.
Комментариев: 2

В очередной раз изобретаю велосипед. На этот раз выезжающее из-за левого края меню.

Читать далее...

Комментариев нет

У меня было написано на Реакте приложение Тест по фронтенду.
Теперь написал аналогичное приложение на Vue.

Vue мне нравится намного больше Реакта, с ним побыстрее работается и всё как-то удобнее. Но это лишь моё скромное мнение.

Вот тут исходиники:
/js_files/vue/frontend_quiz/src.zip
Комментариев нет

Век живи - век учись. Как-то знание про многоколоночную вёрстку прошло мимо меня, но наверстать никогда не поздно. Многоколоночная вёрстка не имеет отношения к flex или grid, это ещё один способ организации контента внутри родителя. Причём поддержка идёт и в старых браузерах, что является незначительным плюсом. Вёрстка становится похожа на газетную, текст читается легче, правда не уверен, что на смартфонах будет удобно. Но никто не мешает для смартфонов это отключить, а для обычных мониторов оставить как есть. Для создания колонок на родителе используются CSS-свойства column-count, column-width, column-gap и column-rule. Причём column-rule - это shorthand-свойство для column-rule-width, column-rule-style и column-rule-color. Также есть свойство column-span, но оно ставится на потомка, а не родителя.
Этот блок простирается через все колонки, потому что у него установлено свойство column-span: all. У этого свойства могут быть только два значения - all или none.
Я сначала подумал, что это свойство будет "разрубать" колонки так, что текст каждой колонки будет снизу продолжаться, но нет, текст переносится вбок.

Свойство column-count разбивает контент родителя на заданное количество колонок. Если стоит auto, то количество зависит от заданного column-width. Свойство column-gap задаёт расстояние между колонками, причём это же свойство потом стали использовать при flex и grid вёрстке. Ну, у column-rule задаётся оформление разделителей между колонками, в виде привычного значения вроде column-rule: 2px dotted #606060;.

В общем, любопытный способ вёрстки, хотя имеет ограниченное применение, но выпендриться можно.

Кстати, если вы читаете этот пост на смартфоне с небольшим размером экрана, то никаких колонок вы здесь не увидете. Для ширины менее 430 пикселей поставил column-count: 1;.
Комментариев нет

В целях изучения Vue написал на нём SPA Ежедневник. Прикрутил Vue Router и Vuex.

Сам Vue мне очень понравился, как-то приятнее Реакта, душевнее что ли :)

Вебпак не использовал, так и выгрузил всё с нативными ES6-импортами, поэтому там куча файлов.
Комментариев нет

Меня трудно назвать любителем СССР. Как можно любить строй, который не мог обеспечить людей туалетной бумагой, поэтому люди должны были вытирать задницы газетами? Как можно любить строй, если жещины были лишены нормальных прокладок и были вынуждены изощраться с ватой, марлей, бинтами и прочими тряпочками?

Сейчас появилось огромное количество молодых людей 18-25 лет, которые резко полюбили Советский Союз. Они не жили при советской власти, но видят вокруг себя не самую приятную окружающую действительность и верят, что раньше было лучше. Таких молодых любителей СССР надо бы отправить в переполненный летний советский автобус, где бы они задохнулись от сильнейшего запах пота, потому что советская промышленность не могла опеспечить людей дезодрантами и антиперсперантами.

Всё, что касается обычного быта, при советской власти было ужасное. Отвратительные порошки, которые ничего не отстирывали. Стройматериалы для домашнего ремонта, которые нужно было где-то "доставать". Плохая мебель из ДСП с сразу перекошенными дверцами и фурнитурой плохого качества.

Полёты в космос! Ракеты! Ядерные ракеты! Величие! Это всё хорошо, если быт налажен. Но советские женщины всё-таки хотели купить косметику производства "капстран", а мужчины прекрасно понимали, что японская техника лучше отечественной.

Стоп. Я ж всё-таки свой пост решил написать про редкие плюсы советской действительности. Увы, но всё это будут узко специализированные плюсы. Здесь не будет глупостей вроде "все жили в равенстве" и "ах, какой вкусный пломбир был".

Читать далее...

Комментариев нет

В Амстердаме на днях открыли новый мост, распечатанный на 3D принтере (заметка на Хабре):
Напечатанный мост

Мост металлический, не пластиковый, 3D принтеры могут печатать металлом.

По-моему, это просто потрясающе! Я не про архитектурную ценность этого моста, а про потенциал самой технологии. Последние 70-90 лет - это эпоха деградации в архитектуре. Как бы там ни называли новые стили, но всё максимально упрощалось с каждым десятилетием. Пропала детализация, пропала уникальность. Каждая архитектурная деталь лишается изгибов, деталей и соответственно красоты. Заказчик не хочет платить деньги за крайне сложную ручную работу.

Никто уже не будет заказывать, никто уже не будет делать такое:
Нью-Йорк, вокзал

А теперь представьте, что всё это можно создавать на компьютере, любую сложную форму, а потом печатать. Теоретически, могут появиться новые "давиды" и "медные всадники", но уже созданные людьми в программах 3D-моделирования. И не нужно будет с молоточком сидеть годами и "отсекать всё лишнее".

В общем, я всецело за новую технологию, это шанс вернуться к уникализации и детализации архитектурных элементов.
Комментариев: 1

Написал своё первое расширение для Firefox.

Долгое время моим самым любимым браузером была старая Opera, которая на движке Presto. Её последняя версия - Opera 12.18 - вышла аж в феврале 2016 года, т.е. она уже безнадёжно устарела. В старой Опере было невероятное количество фишек, которые до сих пор не реализовали современные браузеры.

Одна из таких возможностей - это переключение вкладок влево-вправо обычными клавишами 1 и 2. Так умеет делать очень хороший хромобраузер Вивальди, но это, повторюсь, хромобразуер со всеми вытекающими недоделками. Например, любой хромобраузер не имеет переключаться на другую вкладку, если на странице появился запрос HTTP-аутентификации.

У Firefox тоже масса хороших фишек, но его надо дорабатывать расширениями, чтобы приблизить его к возможностям Opera Presto, вышедшей много лет назад.

Среди массы расширений на addons.mozilla.org я так и не нашёл рабочего расширения, которое бы могло переключать страницы одиночными кнопками 1 и 2. Так что пришлось писать самому, а это интересный опыт, надо сказать.

Написал, отправил на модерацию, одобрили, вот ссылка: https://addons.mozilla.org/ru/firefox/addon/1-2-key-for-tab-switch/.
Или можно напрямую с моего сайта скачать: https://dmitriyzhuravlev.ru/js_files/firefox_ext/{91b52371-953d-4479-86e2-028720f293c1}.xpi

Читать далее...

Комментариев нет

У этого блока вращающаяся разноцветная рамка.
Реализовал "движущийся" border благодаря блоку-подложке, который вращается с помощью transform: rotate().
У идеи есть минус - блок должен иметь фиксированные высоту и ширину, хотя, думается мне, если постараться, то можно и для нефиксированного что-то придумать, двигая margin, padding и т.п.
Используются ванильные CSS-переменные, без всяких SASS. Можно толщину движущейся рамки менять с помощью значения переменной --borderSize.

Т.к. используются CSS-переменные, то браузеры-динозавры не поддерживаются. Но если вручную задать значения, то и в старых браузерах заработает.

Ещё один вариант реализации - это блок, внутри которого двигаются 4 блока, прижатых к краям. Это уже не моя идея, но постараюсь и её реализовать.

HTML и CSS код внутри...

Комментариев нет

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43