Noobie Programmer

It was my last day of work and I'm happy I finished my remaining tasks on time. And now, it's time for me to move on to my next journey. The only reason I took the job was for me to get enough experience to build my own app. So I already planned it that I will quit my job after 3 years since I signed the 3-year bond contract.  Didn't know that it was tough having one source of income but I think I'm good since I'm still living with my parents... There are times that I compare my income and life to my coworkers, same age brackets and shit... which resulted for me to lose my focus and my mind shifted a lot of times, and I think it's a waste of time to repeat it again. But... at the end of the day... I'm just too lazy I guess and I think that a day job is not suited for me. I'm more of the build one app and make it rain type of guy... Don't even know what to do now!!! I guess I'll try playing stocks and multiplying my money while trying to build my ...

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...

Creating your own WALL-E First of all to introduce you to what nodejs can do, we will start with a small project and use an available third party library named Say.js  for our text-to-speech program. With this you can build your own WALL-E. First let's install the libraries we need for this project:  npm i --save say npm i --save lodash Let's import them using: const say = require('say');  const _ = require('lodash'); let's try if the say library is working by making the computer say Hello World (literally of course!!!) say.speak('Hello World'); 😮 It does work right? Now remove that line and let's create something like a speech logger so that everything we ex'ed on our todo list, the computer will let us know by telling it to us loud and clear using the say library: What this does is we wrapped our say.speak in a promise so that everytime we call the logger the computer will stop and ...

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...

Just found it during the flutter day this week and was so happy I could share it that we could code flutter on code pen now and embed it on blogs. For sure the learning curve of noobies will increase with this as creators like me can just embed the flutter app for the given tutorial.  And what's more interesting? During the #FlutterDay livestream a guy created pens to showcase the Flutter + Codepen and the coolest part is he ( Mariano Zorilla ), created a copy of slack, spotify and other popular apps for us to see and study.  So without further ado here are some flutter apps that Mariano Zorilla made for the Flutter + CodePen. (Let me use this feature hehe). Spotify Clone See the Pen Spotify Clone by Mariano Zorrilla ( @mkiisoft ) on CodePen . WhatsApp Clone See the Pen WhatsApp Clone by Mariano Zorrilla ( @mkiisoft ) on CodePen . Twitter Clone See the Pen Twitter Clone by Mariano Zorrilla ( @mkiisoft ) on CodePen . an...