Todo product name что это за программа и нужна ли она

Управление личными заданиями с помощью Todo.txt

Есть множество программ для управления личными заданиями. Некоторые из этих программ обладают функциями календаря, планировщика, напоминателя и др. Но многим людям не нужна вся эта функциональность. Если вы один из них, а также комфортно себя чувствуете в командной строке, тогда вам наверняка стоит обратить внимание на консольную утилиту управления своими заданиями под названием, которое больше напоминает имя файла — Todo.txt , автор программы — Gina Trapani . В общем, программа оправдывает свое название, так как всю информацию о заданиях она хранит в одноименном файле, а сам скрипт todo.sh представляет собой оболочку для его просмотра и изменения.

Установка

Установка Todo.txt проста. Загрузив с сайта разработчика архив todo.sh.zip , распакуйте два файла. Сам bash-скрипт todo.sh нужно поместить в один из каталогов переменной окружения PATH, к примеру, в /usr/bin . Советую также переименовать todo.sh в более лаконичное todo , которое будет использоваться в примерах ниже. Второй файл .todo представляет собой конфигурационный файл, в котором нужно изменить переменную TODO_DIR, указав путь хранения вашего todo.txt, к примеру так:

Проект на JavaScript Приложение список задач ToDo

TODO_DIR=»/home/oioki/todo»

Мне показалось, что будет удобно, если список заданий будет появляться при каждом новом открытии консоли. Если вы хотите сделать также, допишите в конце файла /etc/profile строку

todo ls

Итак, начнем

Самое простое, что можно сделать с помощью Todo.txt — это добавить задание (a — от слова add):

# todo a Add: Закончить ремонт в узле связи

Добавлять задания можно и в одну строку. Однако если в вашем задании есть символ апострофа, то задание нужно заключать в кавычки:

# todo a «Посмотреть Surf’s Up»

Интересной функцией Todo.txt является возможность присваивания приоритетов заданиям. Задания с более высоким приоритетом будут отображаться выше других. Приоритет обозначается латинской буквой от A до Z, самый высокий приоритет у заданий с буквой A. Назначим наивысший приоритет ремонту (он под номером 1):

# todo p 1 A

Список текущих и выполненных заданий можно просмотреть с помощью команды

# todo ls 01 (A) Закончить ремонт в узле связи 02 Посмотреть Surf’s Up — TODO: 2 tasks in /home/oioki/todo/todo.txt.

Допустим, мы закончили ремонт и хотим отметить это в нашем списке заданий:

# todo do 1 (A) Закончить ремонт в узле связи

Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind]

Остальные действия производятся аналогичным образом. Я лишь перечислю их: дописывание задания справа (app) и слева (prep), удаление (rm), очистка списка от выполненных заданий (archive), поиск по ключевому слову (ls), поиск по текущим и выполненным (lsa), поиск по приоритету (lsp), замена задания (replace), очистка от дубликатов (remdup), занесение текущего количества заданий в отчет (report). Если вы все же испытываете затруднения, вам в помощь краткая справка:

# todo —help

Эффективное составление заданий

Другим способом эффективного составления заданий является организация напоминания о проектах. Удобно иметь один список для каждого большого проекта. Чтобы отметить какое-то задание как принадлежащее проекту, добавляйте в конце текста задания p:проект , например

# todo a «Переписать библиотеку спецфункций на C++ p:wavelet»

Аналогично, с помощью действия ls можно будет легко извлекать задания, относящиеся к отдельному проекту.

Расширения

Программа представляет собой Bash-скрипт, модифицирование которого не представляет сложностей для умелого пользователя. Естественно, что появились несколько расширений Todo.txt. Расскажу о двух наиболее интересных.

Календарь Tickler

Это расширение, написанное Tannie , позволяет разделить задания по дням и месяцам. Перед использованием расширения нужно дописать строку в конфигурационный файл Todo.txt примерно следующего содержания:

TICKLER_DIR=»/home/oioki/todo/tickler»

Расширение состоит из трех файлов. ticklerfolders.sh нужно запустить один раз, скрипт создаст структуру каталогов для календаря. Затем нужно наложить патч todotickle.diff с помощью команды

# patch /usr/bin/todo < todotickle.diff

Наконец, нужно сделать так, чтобы скрипт tickler.sh (поместим его также в /usr/bin ) запускался каждый день, для обновления списков заданий из календаря. Первое, что приходит в голову — использовать планировщик cron. Строка cron для ежедневного обновления заданий в 9 часов утра выглядит так:

* 9 * * * /usr/bin/tickler.sh

Теперь можно переносить задания на какое либо число следующего месяца либо последующий месяц с помощью действия tickle . К примеру, чтобы перенести задание под номером 3 на ближайшее 30 число, введите

# todo tickle 3 d30

Bird’s Eye — обзор заданий

birdseye.py — скрипт на языке Python, который может показать вам сводную статистику по выполненным и текущим проектам, а также категориям. Пример вывода скрипта:

Источник: rus-linux.net

Как все сделать и ничего не забыть: ToDo для компаний, рабочих групп и дома

Какие-то годы назад советские еще люди приходили на работу к 9:00, выполняли определенную функцию или поставленную на планерке одну задачу. В 18:00 они толпились уже на проходной среднего по размерам и значению завода в ожидании завершающего день звонка. Нет, я не хочу сказать, что все работали только на таких заводиках, огромных заводищах и в чем-то схожих с ними по пропускной системе НИИ. Просто была масса предприятий, KPI (примененный к настоящему живому человеку аналог КПД) сотрудников которых никак не учитывался. А если красоваться не перед кем, то делать этого и не нужно, — обычное человеческое правило, произрастающее из свойственной всем нам лени.

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

Следящих за временем каждого сотрудника людей, естественно, нет. Но буквально на пятки наступают всевозможные Goal-системы автоматизирования. Это такие удаленные в основном web-приложения (могут размещаться как на просторах WWW, так и в локальной сети), в которых определенным образом назначаются всевозможные задачи. И там же выполнение и (что очень редко) качество выполнения этих задач контролируются. Бывает, еще и деньги за реально проделанную работу начисляются, но… обо всем по порядку.

Корпоративные Goal-помощники (назовем их «goal-менеджерами») одновременно добро и зло. Во-первых, здесь у всех (кому это надо и кому дозволено данными свыше правами) все навиду. Это хорошо. Подчиненный отчитывается по выполненным задачам, руководитель просматривает результаты и накидывает еще работы. В идеале — никаких личных встреч и бессмысленного ожидания под дверью начальства, вся обработка данных производится в режиме он-лайн, а внесение изменений требует какие-то минуты в день.

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

Остаются планерки, которые воруют драгоценные часы. И остаются оффлайн-отчеты. Несмотря на то, что новая автоматизированная система и графики сама строит, и чуть ли не крестиком их вышивает.

Goal-менеджер — это не планировщик задач. Это именно комплекс, который стоит на голову выше Basecamp, Jira, Redmine или Mantis, о которых еще будет сказано ниже. Отличается от task-менеджеров и менеджеров проектов он тем, что в него отчасти переносится и бухгалтерия.

И основная фишка, главное отличие Goal-менеджера — деньги. Создатели таких систем свято верят в возможность давать каждому «по способностям». Причем, именно каждому, так как речь здесь не идет только о специалистах, которые непосредственно продают и заработок которых каждый месяц считается из количества проданных услуг и товаров. «Продают» все.

Оцифровывается деятельность специалистов по закупкам, сотрудников отдела маркетинга, руководителей подразделений и даже секретарей (которые тоже, к слову, не просто так целый день на ресепшне сидят). И все эти люди также начинают получать фиксированный оклад и плавающую премию. А премия складывается из соотношения закрытых задач к задачам на конец отчетного периода открытым.

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

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

Но рассмотрим ситуацию с упомянутым выше отделом маркетинга: ген. директор не предоставил данные для написания пресс-релиза (соответственно, пресс-релиза нет), в Яндексе случилась очередная переиндексация, после которой сайт в выдаче по «ключевикам» упал на третью страницу, подрядчик запорол огромный тираж буклетов, а оплаченный на новый год ресторан закрылся по предписанию СЭС. Все рушится, ответственность не перекладывается на чужие плечи.

Открытые задачи минусуют премию, а как следствие наблюдаем недовольство с обеих сторон и никому не нужную текучку кадров. Падение КПД компании в целом? Определенно да. Плюс лишняя нагрузка на HR и другие службы, в зависимости от ситуации.

Более простые онлайн-инструменты по управлению проектами отличаются от Goal-систем своей вседоступностью. Для мониторинга и комментирования задач в task-менеджерах, как правило, не нужно сидеть на рабочем месте или за компьютером в принципе. Многие системы вроде Jira или Basecamp имеют мобильные версии или даже специальные приложения для мобильных устройств.

И еще, благодаря отсутствию учета по оплате труда, эти системы в определенном смысле проще в освоении и ближе пользователям, нежели руководящему составу. Нет гнета и вечной гонки за так называемой «нормой». Задачи не «закрываются», а качественно выполняются. При этом у исполнителя даже остается время подумать над чем-то новым. И рожденные идеи в большинстве случаев становятся свежими задачами.

Такие инструменты как Basecamp позволяют не только выполнять задачи, но и обсуждать их «на равных». При этом задействуется как комментирование в обсуждении задачи (которое приобретает статус Форума), так и личное общение, которое в итоге все равно в том или ином виде документируется. В виде текста или даже доступных любому из участников обсуждения приложенных к проекту файлов.

Подобные системы ориентированы на рабочие группы, в которых у каждого члена рабочей группы есть свой голос. Здесь нет такого жесткого подчинения «сказал – сделал». Скорее, действует более продуктивная, на мой взгляд, цепочка «сказал – обсудили – сделали».

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

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

Остальные же остаются где-то «за бортом». Хотя реально с их применением работать становится значительно проще.

Сложности в восприятии того, что разработчикам кажется логичным — вот где кроется основная причина малой популярности отдельных систем такого рода. И вот почему некоторые task-менеджеры до сих пор остаются бесплатными, в то время как их создатели вовсе не ждут с моря погоды. Разработчики придумывают и реализуют новые функции, все более усложняя и нагромождая взаимодействие между пользователями, хотя реально следовало бы подумать лишь о такой элементарной вещи как удобная «морда».

И, наконец, о мобильных органайзерах из разряда «купи батон». Приложений очень много. Десятки, если не сотни наименований. И функционал их по большей части схож. Поэтому начну с принципиальных межплатформенных отличий в дизайне и юзабилити.

Две популярные в России smart-платформы и извечный спор «кто круче» — iOS или Android OS. Исторически сложилось так, что App Store привлекательнее для разработчиков, чем Android Market. И абсолютное большинство способных программировать под обе платформы одиночек предпочтут первую. Повлияет на то масса факторов, среди которых на передний план выдвинуто единство требований к визуализации разрабатываемого материала и стандартные наборы элементов GUI (Graphical User Interface).

Поясню. Есть iPod touch и iPhone с разрешением экрана 320х480 px или 640х960 px и есть iPad, экран которого обладает разрешающей способностью 1024х768 px. Нет всех этих «вариаций на тему», нет премиального, среднего и экономичного сегментов рынка (внутри которых даже соотношение сторон экрана у устройств зачастую разнится), почти не имеет значения разница в версиях операционной системы. Единство платформы — вот то, чего нет у Android и что есть у iOS. Поэтому оставим потуги разработчиков под Market и рассмотрим, как обстоят дела у популярных ToDo-приложений, что можно приобрести и скачать в App Store.

Ценники на ToDo-программы разнятся от «ничего» до невероятных для таких простых, казалось бы, приложений $20 (например, Things для iPad). Разброс не удивителен и его можно наблюдать где угодно — на продуктовом рынке, например, можно найти черешню по цене от 90 до 300 рублей. Но если там все дело в сообщении, которое получают вкусовые рецепторы, то здесь как раз в дизайне и юзабилити, о которых я и говорил выше. А еще, конечно, в наборе реализованных на благо пользователей функций, чрезмерное нагромождение которых также отрицательно влияет на простоту использования программы. Замкнутый круг, успешные работы в рамках которого зарабатывают своим создателям десятки и сотни тысяч долларов.

ToDo-менеджеры стоят на границе между записками вроде «купи батон» и task-менеджерами, которые мы используем для удовлетворения корпоративных нужд.

Продвинутые ToDo-приложения одинаково хорошо подходят как для работы, так и для дома. Например, можно ввести разграничение задач по назначению — создать своего рода закладки, в которые вписывать личные и корпоративные задачи. В отдельных менеджерах внутри закладок можно еще и проекты создавать, а уже в проектах — задачи. Удобная система вложенных папок работает в ToDo-программах на ура при условии сохранения легкого доступа ко всем элементам.

Синхронизация доступна, и способов (читай «направлений») синхронизации задач просто масса. Например, можно просто сохранять резервную копию базы задач на удаленном сервере, можно «шарить» (от англ. share/делиться) с другими пользователями, приближая мобильное приложение к task-менеджерам. Но мобильное приложение по большей части так и остается мобильным, где все крутится не вокруг какого-то удаленного «Облака», а вокруг устройства, на котором создаются задачи и на котором напротив этих задач со временем ставятся галочки.

Источник: habr.com

Русские Блоги

Основы Android Studio: использование TODO и пользовательское TODO

Основы Android Studio: использование TODO и пользовательское TODO

Эта статья воспроизводится сБлог Берта

• Основы Android Studio: использование TODO и пользовательское TODO

• Ниже приведен текст:
• I. Введение в TODO
• Использование Android Studio TODO

• Добавить ТОДО
• 2. Посмотреть TODO
• 3. Полное ТОДО

• Добавить FIXME
• 2. Скрининг FIXME

• 1. Пользовательский рефакторинг TODO: REFACTOR
• 2. Добавить шаблон кода Live Template
• 3 Использование REFACTOR TODO в коде

Ниже приведен текст:

I. Введение в TODO

Каждый должен был использовать программу Memo или Memo или томатную Memo и т. Д. Как правило, эта программа имеет функцию, называемую «TODO list». Что это значит? Просто список дел.

В нашей повседневной жизни мы часто думаем о том, чтобы сделать что-то одно, но мы слишком заняты, чтобы заняться этим, мы сначала запишем это в «список TODO», подождем, что у нас под рукой, или посмотрим, что мы помним после работы, а затем перейдем к Сделай это

Это также относится и к разработке. При возникновении проблем, подобных описанным выше, мы должны сначала записать:

• Дубликат кода? Отметьте это сначала и потяните это назад;
• Беспокоитесь об эффективности алгоритма? Отметьте это сначала, затем вернитесь и оптимизируйте это;
• Неоднозначная логика? Отметьте это сначала и восстановите это.

Упомянутая здесь разметка не записана в программном обеспечении для заметок: что делать с разметкой, в каком классе и в какой строке это слишком дерьмо. Вместо этого для выполнения этого требования используется функция TODO, предоставляемая Android Studio.

Использование Android Studio TODO

В Android Studio поддержка вставки тегов в код через TODO — это особый комментарий. Просто аннотации TODO можно просматривать и быстро размещать в окне просмотра TODO, предоставляемом Android Studio.

Добавить ТОДО

Конечно, вы также можете добавить TODO в строку кода внутри метода.

2. Посмотреть TODO

В правом нижнем углу Android Studio есть вкладка TODO. Нажмите, чтобы открыть представление TODO, чтобы увидеть TODO, отмеченный в проекте.

Если вкладка TODO отсутствует, вы можете открыть ее через меню в верхнем левом углу: Вид-> Окна инструментов-> TODO.

3. Полное ТОДО

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

В-третьих, использование Android Studio FIXME

В дополнение к метке TODO, мы также можем использовать FIXME, предоставляемый Android Studio, чтобы пометить некоторые проблемы, которые необходимо исправить.FIXME и TODO, по сути, ничем не отличаются, просто разные метки. В отличие от разметки TODO, FIXME может рассматриваться как вопрос TODO, который смещен в сторону разметки.

Одно предложение, чтобы прояснить разницу между ними: TODO — это общий термин, FIXME — это подразделение.

Добавить FIXME

Его использование аналогично TODO, и оно добавляется следующим образом:

Тогда вы также можете увидеть в виде TODO:

2. Скрининг FIXME

Однако, когда в проекте много TODO и FIXME, и они смешаны вместе, поиск может оказаться утомительным. В настоящее время мы можем использовать функцию «фильтра» для различения TODO и FIXME.

Сначала добавьте условия фильтрации FIXME, щелкните воронку в левой части окна TODO и выберите Edit Filters Добавьте фильтр FIXME, как показано:

После добавления снова нажмите на воронку и выберите тот, который вы только что добавили FIXME В соответствии с критериями фильтрации вы увидите только элементы TDOO, отмеченные FIXME, в представлении TODO:

В конце исправьте FIXME и удалите его.

В-четвертых, обычай TODO

Как правило, мы привыкли использовать TODO для маркировки всех задач, но TODO — это более общий термин, и все «задачи» могут быть помечены с помощью TODO. Когда в проекте большое количество TODO, вы обнаружите, что не можете быстро найти TODO, который вы ищете, или вы не можете различить тип TODO (хотя вы можете добавить описание, это описание слишком слабо для фильтрации).

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

// TODO: 2017/5/1 подлежит реструктуризации

Тем не менее, такие TODO нелегко идентифицировать и не могут быть проверены, и о них можно судить только по дополнительному описанию, которое «должно быть реконструировано» на более поздней стадии. На данный момент, согласно логике FIXME, являющейся подразделением TODO, мы не только спросим:

Можно ли настроить сегмент TODO для пометки рефакторинга?

1. Пользовательский рефакторинг TODO: REFACTOR

На самом деле, суть TODO состоит в том, чтобы удовлетворять конкретные регулярные комментарии, поэтому это легко понять.

Через меню в правом верхнем углу, Файл-> Настройки-> Редактор-> TODO, чтобы открыть панель настроек TODO, нажмите + в правом верхнем углу, чтобы добавить постоянную, как показано на рисунке:

в Pattern Регулярное выражение brefactorb.* И выберите один Icon (Необязательно) Нажмите кнопку «ОК», чтобы закрыть панель добавления, еще раз нажмите кнопку «ОК», чтобы закрыть и закрыть панель настроек.

После добавления TODO типа REFACTOR вы не можете дождаться, чтобы попробовать его, но обнаружите, что система не имеет интеллектуальных подсказок для завершения кода в любом случае, думая, что я вас обманул. На самом деле, теги TODO и умные подсказки — это две разные вещи.

Вы добавляете пользовательское правило TODO, которое обрабатывается как TODO после соответствия системы, выделяется в коде и отображается в представлении TODO, а интеллектуальные подсказки и автозаполнение Шаблон кода Функция. Это не одно и то же.

Не исключено, что вы просто нажали TODO REFACTOR в коде, но это слишком неэффективно.

// РЕФАКТОР: 1.05.2017 подлежит реструктуризации

Далее, следуйте за мной, чтобы добавить шаблон кода для REFACTOR.

2. Добавить шаблон кода Live Template

Через меню в правом верхнем углу, Файл-> Настройки-> Редактор-> Живые шаблоны Откройте страницу настроек шаблона кода и найдите AndroidComments И расширите, вы найдете знакомые fixme и todo , Мы добавим наш шаблон кода, как они. Студенты, которые не понимают, могут нажать в правом нижнем углу Help Простая учеба.

• точек AndroidComments , Нажмите в правом верхнем углу +, выберите Live Template ：
• Заполните соответствующий контент на панели, которая появляется ниже: аббревиатура, описание и текст шаблона.

• Сокращения: Когда мы вводим соответствующие сокращения в коде, появляется интеллектуальная подсказка;
• Описание: описание при умной подсказке;
• Текст шаблона: законченный текст, соответствующий аббревиатуре (не ограничиваясь кодом), где переменные могут быть объявлены;

Заполните здесь следующим образом:

Обратите внимание на редактирование переменных справа, то есть редактирование переменных. Нажмите эту кнопку, чтобы открыть панель «Редактирование переменных шаблона». В таблице четыре столбца соответствуют: имя переменной, выражение, значение по умолчанию, пропустить, если определено. Для конкретного использования вы также можете нажать Справка в правом нижнем углу, чтобы увидеть его, это не является предметом данной статьи. Посмотрите на значение, которое я наконец установил:

Здесь я установил выражение переменной даты на date (), система будет использовать текущую дату, чтобы заполнить переменную-заполнитель, и проверил опцию «пропустить», что означает, что если есть значение, оно больше не будет редактироваться само по себе.

В то же время, для переменной todo она используется для добавления описаний, а выражения не могут использоваться для присваивания, поэтому я решил присвоить значение по умолчанию «подлежать рефакторингу» и не проверял «пропуск». В этом случае система назначит мне значение «для рефакторинга» по умолчанию, но мой курсор все равно будет установлен там, и я могу продолжить редактирование или нажать Enter, чтобы использовать значение по умолчанию.

Если это не легко понять, вы можете увидеть анимацию GIF в спину, и вы поймете.

• После редактирования переменной нажмите OK Возвращаясь к предыдущей странице, в конце вам нужно определить контекст, в котором используется шаблон, то есть где вы можете вызвать шаблон кода с помощью аббревиатуры.

Ниже интерфейса есть текст: пока нет применимых контекстов. Define Нажмите, чтобы открыть список настроек шаблона приложения. Как правило, мы добавляем REFACTOR TODO в код Java, поэтому, выбирая всю Java, вы, конечно же, также можете выбирать ее по мере необходимости.

• Наконец проверьте правильность Refactor according to style , Что означает автоматическое форматирование кода (настройка выравнивания, отступа и т. Д.), Нажмите «ОК» в правом нижнем углу, используйте шаблон и выйдите.

Конечный результат таков:

Нажмите в правом нижнем углуOKИспользуйте шаблон и выйдите.

3 Использование REFACTOR TODO в коде

Где вам нужно добавить флаг рефакторинга, введите refactor В процессе ввода появится интеллектуальная подсказка, нажмите Enter для подтверждения.

На данный момент мы успешно добавили TODO типа REFACOR. Давайте посмотрим на демо. Давайте войдем медленно. Обратите внимание на то, что мы упомянули выше. Значение по умолчанию и Пропустить , Когда код завершенДата и описание эффекты:

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

Как и TODO и FIXME, код выделяется и отображается в представлении TODO.

V. Конец

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

· Наконец, я действительно ценю обмен оригинальным автором. ·

Источник: russianblogs.com

Как сделать собственную программу-тудушку за 10 минут

За пять шагов вы создадите свою программу для ведения списка дел: таск-менеджер, тудушку, называйте как хотите. Её можно сразу разместить в интернете и управлять задачами с любого компьютера или телефона. На это уйдёт 10 минут, и её можно будет бесконечно настраивать и дорабатывать под ваши потребности и предпочтения.

Для написания программы понадобится простой текстовый редактор. Мы рекомендуем установить Sublime Text, у него есть версии для всех компьютеров.

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

Создаём макет страницы

Сделаем пустую HTML-страницу, которая будет отвечать за наш список задач. В самом минимальном виде она выглядит так:

Надписи внутри угловых скобок — например, — это специальные команды HTML. Они говорят браузеру, как вести себя с разными элементами страницы. Пока что на этой странице нет элементов, есть лишь служебная часть . и часть страницы, в которой позже будет наша программа — . . Это наш чистый лист.

Обратите внимание: в самом начале есть команда . Она сообщает браузеру, что содержимое файла нужно показывать как веб-страницу. Если этого не сделать, то компьютер может не понять некоторые команды и страница будет выглядеть плохо.

Добавим в раздел служебную информацию, которая расскажет компьютеру, как работать с этой страницей. С помощью надписей мы оставляем комментарии — чтобы было понятно, что происходит в коде. Браузер на эти пометки не смотрит, это всё для нас:

Список задач

Сохраняем и снова открываем в браузере — ничего не изменилось, кроме названия вкладки: теперь там «Список задач». Но «под капотом» произошло много всего: браузер теперь понимает кодировку страницы, умеет работать с русским языком, и у него в память загружен специальный набор инструментов, которые ускорят нашу работу.

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

Сохраняем файл и обновляем страницу:

Настраиваем внешний вид

У нас уже есть страница для ведения дел, но она пока неопрятно выглядит и ничего не умеет. Разберёмся сначала с внешним видом.

Для того чтобы настроить шрифты, размеры и цвета на странице, мы будем использовать CSS-стили — это специальные команды, которые говорят браузеру, как отображать элементы на странице: какого их делать размера, как красить, какие выбирать шрифты и так далее. Стили можно подключить двумя способами: оформить отдельным файлом и дать на него ссылку или сделать всё внутри страницы. Так как у нас всего один файл, то будем работать внутри него, чтобы весь код был в одном месте. В больших проектах CSS-стили выносят в отдельный файл, чтобы из одного места управлять всеми страницами.

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

/*Задаём общие параметры для всей страницы: шрифт и отступы*/ body < text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/* Настраиваем внешний вид поля ввода*/ input < display: inline-block; margin: 20px auto; border: 2px solid #eee; padding: 10px 20px; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/*Как будет выглядеть каждый элемент нашего списка*/ .tdItem < text-align: left; padding: 10px; cursor: default; border-radius: 7px; >/*Что произойдёт, когда мы наведём курсор на любую задачу из списка*/ .tdItem:hover < background-color: lightblue; >/*Закончили со стилями*/

Помещаем этот кусок в самом конце раздела , сохраняем файл и обновляем страницу:

Теперь наш список задач выглядит аккуратнее, но по-прежнему ничего не умеет. Начинаем программировать на JavaScript.

Пишем скрипт для работы с задачами

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

Нам понадобится библиотека jQuery, чтобы код мог быстро работать с полем ввода и списком задач.

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

Строго говоря, всю работу в этой задаче можно было проделать и без jQuery, на чистом JavaScript, но это займёт немного больше времени и будет не так удобно и красиво.

А теперь пишем сам скрипт, который будет делать следующее: ждать, пока пользователь не внесёт текст в поле ввода и не нажмёт клавишу ввода. После этого скрипт помещает новую задачу в память компьютера, а потом добавляет её в конец списка. Когда задача выполнена и на неё щёлкнули мышкой, скрипт удалит соответствующую строку из списка и из памяти устройства.

Добавим раздел с нашим скриптом после раздела с jQuery:

// Тут будет наш скрипт

Заведём переменные для наших задач, которые отвечают за список:

var List = $(‘#tdlApp ul’); var Mask = ‘tdl_’;

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

У каждого браузера есть своё внутреннее хранилище данных, где он запоминает информацию с разных сайтов. Хранилище называется localStorage. Любой сайт может туда что-то записать, а потом, когда понадобится, извлечь из памяти свои данные и работать с ними дальше.

LocalStorage хорош тем, что не обнуляет данные, когда вы перезагружаете страницу. То есть сохранённая тут информация будет жить в браузере, пока вы специально её не удалите. Но есть и минусы: если вы откроете страницу в другом браузере или с другого компьютера, там будет свой localStorage и посмотреть свои задачи с другого устройства не удастся.

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

function showTasks() < // Узнаём размер хранилища var Storage_size = localStorage.length; // Если в хранилище что-то есть… if (Storage_size >0) < // то берём и добавляем это в задачи for (var i = 0; i < Storage_size; i++) < var key = localStorage.key(i); if (key.indexOf(Mask) == 0) < // и делаем это элементами списка $(‘ ‘).addClass(‘tdItem’) .attr(‘data-itemid’, key) .text(localStorage.getItem(key)) .appendTo(List); >> > >

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

// Если в хранилище уже есть какие-то задачи, то показываем их showTasks();

Теперь при запуске скрипта он проверяет, нет ли чего-то старого в памяти, и как бы «вспоминает» ваши задачи.

Теперь нужно сделать так, чтобы мы могли вводить эти задачи. Для этого нам нужно отследить тот момент, когда пользователь ввёл текст в поле на странице и нажал Enter. Если он хоть что-то написал — запоминаем это и добавляем в список. Нестрашно, если сейчас вы не до конца понимаете, что в этом коде происходит, — всему своё время. Просто используйте его, так делает большинство программистов:

$(‘#tdlApp input’).on(‘keydown’, function (e) < if (e.keyCode != 13) return; var str = e.target.value; e.target.value = «»; // Если в поле ввода было что-то написано — начинаем обрабатывать if (str.length >0) < var number_Id = 0; List.children().each(function (index, el) < var element_Id = $(el).attr(‘data-itemid’).slice(4); if (element_Id >number_Id) number_Id = element_Id; >) number_Id++; // Отправляем новую задачу сразу в память localStorage.setItem(Mask + number_Id, str); // и добавляем её в конец списка $(‘ ‘).addClass(‘tdItem’) .attr(‘data-itemid’, Mask + number_Id) .text(str).appendTo(List); > >);

Теперь наша программа умеет запоминать задачи, которые вы ввели в поле ввода. Это происходит по нажатию клавиши Enter. Осталось сделать так, чтобы по клику на любой строке в перечне задач она исчезала из памяти и убиралась из списка:

$(document).on(‘click’, ‘.tdItem’, function (e) < // Находим задачу, по которой кликнули var jet = $(e.target); // Убираем её из памяти localStorage.removeItem(jet.attr(‘data-itemid’)); // и убираем её из списка jet.remove(); >)

Всё, планировщик готов. Копируем эти части кода в наш раздел со скриптом и проверяем работу:

Если мы закроем эту страницу или перезагрузим компьютер, то данные всё равно останутся в памяти. Значит, программа работает как нужно и у нас всё получилось.
Полный текст страницы (можно скопировать целиком и вставить в текстовый редактор):

Список задач /*Задаём общие параметры для всей страницы: шрифт и отступы*/ body < text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/* Настраиваем внешний вид поля ввода*/ input < display: inline-block; margin: 20px auto; border: 2px solid #eee; padding: 10px 20px; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/*Как будет выглядеть каждый элемент нашего списка*/ .tdItem < text-align: left; padding: 10px; cursor: default; border-radius: 7px; >/*Что произойдёт, когда мы наведём курсор на любую задачу из списка*/ .tdItem:hover < background-color: lightblue; >/*Закончили со стилями*/

// Заводим переменные под наши задачи var List = $(‘#tdlApp ul’); var Mask = ‘tdl_’; // Функция, которая берёт из памяти наши задачи и делает из них список function showTasks() < // Узнаём размер хранилища var Storage_size = localStorage.length; // Если в хранилище что-то есть… if (Storage_size >0) < // то берём и добавляем это в задачи for (var i = 0; i < Storage_size; i++) < var key = localStorage.key(i); if (key.indexOf(Mask) == 0) < // и делаем это элементами списка $(‘ ‘).addClass(‘tdItem’) .attr(‘data-itemid’, key) .text(localStorage.getItem(key)) .appendTo(List); >> > > // Сразу вызываем эту функцию, вдруг в памяти уже остались задачи с прошлого раза showTasks(); // Следим, когда пользователь напишет новую задачу в поле ввода и нажмёт Enter $(‘#tdlApp input’).on(‘keydown’, function (e) < if (e.keyCode != 13) return; var str = e.target.value; e.target.value = «»; // Если в поле ввода было что-то написано — начинаем обрабатывать if (str.length >0) < var number_Id = 0; List.children().each(function (index, el) < var element_Id = $(el).attr(‘data-itemid’).slice(4); if (element_Id >number_Id) number_Id = element_Id; >) number_Id++; // Отправляем новую задачу сразу в память localStorage.setItem(Mask + number_Id, str); // и добавляем её в конец списка $(‘ ‘).addClass(‘tdItem’) .attr(‘data-itemid’, Mask + number_Id) .text(str).appendTo(List); > >); // По клику на задаче — убираем её из списка $(document).on(‘click’, ‘.tdItem’, function (e) < // Находим задачу, по которой кликнули var jet = $(e.target); // Убираем её из памяти localStorage.removeItem(jet.attr(‘data-itemid’)); // и убираем её из списка jet.remove(); >) // Закончился основной скрипт

Что можно ещё сделать

Можно перекрасить любой элемент на странице: для этого в таблице стилей CSS нужно прописать свойства нужных вам объектов. Наберите в Яндексе «CSS сменить фон страницы», и интернет вам подскажет решение.

Можно попробовать вставить в начало каждой задачи эмодзи, чтобы список стал нагляднее. Чтобы это сделать, после проверки длины строки (если она ненулевая и пользователь ввёл какой-то текст) добавьте операцию сложения символа и строки. Первое слагаемое (символ) — код эмодзи, например #128522, а второе слагаемое — та строка с задачей, которую ввёл пользователь. Результат положите снова в эту же строчку. Теперь у вас вначале будет идти красивый смайлик, а затем — текст задачи.

Можно добавить звук на закрытие задачи. Для этого используйте тег и добавьте в конец функции клика по задаче команду audio.play с помощью jQuery.

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Источник: thecode.media