Ive made a little diagram presenting the project saving, loading and browse tab functions – those are in the works as far as frontend is concerned. The backend endpoints are ready!

Hii!

Today I made a lot of chore-pr-like improvements including:

• translating all strings that were previously left out or added as placeholders
• fixed the headers css so all look the same
• fixed the css for the TODO table so it looks similar to the one for virtual contest tasks

and

• added an ‘Add this site’ button in the TODO list tab in the popup – it was a nice opportunity to learn the chrome’s tabs permission functions <- Im wandering if it would be useful to add it to the table for virtual contest as well… (?)

I will be submitting the new versions for review and we will se how much time it will take for mozilla to cop on! See ya

BIG UPDATE!!

HUGE NEWS!!!!

Mozilla finally reviewed the extension!1!! It was, indeed an automated screening, and I dont know why but it seems like the extension wasnt properly registered and couldnt be analyzed by their system until a human intervention or something… Good thing is it is here. I hope the updates will be a lot quicker!

Thank you all for voting, its really nice to read the comments and feedback! And I know that this projects target group is very specific and small, but Im trying my best to show my path and what Im doing and trying to improve for this sites community, through some reverse-engineering and tinkering with the source.

Also, the devlog… right…

So today I fixed the ‘pinned contests’ card not being displayed on mobile devices. It turns out that the mobile version and the desktop version are two separate, massive divs with almost the same content lol. That would partially explain the enormous loading times…

I decided we dont need the stats card because it would bring up only clutter, as you dont usually use szkopuł on a phone. The contest links are an exception because they are for convenience.

See ya next time!

Hello again!

Thank you for the comment! Im happy that someone is actually reading those!

The strategy described in the previous devlog (about getComponentJSON and spawnComponentFromJSON) worked! Now, when saving, Im recuring on all the components in the design and calling their getComponentJSON() function, which is the same (and is described in the interface, so no repeated code) for most components and also takes the custom properties into consideration! I will still need to do something with the {-1, -1} pins…

Now its the time for the popup!

little update

Im kinda too lazy to make the save system, so I keep getting distracted by implementing the least important and most useless features, like power indicators on wires visible on the picture below. It looks way better on dark mode and for now I set it as an opt-in setting. I wonder if someone is actually reading this so if you are, please leave a comment under this devlog or in the voting, that would make me really happy!

Ive wrote in my very first devlog that I want to make my apps easily scalable and modifiable, but that got a little complicated lately when I introduced components with custom properties like the buzzer. My previous idea of a saving system was mapping properties of every component that would make it reproducible, but with custom components that are in specific components thats not sufficient, so Ill have to think of a new one. Im thinking that every component can have like a getComponentJSON function and sth like spawnComponentFromJSON?

New component!

In response to your vote comments I will want to add a few more components – this is the first one (probably the easiest to make) – the buzzer. When connected to a power source it emits a constant sound at a given frequency.

Hellloooooo

After reading your comments from previous voting, I added snapping!

I also added a lot of optimisation tactics for the design page, like reducing repeated lookups (turns out it eats A LOT of memory when using ng signals which I didn’t know), reducing hot-path overload and guarding some performance-heavy functions. I got a little distracted in the end trying to get the bootstrap5 tooltips to work but Im not even sure if I need them.

See ya! (couldnt find the happy version)

Another day, another devlog

I spent most of today’s time trying to make some kind of dynamic pinning system (I wanted the extension icon pinned or shown in the toolbar only when the user is on the szkopuł site), but that didn’t quite work out because the feature allowing this was removed both from firefox and chromium some time ago (and by some time I mean like 6 years). But that’s okay, only the user will have to deal with it.

From other updates – Mozilla still hasnt reviewed the first version of the extension :))) Love you mozilla!!

I will need to actually do some tasks on the site to test out the extension… See ya!

Hellooo

I caught myself jumping from project to project (my two projects on ft specifically), but thats not that bad right? Im kinda stuck waiting anyway because it looks like this one (the ship 4 devlogs ago) didnt enter the voting queue yet .

Anyway, today I improved the task archive functionality by:

• adding a ‘for all’ text for clarity (the buttons there werent even intentional – it comes from this site questionable architecture, but I guess its okay)
• adding title attributes to buttons also for clarity and
• adding a ‘virtual contest from those task’ button. It does what you think it does. Just adds those tasks to the virtual contest tasks list. It was also quite simple to code.

I also fixed the emitTaskSolved function which I wrote about some time ago. From other updates – Mozilla still hasnt reviewed the first version of the extension :))) Love you mozilla!!

See ya next time

I added a dark mode using DarkReader as a library. It kinda broke the website so Im marking it as experimental and leaving it for now.

More backend upgrades and more learning about the backend and SQL! This is the ‘manage admins’ tab in the admin panel, and the login works now!!!

Of course, you will never see that in the end product, so I should probably focus more on adding new features to the app…

Making the login! As you can see from the commit, there is a new /admin page (not listed on the menu) that works only when you have the correct adminToken. You can try to crack the system and log in!

Ive made the AdamDuda1/circuity-backend public so you can see what I do . Here is a little flow chart of what I want to do with the admin auth. And no, I still want to make the site login-free for the users.

Today Ive coded a andmin page (accessible only through/admin, no login yet, so I won’t deploy). I never focused (in my previous projects) on the features for admins and managing dbs for example (I always did it manually, I guess, and I know that’s a very bad practise), and even if only I will ever use this panel, im kinda prowd of it and feel my projects are getting more and more production-ready!

Woah, change of plans

kind of…

Previously, I was using a free plan of supabase for my backend but I decided it would be a better idea to build my own backend. Was it? I don’t know. In fact, I don’t even exactly know where to host it. I have a raspberry pi zero 2 but im not sure if its going to handle 2x backend with sqlite + a web server (because I already have one service running on it). We’ll see!

Hello, another quick update. What you are seeing here on the screenshot is the task archive tab. It displays tasks grouped by categories and by contests. I removed unnecessary UI and added the shuffle icon button. It opens a random task from the category or the whole contest (on top). Like I wrote before, the system does not provide any kind of API so everything is scraped from the HTML. This one was relatively easy - it was just <li> elements under each div. See you next time!

BTW: It works with the filters (built into the site, you can filter for example from just one stage and the random button will pick from the filtered results)!

Heeeelooo

Another screenshot of the home page – today I added the pinned contests mechanic. You can pin a contest from the contests tab or from the home page to display on top.

From other updates: still no votes and still not reply from mozilla

Oooooookay! Shipped the 1.0 version, but still no votes and firefox still hasnt reviewed the listing! I might have to send them an email to check if its not bugged or anything or if I have to send something else to them.

Anyway, here is the new landing page! The pinned contests are in progress, but I think it looks much much better than before!

Hey! I had a little break from this project to work on szkopul-utils, my second project. I shipped it so I now (as its waiting to get voted cuz ft seems lwk dead rn) have some time to work on this project. Since the previous devlog (I also wanted the well cooked message to stay on top for some time ) I enchanced the tutorial (screen 1) and made a template for the save UI. I am going to work on that now but

I also listened to your feedback on the previous ship. I am very grateful for all the votes and messages, and Im going to make use of your suggestions to make my app even more enjoyable and usable so. Two ppl wrote about a grid or a snapping system – I added this to my TODO – and one person suggested a really interesting concept – to make a game out of it. I really like that idea and I will think on how to implement it in my project in a nice way. See you next time!

As you can see, Ive implemented a nice dashboard or summary on the main page of szkopul. It shows blank data now because this is a new account and the extension storage resets every time I reload the package, so you need to trust me it works on this one! And with this I think Im ready to ship!

Today I added the ‘reveal score’ button that shows in the menu when you have the hideScores option enabled, and the task has been submitted. Here is a gif of how it works:

Woah! Those two hours were quite productive. Ive implemented two features – inline task statements and on-same-page task statements as I call it. It works by embedding the statement links. I am a little worried about cashing on those ’s (sometimes the PDFs are updated very dynamically), but I will fix that when someone or I actually find the issue.

Today I redesigned the options page and made the export/import/erase data buttons work again! With FT being extended (ive read the message yesterday, so happy :) i may even have the change for a mac mini!

Chrome accepted my extension! I uploaded the first version yesterday and it got published!

Right now Im working on making the extension options better – I added a struct and a ‘default options’ object like for the virtual contest options because it worked well! I added options.ts with those objects and functions to get and save the options. Im seeing more and more files in the project that I intended to do in like 2 days…

Well, its not that bad and I hope some people (more than just me and the people that will vote) are actually going to use it. We will see. Look to commits history for more, and see you next time!

Moving on to the main function of my extension, Im building the panel which will display the tasks and the left time and the score counting system.

On the screen here is a ‘block unrelated subpages during virtual round’ setting working!

Another day of fighting with Bootstrap CSS!

Today I fixed adding problems to a virtual contest (had to get rid of the animation for now :(( cuz if was bugged af), made functions to get and update the virtual contest options and made the ui save the settings.

Right now I have a loadSettings() async function that gets the object from the extension storage and sets the switches state accordingly. I should probably switch from await to .then() for it to be faster, but I want to get this working first. Remind me of that when I do!!

See you next time!

And its done!

I mean, not fully done, but I did what I wanted to do today – that is: the ability to add and remove problems to a virtual contest from the problemset and rendering the table (name + link + delete button). Im saving this data in the extension storage like previously, but this time in an array of a specified type (imma need to fix the todo later so its more organised and more like this).

So next up is contest-specific settings (those will override the ones set in ‘options’ that apply normally), drawing a nice panel with the tasks during the contest and finally - the functionality! (maybe I should have started from that? It seems like the most import… eh whatever). See you next time!

Again, sorry for the Polish… I will try to do the rest in English using the translations (those are only hard-coded placeholder examples, so thats why)

On the screen you can see the virtual contest setup view – the main feature. I want to finish it first, preferably even today if I’ll be able to! Right now, Im rendering the tabs with lit and filling the placeholders when the data from browser.storage is downloaded – I also need to think of some way to cache those so its faster.

Conclusions from today: bootstrap is clumpy and much harder to use then just some tailwind plugins…

Biggest change today: Extension data management upgrades!

You can delete, export and import all the extension data (i.e. todos, current settings, language and more in the future). Export button just downloads a JSON blob from all the browser.storage items for the user, and import loads them (replaces current data).

Also, the popup if fully translated now and the language switch works!

Making up for the previous 10hrs logged as one devlog:

Today (this one hour) I focused on translations – I added a dropdown in the options page in the popup to change language. I have Polish and English available.

I also fixed some typos and styling issues.

Here is my overall plan of features:

• Notes for each tasks (already done that)
• TODO list of tasks (on it)
• Virtual contests
• misc fixes (styling, QOL, more on that later)

One more thing that I would really want to add are comments under each task (with firebase or some other serverless db). But that is more complicated so Im marking it as an additional ‘maybe will come in the future’ thing in the end.

First devlog, 10hrs, but that’s because I originally thought that this project wouldn’t be going on Flavortown. I thought that, because it is a browser extension and it is for a Polish site for oi (szkopul.edu.pl). I don’t expect many (or any people at all) that will vote to use the site. Anyways, some guy told me it was okay, so if youre a shipwriht reviewing this project, blame it on him :)

During this project, I will be learning the web extension development process :). I already know js and stuff and moreover I know how the site Im modifying works internally (its open-sourse, sio2project/oioioi on github), but it still requires some tinkering to go from making my site to trying to reverse-engineer someone else’s site.

So far I’ve created the popup’s HTML (screen 2) and menu injector (screen 1), more info and plans in the next posts – see you there!

Move improvements!

In this build:

• Fixed the tutorial (the texts still need polishing and I will probably add a few pages to explain everything)
• Added a info card (on mobile devices) that the app works better on desktops
• Implemented RLS in the db

I’m still waiting for payout for the previous ship (it will probably be like 3 cookies, but I cant reship until I get them – its lagged cuz of the voting system upgrade). The only thing left now to do it to fix the saving and make the ‘browse’ and publishing pages. After that Im ready to ship the final version!

Adding a tutorial!

In the meantime, I also:

• Fixed the menu functionality and styling issues
• Learned more about Supabase security row and how to use it (I will need it for the browse tab that is still cooking)
• Worked a bit on saving to local storage

Devlog!

Today (and yesterday) I rewrote the whole root component for it to have a proper routes support and added an expandable menu component (I was too lazy to write my own, so Im just using a styled <details> tag).

After that, I created the ‘blog’ component and started work on a mechanism for fetching the posts (it will also be useful later for the ‘browse’ tab). This version is deployed on a ‘dev’ branch so it doesn’t interfere with the previous significant version until it’s fully ready,

I have an idea for another cool project, but I also want to finish this one – so here it is :).

Another update

Finally fixed a lot of bugs like the one I talked about 2 devlogs ago about deleting components (the fix is not exacly memory efficient but Im working on that).

I also added buttons for saving the design and a ‘more’ button to expand a menu. They dont work yet but Im working on that as well. Next step is adding the saving system (I already have some part of it) and exporting to a file.

I also had an idea to make a blog but also a ‘browse’ tab where people could publish their designs and explore others’ ideas. I would prefer to do it without a whole login system—I already connected my superdb, but we’ll see how it goes with the implementation.

Im continuing to improve the app!

I saw the comments of people who voted and reviewed my project, and some (not all) of you suggested in your comments that the UX is unclear or buggy. Im aiming to improve the experience and make the user flow more intuitive. Thanks for checking out my project! :)
I already removed one annoying bug (from 2 devlogs ago) when a component would become non-interactable. I’m continuing to update and add to my TODO list. The next thing Im going to work on (if I am not distracted) is the delete key detection and properly removing a component from the design. Meanwhile, here are the things Ive already done since the ship of version 1.0:

• Added the component properties – a panel on the top right when the simulation is turned off (screen 2) – you can edit properties like labels, x/y and colors
• Speaking of… Added colors :) (screen 3)
• Components now spawn in the center
• Fixed a bug where there would be a weird rendering issue while connecting a wire
• Refactored some files with the wrong indentation method

See you next time! :)

Today’s changelog:

• Added categories for the components in the palette (on the left) and the ‘favourites’ category (which doesnt really work yet because you cant add any component to it, but Im working on it).
• Fixed removing wires – you now can just grab a wire on a connected out and drop it on the vooooid.
• Added the XOR logic gate

While recording the video below I noticed a bug (you can see Im unable to connect the XOR gate if its added right after an other deleted gate with the same ID)😅 I dont know why that is happening exactly, but Im adding it to the TODO list.

Finally working!!!

The simulation mode now fully works and you can design your logic circuits! The image below is an example (working) implementation of an twobit adder.

Some more progress today

Those 6-7hrs of work went mostly into coding the core features of the app – you can now add components to the design and connect them with wires. The next goal is adding switches and LEDs and simulation.

Other things done for this devlog:

• Adding function templates for drawing selection indicators
• Learning the PWA package for future porting
• Updating readme
• Finally fixing the flipped Y axis
• Separating rendering thumbnails and world component

Detailed code changes in commit descriptions in my repo :)

Helloo

The biggest change today is the ability to move components in the design area. And yes - the app is still not usable, but I think it’s safe to say the progress is being made.
I added some visual improvements (please ignore the weird numbers and colors on the components for debugging from the lastest commit) and made some noticeable changes to the code structure like:

• added IDs to components,
• changed the component class template from interface to abstract to be able to create shared functions
• cleaned up the mess with the positive y axis in the code vs the interface

And some more changes (you can see in the commit history if you really want to). Note for future me tho – I need to commit more frequently and more logically so it is easier to review and rollback if needed.

Little update: I made some improvements to the UI base and added the actual logic gates. For now there are only logic gates and only 3, but I put some effort into making it easily scalable and modifiable. It took some time to organize the project files so I don’t get lost trying to add things and also on the drawing (I still can’t get it quite right). I used the js’s interface feature to create a ‘template’ for any electrical component and now I just add a file that implements that interface class whenever I want to add anything. Now when I have the three basic gates, next up is going to be connecting them, making a power source and some LED to display the outputs. And simulating the circuit, of course.

This is the first serious web application I’m working on, and I decided to use AngularJS. I didn’t exacly put much thought on the choice of the first JS framework, tbh, I just checked the 4 most popular, liked the appearance of the site, and found it was developed by Google. I watched an introduction tutorial on YouTube and liked the project structure so I started using it. I’m assuming that it is probably on the most optimal choice for this project, especially if I want to learn the basics (the code will probably be messy and whenever I learn something new I will see how bad the older code really is), but I’m sure it will be fine… (in the worst case I’ll just rewrite the typescript part)

The project will focus on creating simple circuits with logic gates and simple analog and digital components (switches, sensors, buttons, etc.) and more coming in the future if the project will work out.

I will now work on the basic wires, ANDs and ORs and I’ll see you in the next devlog when some significant changes occur in the project. :)