Skip to content

Latest commit

 

History

History
251 lines (248 loc) · 15.2 KB

TODOS.md

File metadata and controls

251 lines (248 loc) · 15.2 KB
Raw

TODOS

  • Toggle-able HTML front, HTML back, and CSS editor panes

  • Toggle-able card front and back display

  • Convenient "copy code" button for editor pane

  • Syntax highlighting for HTML and CSS editor panes

  • Padding

  • Mobile support (responsive single-column display)

  • Ability to include Front on Back {{FrontSide}}

  • Auto-prettify/indent or button to do similar on blur of editor pane

  • Ability to save/load import/export designs

  • Ability to name designs

  • Add ability to clear out / reset all editor panes and title input

  • Add ability to add custom images to designs by uploading an image

  • Add images to one or more designs

  • Fix content overflow for card w/ scrollbar (overflow should not increase page height)

  • Fix focus issue where name input requires 2 clicks (should be 1)

  • [o] Create several card templates to export

    • Zenburn theme
    • Blackboard with chalk font
    • Black ink on rice paper
    • Lined paper / index card with hand-written pencil font
    • Beautiful full-photo spread
    • Another full photo display
    • 8-Bit console game
    • Illuminated manuscript
    • Green code rain
    • Glowing blue circuits
    • Blue architectural diagram
    • Da Vinci's notes
    • JRPG battle/menu screen
    • Halloween
    • Stormy night poster
    • Beach night poster
    • Starry night poster
    • Steampunk gears, brass, and glass

  • Create menu dropdown for included card templates

  • Add ability to load built-in card templates

  • Fix issue where CSS styles are not applied immediately after loading a design

  • Add ability to set styles on the card itself from within CSS editor w/ .card class

  • Add ability to set root styles and CSS vars

  • Fix global CSS style pollution, prevent CSS styles from being applied outside of card preview pane

  • Make tab buttons look more tab-like (remove bottom padding & bottom rounding)

  • Reimplement tab buttons as radio buttons for a11y purposes

  • Replace "Copy" button text with SVG icon

  • Use i18n library to enable internationalization of app interface

  • Fix bug where textarea becomes resizable when it shouldn't after editing content

  • Add branding icon (Anki icon?) to the header

  • [o] Implement ability to collapse/expand editor/preview panes

    • maximize preview pane
    • maximize editor pane

  • Add an info page / modal listing relevant/useful info such as what fonts are available, basic usage instructions, etc.

  • Add SVG/CSS image filters

    • 2 Bit color
    • Pixelize
    • Ink painting
    • Green code rain
    • Pencil drawing
    • White pencil
    • Blue architectural drawing
    • Code rain

  • Add thematically appropriate Japanese fonts to each card type

    • Zenburn
    • Blackboard and chalk
    • Rice paper and ink
    • Lined paper and pencil
    • Full photo
    • 8-Bit
    • Illuminated manuscript
    • Da Vinci Sketch
    • Green code rain
    • Glowing blue circuits
    • Blueprint
    • Full photo based on game interface
    • Fantasy game UI

  • Add ability to import Google fonts directly from user space (CSS editor pane)

  • Fix bug where syntax highlighting turns off after switching tabs or refreshing page

  • Make "Copy" button transparent by default, and solid on hover

  • Replace Save/Export and Load/Import buttons w/ SVG icons

  • Make non-active tabs dimmed by default, and brighten on hover

  • Host on GitHub pages

  • Fix bug where hosted app doesn't load CSS styles (but it should)

  • Fix hover area to be just the image inline block for Zenburn theme

  • Investigate which font supports more Japanese characters, Otsutome or Yuji Syuku

  • [o] Make all images unfiltered on hover

    • Ink painting

  • Fix ink painting filter to be more like a sumi-e painting

  • Add ability to toggle between dummy card data display and template view

  • Add meaning and example sentence fields to dummy card data and template view

  • Fix defect where erasing a design name causes the field to become inaccessible

  • Implement ability for users to add their own media breakpoints to the CSS editor pane contents

  • Add responsiveness to the cards themselves

    • full photo spread
    • 8-bit
    • blackboard
    • blueprint
    • brutalist html
    • classic apple
    • code rain
    • da vinci sketch
    • glowing blue circuits
    • index card
    • ink on ricepaper
    • zenburn

  • make card flip animation for front to back preview

  • add optional audio auto-play + setting toggle

  • experiment w/ identical HTML markdown for all cards & have the theme and filter application be conducted solely by the CSS styles

  • first time visitor welcome informational / help modal to help users get started

  • investigate implementing overlay of textarea and pre code elements so you can see the syntax highlighting as you edit

  • put donation link to buymeacoffee

  • implement export to apkg

  • implement ability to export multiple card designs at once with a multi-select

  • implement save/load to/from gist feature

    • allow users to share designs via unique URLs (built w/ gist IDs)

  • adjust lineheight and font size for blueprint design to have text fit nicely within grid

  • add glowing white lines to Glowing Blue Circuits design

  • make the drawings and text in Da Vinci Sketch design more sepia toned

  • add data name indicator inbetween left and right arrows ala "< example: namehere >"

  • add line numbers to code editor pane

  • make textarea have the exact same padding/margins as pre code elements so it has the exact same text placement

  • make it so that when clicking on the code editor pane the scroll position is maintained

  • make it so that when clicking on the code editor pane, the cursor is placed at the exact same position as the click

  • test out making a text-editable pre code block that has line numbers and syntax highlighting that updates text-highlighting and line-numbers on content change, and applies text-formatting on element blur

  • fix issue where line numbers get weirdly formatted after 99

  • add ability to toggle line numbers on/off

  • add ability to toggle syntax highlighting on/off

  • implement user defined data field name conversions, e.g. "{{reading}}" -> "{{yomi}}" via dropdown with text inputs

  • [o] add subtle filter removal transition to all images on hover

  • add glowing orb animation to Glowing Blue Circuits design

  • brainstorm some more light mode themes

  • take stock of light, dark, and neutral themes and make sure there's a good balance

  • make the paper lines move with the text in the Index Card design

  • add i18n support for Japanese for the menu UI text elements

  • add sidebar that has quick-links to useful sites, such as the GitHub repo, Google Fonts,

  • add preview thumbnail images for each card design

  • experiment with single letter card design thumbnail "icons"

  • "Anki Sync feature": provide seamless synchronization with Anki, including bidirectional updates

  • improve rendering performance to remove re-rendering "blips" when switching between tabs, clicking in or out of tabs, etc.

  • make some more card designs

    • Comic Book Panel: Styled like a frame from a comic book, complete with speech bubbles and thought clouds.
    • Steampunk: Brass, copper, and gear-themed designs with a Victorian-era industrial feel, steam effect in the background, dripping water effect, spinning gears, etc.
    • Cyberpunk: Neon lights, holographic displays, digital rain, and other cyberpunk elements.
    • Classic MacOS: Styled like the classic MacOS interface, complete with window frames, buttons, and icons.
    • Blue DOS Terminal: Styled like a blue DOS terminal, complete with a blinking cursor, monospaced font, and ASCII art.
    • Classic Typewriter: Styled like a classic typewriter, complete with a monospaced font, paper texture, and typewriter sounds.

  • design custom cursors for some themes, such as a glowing green outline for green code rain, a glowing blue outline for glowing blue circuits, etc.

  • enable custom dummy data to be added to the dummy data list by users

  • add falling green rain animation to green code rain design

  • enable use of animation frames in CSS editor

  • add typing animation to green code rain design

  • review dummy data for representative sample of short words, long words, missing fields, etc.

  • remove ".json" prefix from design names in the dropdown

  • enable user to make different front designs for different card types ("listening", "picture", "L1>L2 translation", etc.)

  • enable user to add custom JavaScript to their cards

  • implement light/dark theme toggle for the app UI

  • make active tabs stand out more by using a reverse-dim CSS effect for non-active tabs and underlining the active tab

  • fix classic apple theme cursor cursor hotspot to be pixel perfect: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

  • [o] make play button grow on hover for most card types

  • add glowing border to play button for glowing blue circuits theme

  • add plain border to play button for blueprint theme

  • style play button for HTML brutalist theme as a standard HTML button

  • refactor code for readability and maintainability

  • rename main branch to "main"

  • modify React to inject the global CSS styles dynamically into the head of the CSS editor pane, so they don't have to be written into the JSON of each design, but can still be easily copied or exported out to Anki

  • implement 'auto-switching' between preview when the editor is switched to 'Front HTML' or 'Back HTML' editor panes but not when switching to 'CSS' editor pane

  • [o] modify the non-Google font imports to be served from a CDN rather than locally from the app itself so that themes can be more easily transferred with correct font display

  • include instructions for how to host fonts and images locally in Anki to reduce on web calls, leave both local first and CDN second as options within the CSS w/ local first commented out for the web app version to confirm correct importing behavior

  • write up instructions document for how to transfer designs from the web app to Anki, post to GitHub repo

  • add link to export to Anki instructions within web app

  • [o] add text input field to all designs for text answer field on Anki cards

  • [o] add sample hint field to all designs for hint field on Anki cards

  • implement local first, remote second strategy for sourcing of fonts, images, and CSS style sheets (Tachyons and custom global styles CSS) for Anki export

  • host CDN of global styles for all designs (not necessary, can be included in the JSON of the design, and preferrably we will make less/no API calls to CDNs)

  • [o]] implement CD styled play button transfer to Anki for Anki audio fields

    • 8 bit
    • blackboard
    • blueprint
    • brutalist html
    • classic apple
    • code rain
    • da vinci sketch
    • full photo 1
    • full photo 2
    • jrpg menu
    • glowing blue circuits
    • index card
    • ink on ricepaper
    • zenburn
    • stormy night poster
    • beach night poster
    • starry night poster

  • [o] implement CD styled input element transfer to Anki for Anki input fields

    • 8 bit
    • blackboard

  • [o] implement CD styled hint element transfer to Anki for Anki hint fields

    • 8 bit
    • blackboard

  • add demo card data with a tall orientation image for testing purposes

  • fix bug in 8-bit design where multiple images would not be fully displayed

  • [o] remove global card styles from index.css, instead locate any card styles in the JSON of the card designs themselves inject the styles into the tail of the CSS editor pane when loading from JSON

  • figure out how to add custom placeholder text to text input field in Anki

  • figure out how to override default play button styling and SVG icon in Anki

  • implement offline first strategy so that the app can be used offline (because Anki needs to be able to be used offline as well)

  • implement service worker for offline first strategy

  • implement replacement of {{type:/S+}} field with HTML input element in the front HTML markdown

  • inject img tag into the editor pane for the front HTML when loading from JSON

  • figure out if possible how to inject custom hint field markdown based on ID name in HTML markdown, iterating the ID for each field, in way that works for Card Designer AND Anki

  • fix bug where multiple audio play buttons grow at the same time, instead they should only grow individually on hover

  • Dynamically take the placeholder text from the user's input in the text input div container placeholder attribute and inject it into the text input field

  • enable multiple pictures to be added to dummy data and card designs

  • enable multiple audio files to be added to dummy data and card designs

  • enable multiple hint fields to be added to dummy data and card designs

  • [o] figure out how to render full photo themes w/ multiple images in picture field: either go with flex, grid, and/or masonry layout

    • add 2nd picture to cat card

  • figure out how to render play buttons for multiple audio files in audio field for each card theme

    • add 2nd audio to cat card

  • implement field renaming from dummy data fields with global toggle renaming on/off and renamed fields to be saved into local storage

  • review screenshots of mobile view for each theme and make sure that they hold up well

    • 8 bit
    • blackboard
    • blueprint
    • brutalist html
    • classic apple
    • code rain
    • da vinci sketch
    • full photo 1
    • full photo 2
    • jrpg menu
    • glowing blue circuits
    • index card
    • ink on ricepaper
    • zenburn

  • improve stormy clouds poster theme

    • blur the background slightly
    • add a bluish tint to the text shadow
    • make the text slightly transparent to get more dark bluish tint to the metal effect

  • fix full photo 2 theme to have blurred placeholder background image on the back side when there is no image

  • make full photo 2 "dot" delimiters in text box render conditionally based on the presence of text the follows each dot

  • make blueprint theme background scroll with the text

  • fix hitbox for play button in da vinci theme to not take up full screen width

  • remove unused fonts from full photo 2 theme CSS

  • rename 'glowing-text' to text-shadow in game menu UI theme and apply white font color as a separate class

  • increase font size of term for glowing blue circuits theme by roughly a factor of 2

  • fix front side of index card to render correctly

  • remove ghost padding from bottom of index card (its the top--2 and margin-top)

  • fix syntax highlighting for HTML editor panes (it appears that LESS styles are currently being applied but it should be HTML styles)