Noobie Programmer

ReactJS: how to create a toggle show/hide in less than 30 seconds | Noobie Programmer Since I've been trying to compare vanilla javascript, jquery and reactjs on which is the easiest to use. I made a simple program on how to hide/show a simple div by clicking a button in each ways. ReactJS vs Javascript vs JQuery Here is the javascript: See the Pen Toggle hide class name using vanilla javascript by Noobie Programmer ( @noobieprogrammer ) on CodePen . Here is the jquery: See the Pen bGpMyyp by Noobie Programmer ( @noobieprogrammer ) on CodePen . And, most especially using ReactJS: See the Pen ReactJS: create a toggle in less than 30 seconds by Noobie Programmer ( @noobieprogrammer ) on CodePen . Code So since my favorite is react let's break down the code one by one. And then later on you'll realize it is so easy to create a toggle or use any condition with react. Of course before anything els...

     I've been asked to teach about the DOM... but first and foremost what is the DOM ? Is it when you are angry and you say DOMmit!!! hehe Or Is it your friend DOMinick??? Well kidding aside, the DOM just stands for Document Object Model (😅Sorry for joking but please continue reading the article - there are javascript examples below in codepen ). Browser is taking the HTML sent from the server and converting it to the DOM. so the browser is based on the DOM and not on the html and everytime we edit the dom using javascript it gets reflected on the screen. Is the browser's internal programmatic representation of the web page. Which basically means one thing, you can manipulate the web page using the dom. and how do we do it? of course by using our favorite language, JAVASCRIPT! Since the dom is more or less an object in javascript, it contains several function to access, modify and delete certain elements. If you are familiar with jquery a...

We will be building a simple "Hello World" for newbies/noobies who wants to be different and have swag 😎. We will make our own computer literally say "Hello World". Yes you'll hear them speak those words or anything you would like to type like: "I wanna kick my boss/teacher, [his name]", once in a while please be honest with your feelings. Kidding aside, we will just be needing 2 lines for this program to work. Btw if you want the more in depth version of this tutorial then checkout this youtube video:  And here are the tools that we need: NodeJS Say  (A third party library in node) and one last thing: Your brain 😉 First, let's create a project folder and a file named index.js . Then open a cmd on that folder and type the command: npm init Enter the details it needs or just press enter till a file named package.json is created. After that we continue by installing the Say library.  npm i --save say Remember: In most cases, in coding you don...

Hello again my dear noobies, After some years of using the React framework, I finally feel like I need to say this especially to those newbies out there in the javascript language or React framework. Tired with those messy looking codes while looping on an array? Or maybe you want to get the sum of the list? Or maybe you want to convert the list of object into a list of components? You may have lots of problems and spaghetti codes but worry no more. The  lodash library is here to save your day. Loops Before anything else let's start with loops, afterall, everyone else uses loops here. For example we have an array named data where it's value is a list of object with properties name and age. const data = [     {"name": "Zack", age: 36},     {"name": "Ashley": age: 12} ] and imagine we want to print all name... Codes like these: for (let i = 0; i < data.length; i++) {      let d = data[i];      console.log(d.name); } Can be convert...

How to destroy node.js in 60 seconds with deno.js Hello guys, Noobie programmer here!!! Today I will teach you how to destroy node.js in 60 seconds with deno.js which is another Javascript runtime (though you can use Typescript in it. And also, a little trivia before we start: DENO is short fo DEstroy NOde hence the name. If you want the video version it is here: https://youtu.be/tG9EMTlE-Uk Install Deno First and foremost let's go to the website of the deno.js:  https://deno.land/  . We need to install deno first and it's written in the website see the code below. For mac/ubuntu users:  curl -fsSL https://deno.land/x/install/install.sh | sh For window users: open a powershell and type the code below: iwr https://deno.land/x/install/install.ps1 -useb | iex Destroy node Let's start by running this one line of code: deno run https://deno.land/std/examples/welcome.ts As you can see with deno we can run scripts saved on a remote location and this is a very big plus since we d...