Ah, the web. It’s become almost ubiquitous nowadays. But although it used to be accessed mostly through browsers and webpages, it’s now often accessed directly through 1st party apps instead. Regardless, I think browsers and webpages still have a lot of value, and so does understanding them. For this reason, I want to dive further into how these actually work, so let’s get started.
Basic Architecture
First of all, most web interactions are broken into two components, a server and a client (Note that nowadays this isn’t always cut-and-dry, but it’s still often the case, especially for simpler situations):
The server is the remote machine that contains all the necessary information, and knows how to aggregate it and send it to the user.
The client is the user’s interface, usually the machine they use, whether it be a smartphone, a tablet or a computer.
Server-Client
Very often, the client will send a request to a server, and the server will send back the information to the client. It is then the client’s job to present it to the user. This brings us to the front-end.
The Front-End trinity
So what is the front-end? It is the client-facing code (hence “front”-end), is running on the client’s machine and is responsible for displaying content on the page. However, while the front-end IS running on the client’s machine, it is provided by the server. Nonetheless, the client can actually inspect it and modify it.
Most modern browsers have an option called “developer console”, which can usually be accessed with the F12 key. It allows you to see and manipulate a lot of information on the page. It’s definitely worth looking into and experimenting with it!
The main objective of web-extensions is usually to inspect what is on a webpage and either modify it or keep track of things.
As for the kind of code found on the front-end, it is usually a combination of three different categories:
The Markup language, which is in charge of the content of the page itself. It contains the different elements, such as columns, tables, text, etc… The main language used here is usually HTML.
The Style Sheet language, which allows you to define the appearance of the page, such as font, color, spacing, ordering, layout, etc… The main language used here is usually CSS.
The Scripting language, which is a full-fledged programming language that allows you to program behavior, modify the page on the fly, react to user input, etc… It allows webpages to be dynamic. The main language used here is Javascript (Although PHP is still used by some big corporations).
Front-end Trinity
Note about the Scripting Language: most people will actually use a Framework, and there are many different Javascript Frameworks. The goal of a Framework is to simplify and mainstream the use of the scripting language, adding a lot of built-in functionality and libraries. Still, it’s possible to use Javascript without a framework, which is often called “Vanilla Javascript”.
The Back-end
So far, we’ve been talking about the front-end, and it might leave you wondering…if there’s a front-end, does that mean there’s also a back-end? Yes, there is: it’s the code running on the server. This includes, for example, the database (where all the data is stored) and API-endpoints that users connect to. The back-end, serving a different purpose, tends to be fairly different from the front-end, and is usually hidden from the user.
What’s Next?
This is but a basic overview of the front-end to give you a bird’s eye view of what’s involved, a simple starting point, yet an important one for anyone interested in understanding webpages and how to program them. In the upcoming weeks, as I work on my Chinese Study App project, I plan to release a few more guides discussing some of the elements highlighted here in more detail.
Here’s my all new project, which I’m hopeful will not only be useful for myself and some of my classmates, but also to demonstrate how I approach programming projects, thus helping people learn how to tackle such tasks themselves.
Inspiration
I have been thinking about this specific project for a few weeks now. It started with a new exam introduced this semester: a timed oral presentation recorded on a computer. We were given some grammar patterns to use, as well as a topic to discuss. And while I was not a fan of this exam (in part due to the stress, stringent time-constraint and the fact this was happening in a room full of people simultaneously speaking aloud), I must admit that the more I thought about it, the more I was convinced it could be a great learning tool. Thus were cemented the foundations for this project. Moreover, I have since started a daily habit of writing in Chinese, and have been struggling with using/remembering more advanced vocabulary and grammar patterns, and thus realized such a tool could also supplement my writing.
Ideation and Planning
I have had this project in the back of my mind and have been having ideating for a while. But it was time to finally write down my thoughts and initial design for the project. Here it is in image form, with my terrible handwriting.
Chinese Study App – Breakdown of ProjectChinese Study App – Initial Prototype Design
A few notes on how I decided to write this:
I first wrote broad goals for what I want to be able to accomplish with it.
I defined the functionality I want for my program into different chunks.
I linked the chunks of functionality to related goals.
I defined the priority/importance of each functionality. There is only one I consider critical, (allowing the app to be “useful” and somewhat useable). There’s an additional one I consider necessary for the application to accessible. The rest I categorized as “Stretch goals/nice to have”, and will be disregarded for now.
I listed the basic tools/technology I want to use.
I sketched the design for my first prototype.
Goals
Practice speaking Chinese using randomly vocabulary and grammar patterns randomly selected from a list, and discussing a topic randomly selected from a list, within a specified time frame.
Practice writing Chinese using vocabulary and grammar patterns randomly selected from a list.
Learn and practice web development.
Functionality
[Critical] Input lists of elements (e.g.: grammar, vocabulary, topics) and randomly select a set number from each list.
[Important/Useful] Ability to export and import lists (or to save them).
[Stetch Goals/Nice to Have]Timers
[Stetch Goals/Nice to Have]Record Speech
[Stetch Goals/Nice to Have]Write and save text (Ability to write a composition using the randomly selected elements)
[Stetch Goals/Nice to Have]Customization of interface
[Stetch Goals/Nice to Have]Add definitions/examples to vocabulary/grammar
Tools
For portability and versatility, I opted to make it a web tool for now (which can in theory be used by both a computer and mobile device). Since it’s a learning opportunity, I opted to limit myself to HTML, CSS and “vanilla” Javascript for now. (If any of this intimidates you for now, you can disregard it entirely. For beginners, I don’t think knowing how to choose tools/technology is the most important.)
Design
Here’s once again an image of the design:
Chinese Study App – Initial Prototype Design
This design is very basic, and highlights specific functionality. The design would be broken into two pages: An editing/preparation page, where you prepare your categories and their elements, and a “practice” page, where you would be shown the selected elements from each category and would practice either speaking or writing.
For the editing/preparation page, each category:
Has a name that can be edited.
Has an input for a list of elements to be added.
Has an integer value that can be added to represent the number of elements to be selected.
Can be deleted.
There would also be an option to add another category, along with a “submit” button to choose the random items from each category and bring you to the “practice” page.
Meanwhile, the “practice” page would display each category, along with the randomly selected elements. None of this should be editable. Finally, there would be a “return” button, for when the user is done, to return to the editing/preparation page.
Conclusion
Above I presented my first ideas for the tool I want to build to help learn Chinese (Which really could be used for any language). I’ve also presented my initial approach to breaking it down, limiting the scope and initial design. Hopefully this can be helpful. If there’s anything that’s unclear, or you have outstanding questions, feel free to comment below. Take care everyone, and I wish you success in your own projects!
Hello everyone,
As mentioned in Learning to Draw People Challenge – Second Pause Discussion, I have been planning to develop a Youtube extension to improve my productivity. In this post, I’ll describe my current problems with using the platform, potential solutions, along with a roadmap of the features I want to include. Not that it will be a Firefox extension, as opposed to a chromium extensions. (Since that’s the browser I use)
I’ve been thinking about such a project for a while now. The goal is not only to develop an extension to benefit my personal requirement, but also to share my thought process when tackling a programming project and show people not just how one might accomplish such a project, but also how one even approaches problems with unknowns. I also want to help you gain the confidence to solve such problems yourself, and be able to tackle more personal issues when dealing with technology. And obviously, I’ll want not only to show the solution I end up with, but also the issues and struggles I encounter along the way.
Disclaimer
A disclaimer should be in effect: I do have a background in mathematics and computer science, along with industry experience in software engineering, which means I have experience with abstract thinking and this kind of problem solving. I’ve also already tried to solve this specific problem before (a while ago), which means I know some of the issues I might encounter. However, my expertise with the front-end (what you actually see when browsing the internet) is actually limited. Thus, I’ll be exploring new territories and share how I approach such unknowns. My solutions won’t be perfect, and I’m definitely not the best engineer around, but I’m hoping I can impart some knowledge regarding problem solving, how to break down a problem, how to debug a solution, and also give you the confidence necessary to tackle yourself such issues/annoyances with products you use on a regular basis.
Problems and Solutions
As I’ve mentioned previously, Youtube tends to be a time-sink for me. During the week, I get to my desk around the end of the day and just start browsing Youtube endlessly, mindlessly going through recommendations, and usually barely getting any lasting value from it. I often forget what I’ve watched, and rarely get lasting value from these sessions. And all that time “wasted” gets in the way of both my studies and any projects I would like to tackle. And let’s not forget this can lead to “sleep procrastination”, where I just keep watching videos instead of going to sleep, further compounding my issues.
Based on this, what are the issues I can identify and do something about? Here are the main points I can think of:
The Youtube shorts are an endless stream of content with a low-barrier to entry. It means I can simply press a button to get the next bite-sized piece of content.
Mindlessly scrolling through Youtube Shorts
The Youtube recommendations make it too easy to continue watching beyond the “current video”. It’s also easy to add a lot of interesting looking videos as extra tabs to watch afterwards. This isn’t surprising based the nature of modern content, which tends to be click-bait by nature, but it still tends to be unhealthy for me.
Video recommendations next to a video – (Ads erased from screenshot)Video recommendations presented at the end of a videoA bunch of tabs added to “watch later”
By the nature of the incentives Youtube has put in place, I tend to have “FOMO” (fear of missing out) with a lot of recommended videos, which pushes me to continue watching more and more videos.
I’m passively consuming Youtube, instead of actively using it. This is to say, I just take in whatever it gives me, without actually looking for it. In my opinion, there’s a big difference between passively and actively consuming content: looking for something and trying to engage with it, as opposed to being served different things and consuming them as they come. In the latter case, there is no incentive to fully engage with it, or search deeper to better understand it. It’s just something to be taken and thrown away afterwards. (This might not be your experience with it, but it’s been my personal and subjective experience over the years).
By default, Youtube autoplays videos based on the next recommendation. However, that’s something that can be disabled and remembered. (I recommend disabling it)
*Note that all screenshots were created using a “blank youtube account”, and starting with “Tested”, which felt like a “neutral” Youtube channel.
Based on these points, I can see a few solutions I could enact. But first, I can notice a theme in terms of the mentioned issues:
There is inertia when it comes to continuously consuming this sort of content. This is because the energy required to continue is too low. I would thus like to make the alternative easier, or more tempting.
The platform wants to gain your attention and make you want to click on more videos, whether it’s something you truly care about or not. (Unsurprisingly, considering “clickthrough rate” is considered an important metric).
Based on these, here are the core potential solutions I see at a glance:
Remove Shorts from the homepage.
Homepage recommendations – Long form and Shorts
Prevent Shorts pages from scrolling infinitely.
Remove recommendations from a video’s page.
Remove recommendations shown at the end of a video.
Limit recommendations to subscribed channels.
Note that I’m not sure whether I can implement these or not, but if I could, I believe I would have a healthier relationship with Youtube.
Goals
Accordingly, here is an initial list of goals/milestones I would like to accomplish. My initial scope:
Create a basic extension with a straightforward change that can be tested locally. (Learning the basics of web extensions)
Remove Shorts recommendations from the main page.
Remove recommendations from a video page.
Remove recommendations shown at the end of a video.
With these in place, I think I would have a solid prototype to work with, and my experience should be improved.
Stretch Goals
There are a few extra features I think could be really useful to add (a few of which I’ve already mentioned), which aren’t core, nor part of the initial scope:
Prevent Shorts page’s infinite scrolling. It might be ok to watch Shorts from time to time, but I shouldn’t allow them to turn into a never-ending stream of content.
An interface to enable or disable different features.
A way to disable recommendations for a specific channel, and store it into a list that can be edited in the future. There are some channels I find really “easy” to watch to “pass time”, but it’s not always good for me to go down that road.
Add a way to track how much time is spent during a day on Youtube
Add ability to trigger certain actions based on certain conditions (E.g.: After x-mins a day, disable Youtube).
Add ability to treat music differently.
Add ability to treat videos in other languages differently (E.g.: I presently consider watching Chinese videos more productive, no matter the content, since it’s helping me with my language acquisition).
Above, we have a sizeable list of features that could be useful, although I’m not sure how easy or realistic implementing them would be. It’s definitely interesting to think about such features, but it’s important to disregard them for now. I presented them to illustrate how easy it is to simply generate a lot of extra features, causing unnecessary “scope creep”. For this reason, I believe it’s important to keep in mind what the “MVP” (minimum viable product) is, and try to keep the scope at a minimum level (especially at this early stage). Otherwise, this project might spin out of control, and become too intimidating. For this reason, I will stick to the “core features” for now. Once those are complete, I might consider adding new features, based on my needs at that point (Which might be different from what I might predict now).
Conclusion
This is definitely something I’ve been wanting to do for a while, both to help others learn how to solve issues with software on their own, and as part of a different goal to “Reclaim My Focus”, since a lot of technology I use is trying to fight for my attention, whether through push-notifications, click-bait or retention-techniques. I may eventually have a separate post on that topic alone, along with other projects I’ll want to share.
With everyone’s needs being different, it can be useful to know how to personalize your own experience with the different tools you’re using, in order to improve it.
This said, I’m planning to start working on this project soon, and I hope it’ll have the desired effect. I also hope you will find it helpful, either through learning, being able to use such a tool, or making you consider about how you use technology.
Stay tuned for more content in the near future. Stay curious and keep on learning!
