Рубрика «javascript» - 539

Вступление

Занимаюсь сайтостроением около года, и стремлюсь к оптимизации кода, насколько это возможно.
Как говорится, «Лень — двигатель прогресса», ведь именно лень подтолкнула меня к идее оптимизировать меню на сайте. Сначала я делал так:

  • Создавал меню отдельно в каждой html-странице.
  • В каждой странице выделял тот пункт меню, который соответствует адресу данной страницы.

Этой осенью я написал собственную CMS на PHP+jQuery, и с тех пользуюсь такой системой:

  • Пишу меню в отдельном файле menu.php.
  • Подключаю файл с меню в каждую страницу сайта через include().

В результате для изменения меню мне нужно редактировать только один файл menu.php, а изменения отобразятся автоматически во всём сайте. Думаю, это очевидно и является грамотным подходом к сайтостроению.
Но я задался вопросом — как теперь выделять ссылку в меню, для того, чтоб пользователь ориентировался, на какой странице сайта он находится? Делюсь своим видением решения данного вопроса.
Принцип такой: получаем текст из адресной строки, отсекаем название сайта или же часть пути до названия страницы, далее находим в меню ссылку, адрес которой соответствует полученному значению, и выполняем действия с этой ссылкой. Но я пошёл ещё дальше и решил не только выделять нужную ссылку в меню, но и добавлять текст после неё (который также получаю из адресной строки и преобразовываю). Приятного чтения!Читать полностью »

image
Давно хотел написать свою небольшую игрушку. И вот, изучив подходящие технологии, создал «шедевр».
Читать полностью »

Уважаемые профессионалы и любители информационной безопасности!

Хочу обсудить с вами вот какой интересный вопрос. Мне пришла в голову нижеследующая идея для удобного и безопасного веб-менеджера сокровенных текстовых заметок. Так ли она хороша, как я думаю? Или где-то есть подвох, и я что-то упустил? Буду рад вашему мнению.

Итак.

Цель.

Веб-сервис для управления текстовыми заметками (документами). Настолько удобный и безопасный, насколько возможно.

Требования

  • Веб-доступ — возможность доступа из любого места
  • Возможность импорта / экспорта заметок
  • На сервере (в экспортируемом файле) хранятся только заметки, только в зашифрованном виде
  • Версия для локального использования (чтобы избежать риска взлома сервера и подмены жаваскрипта)
  • Пароль не хранится нигде ни в каком виде

Читать полностью »

В поисках идеального css фреймворка. Требования, реализация, maxmertkit

Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.
Читать полностью »

image

Шелдон Купер из сериала «Теория большого взрыва»

Сегодня мы научимся быстро создавать простой угадыватель мыслей, используя язык JavaScript, а также минимальный набор HTML и CSS. Это будет простая html-страничка, которая будет функционировать без перезагрузки. Основываться всё будет на простых математический вычислениях. Вот, собственно сам угадыватель, чтобы Вы четко понимали, чем мы будем заниматься под катом.
Читать полностью »

Знаменитая социальная сеть постоянно обновляется, что далеко не всегда несет искреннюю радость пользователям. Сколько людей столько и мнений, и на каждого не угодишь, так и меня однажды не обрадовал новый стиль отображения альбомов видеозаписей в сети ВКонтакте.
Но мы программисты люди проворные, сразу смекаем – вот она радостная возможность чего-нибудь такого слепить… Вот и я слепил небольшое приспособление, которым хочу поделиться, и заодно напомнить, что такое и как делаются букмарклеты.
Читать полностью »

TL;DR
Эта обзорная статья. Такое себе "краткое содержание предыдущих серий". Она будет полезна для новичков, или тех, кто не следил за отраслью в последнее время. Для новичков это будет первый шаг во "Вселенную JavaScript", бывалые смогут освежить свои знания.

JavaScript: от начала до концаУ JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
Изначально Автор хотел написать функциональный язык. Но менеджеры хотели получить, «обычный» объектно-ориентированный. И чтобы было легко искать разработчиков для новоиспеченного языка синтаксис решили сделать похожим на Java и даже название сделали похожим.
Но на этом история не заканчивается. Java, JavaScript это торговые марки Sun (а теперь Oracle). Microsoft не мог воспользоваться именем JavaScript (Netcape и Sun дружили против Microsoft). В результате Microsoft решил сделать реверс инжиниринг JavaScript и назвал его JScript. Сделали реверс инжиниринг, и сделали его настолько хорошо, что даже содрали все баги в реализации. Позже решили сделать стандарт и назвали его ECMAScript.
Читать полностью »

Поскольку для проектов на коленках или оказания безвозмездной помощи душит жаба по написанию и использованию собственного прокси (требует денег и времени), — есть идея замены прокси существующими анонимайзерами.
=======================================================================================
Идея позволяет: читать-писать контент и message на выбранном сайте,
производить авторизацию, ставить и исполнять скрипты.

=======================================================================================
Читать полностью »

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

В последующем тексте мы рассмотрим вариант абстракции над HTML кодом, который упрощает разработку и поддержку похожим принципом, благодаря слабым связям и модульности. Такой подход успешно используется автором в двух долгосрочных проектах, один из которых — сервис интернет-банкинга.
Читать полностью »

Suit Up! Простой и легкий WYSIWYG

Статья делится на три части:

Вступление

Не так давно, а, точнее, года два назад, в кругу разработчиков, с которыми я имел честь общаться (почти все — новички), каждый, кому поступила задача поставить WYSIWYG, ставили монстрообразный TinyMCE. Этот редактор считался почему-то стандартом у многих веб разработчиков, хотя, мало кому нужны были то большое количество функций, которые предлагались программистам. Тут тебе и то и это. Наверно, таким образом, новички пытались сказать клиенту «смотри, мы тебе на сайт запилили Ворд».

Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.

Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.

Простейший редактор

Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:

<div contenteditable></div>

Редактор готов!
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js