DEV Community: yahya jamaldine

The Stupid Mistake I Made With The JavaScript Import Statement.

yahya jamaldine — Mon, 18 Jan 2021 20:15:06 +0000

Photo by Markus Spiske: Unsplash.

The first time I wrote a code that contains an import statement, I made literary a stupid mistake. Even though I had an experience of 8 months working with JavaScript, I spent about two nights trying to figure out why the program is not working.

I want to show you the mistake directly, but there’s no mayhem in saying more about the story to make every word I say relevant.

A lot of JavaScript developers still have that kind of perspective of let’s stay old. Why would I learn how to implement new features in JavaScript? And I used to be like these developers for a while. I ignored many times’ articles, tutorials, books talking about those new features ES6 come up with.

Each time I meet a new feature, new syntax, I try to get rid of it and implement the old one, and that just to get the same result without that burden of learning new things.

However, that didn’t last. Just after a while, I started learning ES6 features. Things have been really great, but I struggled while learning many things, including Modules. This feature doesn’t introduce a new concept in the language, it’s just using a code from another place (external or internal).

As a person who was a lazy JavaScript developer, I had no idea about modules. I used to retrieve external code or information by including the script tag or via Ajax calls.

Importing external code using modules is not something new in the language. JavaScript developers have been using modules with libraries’ aid till the community introduced them as a built-in feature in ES6.

Now let’s take an example of using an import statement or modules, to illustrate the way you can use them and why they didn’t work the first time I tried them.

First JavaScript file

The image below is for the module we want to export code from, thusly, a module is just a file that exports some code.

So we have a JavaScript file called ‘file1’ it resides inside a folder labeled ‘import’ as do you see in the picture above, our file contains a class labeled Junior it has three properties, and we have an export statement in the 10th line.

What we did right now is just exporting the module or specifically the Junior class.

Second JavaScript file:

The image below is for our file that contains the imported module.

So here we have a JavaScript file labeled ‘exfile1’, which contains the module we imported from ‘file1’ in the 8th line. We created an instance of the Junior class.

In the 9th line, we created an instance of the Senior class, which is the extended version of Junior. The remaining lines will output the “year property” for each class in the console panel.
The Html file:

The structure of our Html file :

As do you see an HTML file that contains the JavaScript ‘exfile1’ code we mentioned early, after putting these files together and opening the Html file in the browser, open the console panel.

The predictable result should be:

Our Junior friend got 1 year.

Our Senior friend got 4 years.

Unfortunately, after opening the console panel in the Chrome browser, we get an error, not what we supposed to get:

So what I did to solve this problem? I went genuinely in a rush, and I googled it, then I found the solution in Stack overflow.

It turns out that I should change the type attribute in the script tag because I’m dealing with a module, not a regular JavaScript file.

So instead of doing this :

I should be doing this:

However, that didn’t work for me too. The console panel produced another error message like this one in the picture below.

I couldn’t even identify the core of the problem in the beginning because I didn’t know what the heck is going on, why it shows me the status 404 (not found), I’m using the right file in the right place, I turned off the computer, and I went to sleep.

The next morning I woke up, I opened Vscode, and I was amazed by how stupid I am. I forgot to put the ‘js’ extension in the import statement in the 1st line of the “exfile1” file, so after fixing that minor mistake, the exfile1 file would be like this:

And the result will be the predictable result we talked about early.

Our Junior friend got 1 year.

Our Senior friend got 4 years.

Final thoughts

I didn’t write this story to taught you how to use the import statement. In case you want to learn how to use a module, you can head up to the MDN website and taught yourself how to use them wisely.

Although this mistake I made seems to be ridiculous, don’t you forget that the best way to learn is by making mistakes, plus taking notes about that mistake you made.

“If something doesn’t work out learn from it.” Unknown

In case you are using a mobile phone or To see the same article on Medium you can visit the Link below:
===> Here.

Should You Learn jQuery in 2021?

yahya jamaldine — Tue, 03 Nov 2020 18:06:04 +0000

Photo by Robert Schultz on: Flickr

An old thing becomes new if you detach it from what usually surrounds it. "Robert Bresson",
In our case becomes useful
(before we start consider bringing a cup of coffee or tea)

jQuery

jQuery was considered or I guess still considered the greatest JavaScript library. and for the main the time it is the most popular one , with its famous slogan "Write Less, Do More", it was like the superhero of JavaScript libraries among Backbone.js and Underscore.js brought by our Friend in the domain John Resig since 2006 ,and that's even before I have used my first computer(I've used the first one in 2009),and he wrote jQuery for some
particular reasons like:

Simplifying JavaScript tasks

Tackle some web development problems

You can install jQuery just by including its source code or its file location in the head or the body of your Html page just as you include a regular JavaScript code or CSS code, without giving a damn if the code you wrote will get executed after the page is fully loaded, provided you include it (jQuery source code) first before you write any JavaScript or jQuery code like this:

This library was there it was really there in its time exactly between 2010 and 2015, you want to be a good web developer in that time you go learn some Html, CSS, JavaScript, and jQuery and you just add some Php&Mysql to the equation if you want really to control your website entirely, and by the way I didn't say if you to be a front-end web developer.

Because back to that time practically there was no term such a front-end or back-end so you just do learn four or five things and boom! you're a web developer but these days just to be a great front-end web developer it will take time and effort to delve into essential things plus other technologies and skills that are required for you as a Mid or Senior front-end developer.

By the way , we are not here to talk about this, but if you're really interested in getting some recommendations as a beginner in front-end web development, you can check this:
Vocal

So back to jQuery First time I've met jQuery was in the fourth edition of jQuery book by Jonathan Chaffer and Karl Swedberg, the first edition of the book has been published in July 2007, the second one published in February 2009, the third one in September 2011, and the one I've read the fourth edition was launched in 2013, plus I've heard there's a fifth edition published in 2017.

I often hear on Quora, Reddit or Twitter, and some groups on Facebook that jQuery is dead plus some questions like should I learn jQuery, I still don't get it, for me it was the best way to reveal my power in writing a JavaScript code, but the fact that there's New future in modern JavaScript (Ecmascript 2015, ES6 and beyond..) out there to make your code "beautiful, small, wired and efficient plus solving a lot of common problems in the web development", makes people ignore even thinking about learning jQuery. although all these features have been covered by jQuery itself years ago .

There's a lot of people who just learned enough stuff in front-end web development with JavaScript HTML & CSS, enough to create a simple web application or web page and now they think about extending their journey to build at least an interesting web application or even an entire website so they choose whether to learn Angular or React or maybe Vue.

jQuery didn't get much popularity in the last 4 years this why I didn't mention it with the three, because its peers in the front-end "React, Angular, Vue" really emphasized their strength and usefulness in the field, so as a new front-end developer there's a high percentage that you may choose other technologies over jQuery.

I liked JavaScript the first time I wrote my first line in VsCode, but jQuery pushed me to continue in the path of learning and improving my skills in JavaScript, and some of its capabilities are:

Capabilities

Mutating and Accessing the elements and contents of your document with Just a few lines in other words traversing and manipulating the DOM(document object module).

Responding to the user's interaction and styling your web page in a beautiful way, plus my favorite jQuery technic by far: Sending data with (Ajax) =>(Asynchronous JavaScript and XML).*

Let's write a simple program:

Yeah the regular "Hello world program", but you know there's multiple ways to write the hello world program in JavaScript wither to print it to the console or manipulating the DOM(document object model) by selecting a DOM element and rendering its Text, or we can use the Alert() method, so let's do that with three ways on jQuery:

So how does it seem or feel, very weird, terrifying? yeah I know I was afraid the first time I've seen the dollar sign($), with the word document inside parentheses but all the other were just a normal ready() method plus a callback function inside it ,(well in fact this feeling of being uncomfortable always encounter me when I'm about to learn a new library or technology it's normal ).

So inside the Callback function, there's: a jQuery object in the 9th line referencing to div element two methods: appendTo() "appending the div element to the body of the HTML page as usual in JavaScript", plus the DOMElement.text("String") that act like DOMElement.innerText=" String" both of them in the same line and that's what we call Chaining, by the way, if all these words("Append, Chaining, Callback, DOM, higher order function, Closure ") sound weird please consider doing a refresh, or even trying to take a JavaScript tutorial again, this what I did when I fall in the same problem.

However I'm not here to teach you jQuery or to force you to do the things that I did, I'm here to give you my opinion about learning jQuery in the meantime .the action after that is the steps you're going to take Today.

Resources

Install jQuery .

Learning-jQuery.

Finally

To get that kind of taste about how JavaScript can do whatever you want with your web page and just with few lines, plus helping you to conquer those worries about the JavaScript world, I highly recommend to learn jQuery, So just give it some afternoons with a cup of tea in case you want to strengthen your power in JavaScript as a beginner.

As I've mention, the new release of EcmaScript covered almost things that jQuery been good at years ago so you don't really need to learn jQuery just in case you want to tackle a problem just google it.

There are some libraries out there that could replace jQuery, privileged with small size and good performance so you can check out Cash, or Zepto if you want.

In case you're already doing well with vanilla JavaScript or already started developing with Vue, React or Angular I just don't recommend turning the wheel back and learning jQuery, just go ahead and please stay Up to date.

You can read the same article here on : Vocal

This post was originally posted on Medium by me :
"JavaScript In Plain English"

Why You Should Not Learn React, Angular or Vue as a Beginner in Front-End Web Development .

yahya jamaldine — Wed, 21 Oct 2020 23:48:43 +0000

Photo by: Greg Rakozy on Unsplash .

In the first steps as a programmer , people really lose their way trying to find their passion and they keep asking themself a lot of questions like : what should I learn? maybe front-end web development, or maybe Cloud computing, Machine learning engineering is better for me ,nah back-end web development is the one chosen for me .

However when it comes to the most fascinating field “front-end web development” people really get glamorized by how everyone is talking about this field , how they say : you don’t need any mathematics ,there’s no complexity you just need some Html CSS & Javascript and you are ready for that up coming job “, plus the fact that it seems easy to learn and understand in the first glance.

As a new person in the front-end development with some basics in Html,CSS, Javascript the first thing you hear in Facebook groups or Twitter “you are new !! Hop ! you better go learn some React ,Vue, or Angular ”, and because there’s a lot of hype around it, plus it’s popularity too ,and how it stands among most stared projects and Repositories in Github with other front-end/UI tools or toolkit and technologies like Bootstrap and Flutter, So you fail in that trap the trap of starting React or Vue, Angular without any prior or advanced knowledge in Javascript.

When you fail in the trap of starting a path in framework or library without prior or advanced knowledge in the language used to build that framework /libray .

As example React.js ,first of all, you look up for a book ,course in Udemy , Pluralsight or maybe a free tutorial in Youtube about React, in the case of the book , assuming you are in hurry like most beginner one of the things that you may do is skipping the prerequisites or the books introductions , so you just start with the first chapter Let’s say how to write the “Hello world” program ! and suddenly you get shocked by something like this(without any comment for highlighting ):

'use strict';
var Hello = React.createClass({

  render: function() {
    return React.createElement("h1", null, "Hello World!");
  },

});

var div = document.getElementById("hi");

ReactDOM.render(React.createElement(Hello), div);

Notice:

I’m talking here about people who have no familiarity with writing code in other words who just started their journey in Javascript .

In case you are like thousand of worries beginner out there who don’t quite facing a lot of odds or challenge trying to learn new things even learning about complex Algorithmes, or The State Management in Flutter may not stop you from going all the way.

You may get into learning a framework/library as a beginner without any prior knowledge in the language used to built that library you might even land a job but I promise you will struggle with easiest things while trying to build something.

I’m not here to scare you I’ve mentioned some words that may seem weird to you I’ll provide you with the resource in the end of the article so you could get a small idea about what you’ve seen.

To escape that trap that new front-end developer could fail into accidentally , I’m going to give you some advice before starting your journey with fron-tend frameworks, and furthermore, I’ll give some tips that should help you as a beginner or even if you are someone that want to fill that gap in the frontend:

Drink,eat and breath Javascript Html & CSS

As a front-end developer before trying to learn any front-end famework, first of all, you should have at least a strong background in:

1.Html(HyperText Markup Language):

So you could create a structure for your Html page ,learn as you can about semantic html ,even veteran web developers still learn different stuff everyday in html check W3C (World Wide Web Consortium) Html5 to see what I’m talking about.

2.CSS (Cascading Style Sheets):

To style your page it switches to an extremely hard , and complex tool when it comes to creating a useful animation and doing some huge CSS tricks so please try to learn advanced CSS there’s hundreds of tutorial out there waiting for you, try to master CSS Grid , Flex box and Transition ,I mean it you don’t know the power behind these tool you may not believe but I’ve heard in a podcast that you can even create a Search engine with CSS ,and other things i’ve seen like: Illustration,3D Animation, and more awesome stuff.

3.Javascript

Finally Javascript, a programming language to add a sense of life to your web site or single web application it’s basic may seem easy to learn in the beginning, but once you get in into the core of language it’ll give that feeling of ”it’s impossible to learn this” , so don’t quite and try to learn how to apply deep selectors and method to traverse the DOM, try to learn module, Asynchronous Javascipt and sharpen your brain with advanced knowledge about classes and function in OOP it’s your only way to become a great React developer .

Tips might help you in Your frontend road:

Git and Git :

tracking the changes in your project is useful ,plus sharing your code with the world out there, is literally important for any programmer(even non-programmers are using it these days ).

Typescript:

Brought by microsoft,adding a sense of type to your javascript code and the power of classes and interface in typescript will help you .

Data Structures ,Algorithm , design pattern,problem solving :

Understanding Data structures, design pattern and developing the ability to solve problems will make you stand with great developers.

UI/UX design

I know it’s the designer job but getting and acquiring knowledge about UI/UX design will improve your client-side development and will give you a better communication with the designer.

+Babeljs

When it comes to transforming your javascript code so it could be compatible with old browsers, Babeljs is literally your guide to do that

Command line + Package Managers :

Learning about the command line in your operation system is really helpful especially when you are about to install a software or maybe interacting deeply with your system ,without missing Package Managers like Yarn and Npm.

Brower Developer tools

This one will help you editing your web page end enhancing it , plus these tools will be your friend in the road of debugging, all most developer (including me) spent their journey debugging not even coding.
Resource:
The State Management.

W3C.

Search engine with CSS .

Babeljs.

Brower DevTools.

Finally

As you have seen drinking ,eating and breathing are the essentials things for a human being to survive(no more philosophy please) so you have to eat, drink, and breath these three technologies to survive as a front-end developer, however the browser relies on these technologies so he could talk and interact with you .ignoring them will just make your career measerable.

Thank you for reading .
..You can check the same article on: Meduim

DEV Community: yahya jamaldine

The Stupid Mistake I Made With The JavaScript Import Statement.

First JavaScript file

Second JavaScript file:

Final thoughts

Should You Learn jQuery in 2021?

jQuery

Capabilities

Let's write a simple program:

Resources

Finally

You can read the same article here on : Vocal

Why You Should Not Learn React, Angular or Vue as a Beginner in Front-End Web Development .

Notice:

Drink,eat and breath Javascript Html & CSS

1.Html(HyperText Markup Language):

2.CSS (Cascading Style Sheets):

3.Javascript

Tips might help you in Your frontend road:

Git and Git :

Typescript:

Data Structures ,Algorithm , design pattern,problem solving :

UI/UX design

+Babeljs

Command line + Package Managers :

Brower Developer tools

Finally