pascalstockert/yolol

Yolol tutorial in Angluar + Prismic

YOLOL.info

End of Service

As of April 24, 2023 this project has reached end of service (EOS). It has been a fun and challenging road but even moreso a great learning opportunity. Alas, all great things come to an end. I thank each and every contributor for their feedback, suggestions, and PRs.

The greates of shout-outs deserves Azurethi(#0789) for his amazing work on Yazur, an open-source YOLOL interpreter written in JS. It was his work alone that made V2 of this project come to fruition.

Starting Jan 15, 2024 the initial URL for this project will loose its validity - however will continue to be reachable via this new link.

yolol's Issues

Dropdown for color-scheme

Include a dropdown in the settings for selection of the syntax highlighting - including VScode-yolol and YOLIDE

Option to open links in new tab

Nav-buttons & on-site links

Revert to first line upon reaching the execution of the last line (even if it's only the e.g. 9th line)

Next chapter button missing on chapter 5 page

On Chapter 5 the "Next chapter" button is missing.

Negative chipwaits break chips

When chipwait is <0, the chip will no longer interpret any lines, which means the user cannot change chipwait.

• Need editable output fields

White box on local vars overflow

Editor fails to create new line

Steps to recreate:

• Type "adsfasdf" in line 1
• press return to get to line 2
• type "adsfasdf" in line 2
• click after the end of line one
• press return

may work with text other than "adsfasdf" however, this is untested :)

Expected:
new empty line at line 2 & old line 2 moved to line 3

Include the library's background-color in dark-mode

Currently in dark-mode the background-color of the library remains light.

Maybe think about lightening the background-color in light-mode (lower the brightness-differences between layers)

Chapter 7 still marked as "comming soon" on landing

Fix or remove matTooltip

Tooltips from Angular Material are not working as intended - looking for a fix. It's not too big of a deal so removing them might be a valid solution.

Add github integration to yolol.info discord server

Keep track of issues in the issues section & automatically post progress updates :D

Add a line-cap of 20

Fix typography

The default css for ng-material unfortunately adds basic styling to text-elements and the like, leading to weirdly positioned text.

Pasting text into the editor includes rich text

Strip the text to it's bare minimum and assure proper line breakage.

Feature request: string pre decrement

Doing a string pre decrementation should remove the first character not the last one.
Expected behaviour:

input = "Hello World!"
--input -- input should be equal to "ello World!"

More space above headlines in library

Headlines should have more pacing on top to increase readability of the texts.

Goto without spacing doesn't work

Presumably on Yazur's side of things

Special characters breaking code snippets

Characters not included in the language spec break the code snippets
After typing \n:

Implement caching of site-data via indexedDB

Parallax headers aren't behaving like they should

Description

Headers are behaving like fixed elements when scrolling - only changing position when a scroll is concluded.

Possible fixes

Two possible ways of adjusting behavior:

1. Make headers normal scrolling DOM elements
2. Make headers fixed to the top of the screen

Links should not break to multiple lines

This will be fixed by adapting the new style dictated by Figma-Mockup

Add OpenGraph meta-tags for preview

Example:

Update Angular + Dependencies

As the current state of this repository cannot be compiled with latest Angular, re-setup the project with recent Angular-Dependencies and other 3rd-party libs. While copying components make sure to check for optimizations, bugs and the like.

• Setup vanilla Angular
• Install updated dependencies and libraries
• Copy components, services and pipes

After this is done, other issues can be adressed.

Copy pasting sometime breaks expected HTML structure

Include the cookie-notice in dark-mode

Currently the cookie-notice's background-color remains light.

Weird behavior of darkmode-saving

Sometimes darkmode is not regained when reloading the page. This bug was introduced together with the automatic setting of darkmode through the system's perferred color-setting.

Possible fix:
Remove check for preferred colors

Implement feedback-section with success-/error-messages

Regular form-input with ng-material's snackbar to display errors or successes

Editable fieldnames for globals

Display chapter contents in chapter dropdown

"One little thingy I notice; it'd be nice to have an idea of what each chapter is about from the "chapters" dropdown"

• Senkii

Update design

Update the design using Figma rather than XD

Chapter 4 and 5 have the same hero-image

Reiterate content

Landing page:
"A pre-requisite page, what people should know going into it and what they hope to learn from the program."

• Battle_wrath

Chapter 2
"Chapter 2 is a bit of a break down of how YOLOL is in the game, how they might come across it (Yolol chips, displays, how the yolol chip functions and how it relates to the web-page built editor.)"

• Battle_wrath

Rewrite the tutorial to reference either ingame-YOLOL or VSC-YOLOL

VSC-Yolol might be nice but isn't as "hands-on" as Yoloxide. Not everyone has access to the closed pre-alpha as well, making the ingame-YOLOL a not so accessible alternative.

For ingame-YOLOL take screenshots of chips in ship-editor

For VSC-YOLOL take a glimpse at: https://marketplace.visualstudio.com/items?itemName=dbaumgarten.vscode-yolol

Catch errors from Editor

Currently errors thrown from Yazur are causing the editor to be stuck upon interpreting.

Expected behavior:
Skip each line containing errors upon interpreting.

Ligatures might throw off newcomers to coding

Things like != and == might get confusing for people who have never dealt with code before.

• Add button to toggle ligatures for snippets
• Save selection of ligatures to IndexedDB

Format the output-field section

-[ ] Separate section for globals
-[ ] Separate section for local vars
-[ ] Max entries for both = 5 => Scroll: auto;
-[ ] Make values scrollable on overflow

Scroll-Top button is hidden behind elements

Switch to GraphCMS as content-delivery platform

GraphCMS has an easier query-structure while providing the possibility of up to 5 users per project for the same price as Prismic - 0€.

Following this would be optimizing requests for tutorial-pages as there's a hard-cap at 1 mil.
Solution: LocalStorage

• Set up GraphCMS project
• Integrate GraphCMS API with repo
• Rewrite cms.service.ts and adapt routing accordingly
• Save already visited routes in LocalStorage/ Search for already saved versions on route change

Create pastebin-like feature for YOLOL snippets

Responsive footer looks crappy

Description

The elements if the footer don't behave nicely when displayed on mobile.