Automating My Project Setup with NPM Scripts
When I create a web application, I typically follow the same steps every time. I create a new directory in my projects folder, open that folder in VSCode, and then create three files: index.html, index.js, and style.scss. After reading about npm Scripts, I wanted to automate these actions and set up new projects from the command line.
ReadCreating a Japanese Idiom Web Application
I created a web application that would use two different APIs (one for the idioms, a separate one for the weather) to allow the user to start their day with a piece of wisdom and knowledge about the current weather conditions.
ReadUsing Media Queries in JavaScript
Having videos as backgrounds would not be in the best interest of mobile users, who would likely be trying to conserve data usage. To avoid having videos take up any bandwidth whatsoever, I decided to remove the video element from my HTML altogether and use a media query in JavaScript to add it only for users on larger screens. I decided to make the media query using a min-device-width query.
ReadUsing Session Storage for API Data
After fetching the idiom API from the server and adding it to the document, I realized I wanted the user to see the same idiom until they closed their browser. To accomplish this, I decided to use sessionStorage.
ReadWeather Backgrounds with the Open Weather Map API
Despite studying Japanese for nearly a decade now, I still struggle to understand and remember yojijukugo, or idioms comprised of four Chinese characters. For my next project, I decided it would be fun to build an app to start my day off with a different idiom. Aside from the idiom (and its pronunciation and definition), I wanted to add in a few other features for starting my day. Namely, I wanted to know the day, the date, the time, the temperature, and the current weather.
ReadAnalyzing Code with ESLint and Prettier
Over the past few days, I've developed a word counter using HTML, CSS, and vanilla JavaScript. I tried my hand at BEM architecture; variables, nesting, modules, inheritance, and parent selectors in Sass; and regular expression and DOM manipulation in JavaScript. Before pushing my project to GitHub, I decided to try using ESLint and Prettier in VSCode with the Air BnB style guide. Although this page counter was very small, I wanted to make sure its code was as clean as possible.
ReadCreating a Dark Mode Toggle with Sass
Even with smaller projects, I try to emphasize modularity. Changing one thing is always better than changing two. After learning more about structuring code with BEM, I decided to learn more about CSS processors, namely Sass.
Read