TIL

JavaScript Recursion Exercise

Koowoy
Flatten Create a function that flattens all nested arrays in the given array. My initial instinct was to use the JavaScript function .flat() and recursion. However, a problem occurred with the base case. In order for recursion to function correctly, the base case needs to be set to determine if the recursion should stop. In my above solution, I wanted to compare the array before and after flattening it.

Problem Solving Patterns

Koowoy
Source: JavaScript Algorithms and Data Structures Masterclass Frequency Counter When counting frequency of iterable objects, avoid nested looping that results in O(n^2), by using objects or sets to collect values. Example Create a function named “same” that compares 2 arrays, and check if one array contains the squared values of the other, with matching frequencies The Naive Solution Use nested loop to check if squared value of current looping element exists.

[JavaScript] Sending AJAX Request to Django Backend for Spotify Music Search

Koowoy
Task Create a search input and add an event listener to it in JavaScript. Whenever the search query changes, send a request to the view in the backend via url. Code // Function to Get Token function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== "") { const cookies = document.cookie.split(";"); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); // Does this cookie string begin with the name we want?

[JavaScript] Custom Music Player

Koowoy
Background The audio tag from HTML provides a default music player, or more specifically the browser provides a controllable music player for audio tags. However, since this is powered by the browser, customizing the player to fit the style and need of the web page is impossible. Therefore the alternative is to create a custom music player that is connected to the original audio source. Code HTML <!-- hidden audio tag (with tachyon display-none class) --> <audio class="media-player dn" src="{{ post.

[Django] Template Tag/Filter (Loop/Datetime)

Koowoy
Make the First Element of a Django Template Loop Different from Others The method of adding and removing current class with JavaScript to give different styling and action needs an extra step with django. When elements are created with loops, adding current class to one of the elements will automatically copy them into all others, unless there is a way to set the first item of the loop. {% for post in posts_list %} {% if forloop.

[Github] Team Project Tips, Solution when Gitignore is not Working

Koowoy
Problem Since I was using Github in cooperation for the first time, there were a few problems I have encountered with pull and merges. Before I pushed my working branch to Github, I should have checked whether an existing pull request exists, and if that were the case, the existing pull request should have be reviewed and merged first before I pushed my branch. This would have prevented me from facing merge conflicts after pushing to github.

Running Test Build and Deploy with Heroku

Koowoy
Reference Heroku Webhosting for Django - Python Django Dentist Website #12 Configuring Django Apps for Heroku General guincorn: Django uses “runserver” as the default package to run a server during development. However, when deploying with heroku, “gunicorn” should be used to run a server. whitenoise: In local environment, django is capable of searching for static files by itself. In deployment, static files are to be manually collected using “whitenoise”.

TIL of the Past: 20-10-10

Koowoy
Promise The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. In simple words, promise is used to process async operation, and when successful it returns a single value. It is mainly used to process data received from a different source and display on the page. Before promise, async operations were processed with a chain of callback functions, which, in complex cases, made the code very hard to read.

[Javascript] Conversion from if statement to OR expression | Deconstruction

Koowoy
The following themes are newly learned features of Javascript. Short-Circuit Evaluation and OR Expression While using the logical operators, for instance and, or, and not, there are cases where the assessment of the second value is irrelevant. For example in OR expressions, when the first value is true, the expression is true no matter the second value of the expression. In these cases, Javascript chooses not to evaluate the second value, and this is called “short-circuit evaluation”.

Connecting React App to Google Sheets using Google Apps Script

Koowoy
Reference: For general structure - Youtube Channel Get __it Done! For auto increment id on Google Sheets - Stack Overflow Question Motivation For my react app, I wanted to create a page where I could ask for the user’s email and name, maybe for future marketing purposes. Although storing these kind of data would conventionally require a backend server and a database connected to it. However, I wanted this project to be as lightweight as possible, preferably a Front End only project.