Other Articles
Hodgepodge of other articles that are somewhat javaScript related.
Objects instead of switches Switch example (complex): function Switch_RPS_Eval_Game(alice, bob) { // If Alice and Bob chose the same choice, we will output a tie if (alice === bob) { console.log("Alice and Bob tie") } else { let isAliceWin; // variable to determine if Alice won // Switch on Alice choice switch (alice) { case "Rock": switch (bob) { case "Scissors": isAliceWin = true; break; default: isAliceWin = false; } break; case "Scissors": switch (bob) { case "Paper": isAliceWin = true; break; default: isAliceWin = false; } break; case "Paper": switch (bob) { case "Rock": isAliceWin = true; break; default: isAliceWin = false; } break; } if (isAliceWin) { console.
Module Patterns What it is: This is a way to encapsulate code into self-contained units, exposing only a public API while keeping private variables and functions hidden. Think of it like a black box – you know what goes in and what comes out, but you don’t need to worry about the messy bits inside.
Why it’s hot: It helps you avoid global scope pollution (which can lead to nasty conflicts!
HOC - higher Order Components What it is: This is a function that takes a component as an argument and returns a new, enhanced component. It’s like wrapping your component in a fancy new outfit that gives it superpowers.
Why it’s hot: Perfect for sharing common logic or props across multiple components without repeating yourself. Think authentication, data fetching, or even just adding some styling.
Render props What it is: Instead of a HOC, here you pass a function as a prop to a component.
Named parameters when a function accepts more then 2 parameters its time to start using named parameters instead.
for example:
function somefunc(fName, lName, address, phone) { } //becomes function somefunc({fname, lName,address, phone}) explination
when passing parameters to the function you don’t need to worry about the order in which they are passed. Also when looking at the function its easy to figure out what the parameters are.
Default parameters in a function Sometimes you might want to be able to pass in a parameter but normally just want a default set.
Some React concepts that a junior level React Dev should know Components all components in React should be pure functions, this means that they should always produce the same output given the same input and not have any side-effects. with the above in mind the useEffect hook can allow diffrent effects in a dependable way where needed. Common methods that are used in React if statements ternary operator logical && to use short-circuiting Event handlers in React in react event handlers are in camelCase Its if statements use in JSX while you cant use if/or if/else blocks directly in JSX it is common to use something like the following.
run hugo server for dev hugo server
run hugo server for deployment hugo – base production build hugo --c --minify – minified production build hugo --gc --minify -b https://your-production-domain.com/ – set production url if needed note
correct base URL should be in your config.toml
NextJS is a great react based site builder that is flexable but has good defaults to get you started quickly on any React project. NextJS is a builder with great startup framework, many plugins avilable as well as easy to extend to meet most needs. While it is not created to make static sites it can be configured fairly easisly to accomplish that as well.
offical site of NextJS
What Editor do I use for my javaScript development? I have used and tried a lot of editors and IDEs in the past for development and all have there positives and negatives. I now use a mix of VSCode editor and neovim for most of my development and all of my javaScript work. I have used VSCode for a few years but kept coming back to Neovim for quick edits, this led me to start using the vim plugin for VSCode which worked well mostly but annoyed me in a few places sometimes when a vim key command I was used to didn’t work.
Markdown can be for everyone What is Markdown and and why am I hearing about it all the time Markdown is a simple and easy to write in plain text markup that easily converts to HTML. It is excellent for note taking or writing content that will later be converted to HTML. It has been made popular by GitHub and other programming tools for documentation because it’s simple and quick to write.
Vim is just as useful today as it was in the 1970s VI and then Vim(Vi Improved) have been used by programmers for decades but that doesn’t mean that its any less useful today. Vim is made for almost every system in use today and many programmers today still enjoy the speed, accuracy, and power Vim offers. Vim has certainly evolved since its inception and now many versions even have support for mouse (although I wouldn’t recomend getting used to using a mouse with Vim).
javaScript first, React framework is a good place to grow into next. While I belive you should learn javaScript first it can be helpful to get things done faster and better to look into a framework, my choice would be React at the time I am writting this. A framework helps you give your code some structure that others are used to as well as helping with little issues that others have already solved.
Gatsby a good site builder with many plugins avilable. Gatsby is a static site builder (This site is built with it) that uses ReactJS and GraphQL. It has many plugins avilable for it that can help speed up the process of building a site.
offical site of gatsby site of GraphQL List of plugins I have found helpfull gatsby-image – quick optimized images gatsby-plugin-catch-links – better internal links gatsby-plugin-less – adds support for less css preprocessor gatsby-transformer-remark – markdown processor gatsby-plugin-react-helmet – helps put things into the header from a page
Easy quick way to build and use custom React Components in plain websites. I found it easy to start working with React and really liked how it worked. Then I went to try and make a component in React that I could use in a project for work. That project was already set in the way we were building it for output and putting it through Webpack wasn’t really an option.