KC on Webdev

 Recently, I came across this question on /r/learnprogramming Question: 2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.What is the smallest positive number that is evenly divisible by all of the numbers from 1 to 20? Well, how would you write a program to figure this out?  The answer is not that difficult, but it involves a lot of prime numbers.  The short version: we can "construct" the number by starting from 1 and work our way up to 20.  1 is obviously 1 2 is obviously 2 3 however, will be 6, as it needs to be divisible by 2 and 3 4 however, is NOT 24, but 12,  5 is 60 6 is 60 because 60 is already divisible by 6 7 is 420  8 is 840 (remember, factors) 9 is 2520 10 is still 2520.  Do you see a pattern?  Let's say you need to calculate smallestMultiple of X.  To get it, you need the PREVIOUS smallestMultiple. i.e. smallestMultiple(X-1). For simplicity, let's call it "prevSM" If that ...

We have previously created the skeletons of the game in part 1, and completed the game in part 2. We now add some "chrome" to the game, to make it look better, prettier, and so on.  And there are a LOT of things we can do, but we may need to rewrite a part of the program to accommodate the changes. This is normal and a part of the learning process.  Let's try making some simple changes. I am not going to show you ALL the changes as you can easily figure out the exact syntax with the steps I described. You can see the source code at the end. This is what it will look like: Change the Button Colors When you think about it, War button should be red, and maybe the reset button should be blue... and maybe rename it "Peace" as a joke?  Well, that's easy enough, with Bootstrap. btn-danger is red, and btn-primary is blue, so we just swap that around.  Keep a "log" of previous battles To clarify, we are adding ANOTHER field called "battle log" whe...

Previously, we have created a basic HTML page, with a simple dice rolling logic, and simple UI, with Bootstrap and jQuery, so we have the beginnings of a web-based version of Dice Wars.  In this part, we will complete the "game", where you roll the dice for two players, determine who won, adjust scores accordingly, and declare winner or loser after X points. There will also need to be a "reset" button so we can start again.  You will learn in this segment: Very simple Bootstrap grid layout, centering, and so on Simple DOM manipulation with jQuery on multiple DOM elements How to write JavaScript function with parameters so it can be reused How to write make one function call another function Create a properly working, if simple, game We will set the starting points to 5, and first player to hit 0 is the loser, and the other is the winner. Keep in mind later, we may want this to be variable so we can setup variants of the game.  Setup Two Players Right now, let's ...

Creating a project is not easy, but it is essential to demonstrate your worth as a developer. Mainly for grins, I'll start a simple project, and keep adding to it.  We'll create "dice wars", a pretty simple game. We'll start simple, but we'll embellish it until it looks really darn good. The rules for "dice wars" are available here .  I am best with JavaScript, so we'll start there. Please note that you need to have SOME fundamental knowledge of JavaScript to follow along at a normal speed. This is NOT a JavaScript tutorial, though it can be treated as a project sample.  You will learn in this segment: Very simple Bootstrap Very simple DOM manipulation with jQuery How to use the random number generator How to write a message to JavaScript console with console.log How to write JavaScript function, and how to call it from elsewhere How to click a button and make it run a function Initial Planning For the first step, w...

In part 1 we discussed how to fix the first 1/3rd of your resume so the hiring manager will want to read the rest.  Then in part 2, we discussed how to write a highlight or skills portion that highlights the skills you have learned from either school or on the job.  This is part 3, where we rewrite the experiences and education to make them more... suitable for a webdev position. While the advice is for a webdev position, the advice works for all resumes. If you are just starting out (just got out of bootcamp, just graduated) and you have mainly customer service jobs (fast food, delivery, cashier, store clerk, etc.) then you need to put your best face forward.  You Have Some Volunteer or Paid Experience If you have done websites for other people before, great! Show their URL, even if it's a blog! (However, if you just used a default theme, don't bother. That is just lame. I mean something you put some effort in, tweaked layout added extra menus, that sort of thing). URL t...

One thing that I've emphasized from Part 1 is that each resume is telling a story about you. It is self-promotion, selling you to the hiring manager. It is propaganda, trying to influence the reader regarding your suitability for a particular job.  Remember your English essay lessons? About every sentence must support the paragraph, and every paragraph must support the section, and every section must support the overall statement?  Same goes for your resume. EVERY word on the resume must support your summary... that you deserve the job, not in a begging way, but in a "of course I am good for it" way.  If you have a lot of relevant job history, you probably should use traditional / chronological resume where you just list all the jobs, since most of your careers you have been working toward this job you're applying for.  But if you have very little experience (new grad? bootcamp?) or you are shifting careers, then you need to do a little more planning. You need to do ...

I have been unemployed for many months, but after over a hundred resumes sent out, I have been dismissed left and right as unsuitable. Many of my resumes did not even generate a rejection notice.  They were so bad, they probably got filed as spam. I've even interviewed once or twice but did not pass the first round, even for pretty much entry-level positions.  So what was wrong? Apparently, my resumes really do suck. I used to just list what I did, cramming as many keywords in as possible. That does NOT work.   Modern hiring managers and/or screener sdon't read the resumes from beginning to end. They don't have the time. Instead, they use a program called ATS (applicant tracking system).  First, your resume goes through ATS (applicant tracking system), which uses AI and NLP to pull out keywords that supposedly match what the position is looking for and rates your resume, then dumps those that don't meet a certain minimum rating.  BONUS TIP: If you applied b...

Ever heard of the XY problem? No? Those of you in tech support may have seen it without knowing its name, but it actually happens quite often in programming and tech support.  Here is an example from xyproblem.info , albeit rewritten for JavaScript n00b> How do I get the last 3 letters of the filename?  feline> If it's in a variable, you can slice it like str.slice(-3) feline> Wait, why are you asking?  What do you really want?  feline>Do you want the extension (of a file)?  n00b> Uh, yes?  feline>There's no guarantee that every file name will have a three-letter extension, so blindly grabbing three characters does not solve the problem. With that said, here are three ways to get it , using regex, split, or slice+lastIndexOf  See the problem? noob asks for X (last 3 characters of string), but actually wanted to solve Y (get file extension). What if there was no extension? What if the extension is MORE THAN 3 letters?  S...

Previously, we had talked about how some people cannot problem-solve . While others take to it like duck to water. They can't see the process of the programing, esp. when it comes to applying if branches or even loops. So let's discuss that a bit.  A very simple program takes some input, process the input, and generates an output.  Get input Process input Display output Simple, right?   Let's Write a Simple Input/Process/Output program Now let's write a very simple calculator in JavaScript. Enter two numbers (with prompt), display the output with an alert box. NOTE: You can do this with command-line arguments and spit the output to the console. Or even use a different language. The idea is the same.   var a = prompt("Enter a",0) // input var b = prompt ("Enter b",0) // input var x=parseInt(a)+parseInt(b) // process alert("Result is "+x) // output You may have noticed I used parseInt. That's because prompt returns a STRING. And when you ...

Sometimes, looking at LinkedIn job listing makes me despair for all the junior webdev and software engineers, when requirements start to resemble a tragi-comedy, rather than reality.  In the US... An entry-level position should require NO existing experience.  A junior position should require 0-3 years of experience.  A mid-level position should require 3-5 years of experience.  A senior-level position should require 5-7 years of experience.  Yet it is clear that this no longer applies... Or LinkedIn employers are putting out CRAZY expectations, redefining "entry-level" to be 5-years of experience.  Here is one example. I'm not naming the guilty party, but as you can see, they defined their "junior" position as "MINIMUM of 5 years' experience"  Screenshot of a job from LinkedIn, posted 9/15/2020, where it defines "Junior" as entry-level, yet requires MINIMUM of 5 years experience And this is not even the craziest. I have seen some "e...

One question often asked by programming noobs is "why do I have to learn data structures and algorithms? I already have a ton of better stuff in the language itself. Array can be used to implement any sort of DS. Sort() build into the language is better than any sort I can implement. So why do we need to learn those at all?"  If you are ONLY interested in doing web development forever, then no, you don't need data structure and algorithms. Webdev, however, is a bit of special case, as you are mainly assembling bits and pieces of other libraries and modules and such into a coherent whole, serve it up in HTML, and style it with CSS. Get some data from user, send it to server, get some data back, present it to the user. You rarely have to crunch large datasets by yourself as a webdev.  However, if you deal with more complex software engineering, then you need some fundamentals, such as data structures and algorithms, to understand and solve even MORE complex problems. It...

NOTE: This blog post was inspired by this Reddit post In my experience, many people do not understand the difference between computer science and software engineering. They want a coding career, not understanding they want the latter, not the former.  Computer sciences usually defined as "the study of computers and computational systems". It is more about the theory and practice of computing, which involves testing and improving data structures and the algorithms to manipulate them to achieve some goal. It's not really programming per se, but meta-programming. But it's definitely about software and its efficiency, and possibly better ways of doing things, and the various trade-offs.  Knowing computer science is NOT the same as knowing DSA (data structures and algorithms). Though they are usually taught together as basics to be discussed, as big O and computational efficiency is a big part of computer science. But different students have very different goals for learni...

 Let us take a look at one of the competitors to HackerRank... CodeWars, and one of the puzzles on it. This one is called Horse-Racing Duals, and a harder version called HyperDuals. But one thing at a time.  You can access the problem here:  Link Read the problem very carefully. Noticed that it lists " external resources: Sorting, Lists "? Clearly, you will need to sort the solution.  I am going to do this in JavaScript, which is pretty universal.  First, they did NOT create any data structure(s) for you, so you have to create your own. I simply called mine horses . And I added a line in the readline loop to load the number into the array.  const   N  =  parseInt ( readline ()); var   horses = [] horses . length = N ; for  ( let   i  =  0 ;  i  <  N ;  i ++) {      const   pi  =  parseInt ( readline ());      horses [ i ]= pi } But...