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

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

There are 3rd party libraries out there that offer alerts or popups in Flutter. But, what I'll be teaching you today is how to use the built in SnackBar widget to produce an error popup or notification easily. For the video version of the tutorial go here:  How to use snackbar in flutter as error alert or popup notification To use the SnackBar widget and make a nice Snack Bar that you see in most google apps like youtube, all you need to do is wrap your entire app with the Scaffold Widget. So let's make create a new file page_wrapper.dart and create a new Widget named PageWrapper that accepts a widget as children. After that all we need to do is call the PageWrapper widget in all of our pages so that we have a base widget that uses the Scaffold in every page. This means we can now use the SnackBar on every page. In the main.dart all you need to do is this: Then now we can create the home page and create a snackbar. Before that we need a trigger ...