Work Diary

Hello everyone, and welcome to this amazing lesson on Javascript. If you are new to this platform, do check out our previous lessons. Here, we are going to begin studying some introductory concepts about JS and how they can be applied. This lesson is very essential for beginners who already know HTML and CSS and are willing to proceed with JS. Hence if you’re one, kindly go through the lesson till the end. Javascript is a computer programming language used mainly for web development purposes. It was created by the Netscape browser in 1995, and it was a way for them to add action to their website. JS could be considered as a verb. That is, it enables actions like playing YouTube videos, signing up for a username, tweeting, posting, etc. It is lightweight and dynamic with object-oriented capabilities. Without Javascript on the web, we would have just HTML and CSS, making the web pages static, and only dynamic changes like animations from CSS will be left.  Now that we know what Javas...

 Hello and welcome to trycoder.com where you learn how to code so easily. In this tutorial, we are going to talk about React JS component is all about and learn how to code it out. If you are new in learning React JS, I would advice you keep it up because it is very demanding in the Job market. A shout out to all React JS developers!!!! I recommend you subscribe to our newsletter, YouTube channel and frequently visit our blog to get more awesome stuff in your programming language or framework. Now let’s get started… What are components? In React JS, a component can be likened to a function, but returns HTML elements. Just like functions, components can be re-used. Components are pieces which form the UI of an application. For example, you might have a header component, a footer component and sidebar component. Similarly, as regular vanilla JavaScript functions accepts parameters or arguments, React JS components equally accept properties or props which we will cover in our next tut...

Hi. Today, we are going to discuss about React JSX and the React JS render() function. If you are reading about react for the first time, I recommend you check out our article on getting started with React JS. Subscribe on our YouTube channel to get the video content of our articles here. JSX Having a good understanding of JSX is very important as it applies directly in React JS and equally React Native which we will cover subsequently.  JSX stands for JavaScript and XML which is a standard to write HTML in React JS or JavaScript code. It might look strange but you will get it later on!  Even though there is an alternative for JSX, many developers consider it easier when working with React JS and React Native. Coding React JS apps without JSX is really challenging. Talking about JSX, lets look at an example: const greetings = <h1> hello, world </h1>; The code above can be overwhelming right ?... Yes! and it is called JSX. HTML in JavaScript. Also, JavaScript expre...

  Hi. Welcome to our website and we are very happy to see you here today. If you are here for the first time, I recommend you check out and subscribe to our YouTube channel to enjoy the video content of what we do. Today, we will discuss about some essential ES6 features used in React JS. ES6 stands for ECMAScript6 which is like a standard used in writing JS (JavaScript) code. From the past years, ES6 has been updating to better standards thus the reason why we have different versions like ECMAScript5 ... and today we are working with version 6 which is the most stable and widely used version now at the time of writing this article. So you see, it will be kind-of challenging for a modern developer to ignore such changes because it affects him or her. In React JS, there are some implementations of these ES6 features which we are going to look at. But we will implement them to see how they work in a HTML document. Variables ES6 implemented an unusual way of creating a variable using ...

Hey there, welcome once again to another tutorial on trycoder.com where we gonna be talking about Google puppeteer and Node JS. If this is your first time visiting us, I recommend you subscribe to our YouTube channel and stick till the end. If it’s equally your first time reading about Google puppeteer, I recommend you check our introductory article about this and our YouTube video on this. As you already know, puppeteer is headless chrome which can automate everything a user does with a browser. Today, we will discuss how to automate keyboard input which could perhaps be in a form field, email or anywhere else. Puppeteer has a keyboard class which has some methods responsible for keyboard events such as key down, press, type and more. In the example below, we will examine and how these methods work. Just as a user would normally do; open a browser, new tab/page open url  and then type something and close browser when done Let us discuss the following methods of the keyboard class...

Hi, welcome back to another tutorial on puppeteer and Node js. We have been on a series of tutorials concerning this powerful library. If you are totally new here, I will recommend you check out our recent tutorials on this subject and equally feel the magic of Google puppeteer. Puppeteer is real an awesome API, very useful in many ways. Today, we will discuss how to perform screen capture of a particular area on the screen. Just like anyone would want to use snipping tool app to capture a particular area on the screen. As we already know, Puppeteer is headless chrome. Therefore, it behaves the way every user in front of a browser would do. To capture a particular portion of the screen, you need to; Open a browser, Create new tab or page, Type in a web address or url, capture the particular section you wish to, and save in a directory. Finally, close the browser (perhaps) Puppeteer makes this possible without the need to open a physical browser window. Isn’t it glorious!!? In our last ...

  Hi. Welcome to trycoder.com and today, we are going to begin a brand-new series or framework which is called React JS. I believe you must have heard of it one time or another due it’s high need in developer job offers. Learning React JS is very important nowadays as it meets the need of modern technology. Some developers call React JS a framework because it is really similar to front-end frameworks like Vue JS... But according to React’s official website, they call it a library. React JS is a library for building front-end UI. -     React JS was created by Facebook -     It is used to develop SPA (single page applications) where it changes only what needs to be changed without full page reloading. -     React JS is the best fit for the view layer of the MVC (model view controller) architectural model. -     For example, React JS is a standard for MERN Stack (Mongo Express React and Node) In this tutorial, w...

  Hi guys, welcome to another tutorial where we are going to discuss another magic using google puppeteer. In our last tutorial, we talked about how to emulate mobile devices and we saw how fascinating and useful it is. Today, we are going to see how we can perform user mouse clicks using the famous puppeteer. A quick recall!! Remember that puppeteer is headless chrome and can perform what a normal browser can perform when instructed by a user and one of them is mouse click. Of course!, I hope someone isn’t waiting for me to explain how a mouse is used (mouse 101)…hahaha 😂☺ Well, if it’s your first time reading about the amazing Google puppeteer, I recommend you check out my recent articles on this blog. We are going to look at a little example here which explains the entire concept so you will be able to implement in your projects. The puppeteer API uses the mouse.click() to perform mouse click on any web page like a normal user. mouse.click() method takes as parameter...

 Hi. Welcome to trycoder.com where we teach and train on coding/development. If this is your first time visiting our website, I recommend you checkout our youtube channel and facebook group to get more from us. In this tutorial, we will discuss how to get a mobile device view of a website without actually using a mobile phone. We will achieve this using a node JS library developed by Google called Puppeteer. If this is your first-time hearing about puppeteer, I recommend you check out our article on how to get started with puppeteer. Mobile device emulation is a very necessary task especially for web developers because a good look of a web page on mobile is very important. Apart from that, there are also many reasons why a developer would want to perform mobile device emulation. NB: Ensure you have Node JS and puppeteer installed in your local machine. As written on their official website, puppeteer is “headless chrome”, meaning it performs everything a normal browser does but exce...