Forem: Fahad Ahmad

Top Trends in Web Development in 2021

Fahad Ahmad — Thu, 08 Oct 2020 07:13:58 +0000

We are used to trends being things that come and go and won’t stand the test of time, or are extremely relevant only at that moment.
But the fact is that trends are here because they are the things that are causing the most impact in any given industry at the moment.

1. Fundamentals

Although this might not be considered a “trend”, fundamentals of web development such as CSS, HTML, and JavaScript are completely necessary to start branching off into more complicated frameworks/libraries and languages. They simply cannot be ignored.

2. Frameworks / Libraries

Jquery, React, Django, Flask is all great libraries and frameworks to use in web development. When I first started using Libraries and Frameworks my life changed. No longer did I need to code completely from scratch, other great people have already solved that problem and I can reuse their code. Making it a time-saver for me as well as teaching me the correct way to implement syntax or order in my code.

3. Website Performance / Optimization

Have you ever stared at a loading bar of a website and had the urge to just leave because it hasn’t loaded? That is one of the main reasons that people bounce off of websites. Image Loading and short response times are important for any website. An AMAZING tool to use is Google Lighthouse, which helps you optimize your site by giving you a list of tasks to execute and even shows you how to implement them to improve your website’s performance!

4. No SQL Databases

No SQL Databases were developed in the late 2000s with a focus on scaling, faster queries and allowing frequent changes in and out of a database. Making the job for developers a bit easier. SQL Databases are Relational databases developed in the late ’70s with a focus on reducing duplicate storage. Although they do tend to have a rigid and complex structure to them making them costly when scaling vertically.

5. Chatbots and AI

Customer support is an important part of any business. Many huge companies such as Youtube don’t count with a human touchpoint for customer support due to the number of users on these platforms. For that reason implementing Chatbots and AI in different scenarios, will help businesses’ websites scale and help their users get questions answered, as well as providing a solution-oriented experience.

Artificial Intelligence is implemented in different ways inside of websites. One of the most useful ways I personally see on my day to day is seeing how websites like Netflix or Youtube can recommend me content that I’d be more prone to watch and consume. These companies have developed algorithms that let them put personalized content on your feed for you to access the content you are really interested in. This has started to become a standard for most websites as websites that don’t count this in seem a little bit outdated.

Phew… There you have it. Now you have the trends, it’s time for you to use them.

If instead of facilitating your experience on a website, they make it more complex, and you don’t see a positive impact, I would not call it an effective TREND.

Thanks for reading guys and please follow me on Medium by given link. Check My Medium Post's

10 things learn to become javaScript Ninja

Fahad Ahmad — Thu, 21 Nov 2019 10:25:45 +0000

1. Control Flow

Probably the most basic topic on the list. One of the most important, maybe the most important one. If you do not know how to proceed with your code, you will have a hard time. Knowing the ins and outs of basic control flow is definitely a must.

1 . if else — If you don’t know these, how did you write code before?
2 . switch — is basically if else in a more eloquent way, use it as soon as
you have multiple of different cases.
3 . for — Do not repeat yourself, this is what loops are for. Besides the
normalfor -loop for of and for in come in very handy. The big advantage of for -loops is that they are blocking, so you can use async await in them.

2. Error handling

This took a while for me. It does not matter if you are working on frontend or backend, the first year or so, you will probably default to console.log or maybe console.error for ‘handling’ errors. To write good applications, you definitely have to change that and replace your lazy logs with nicely handled errors. You may want to check out how to build your own Error constructor and how to catch them correctly, as well as showing the user what the actual problem is.

3. Data Models

Similar to moving through your application continuously, you have to decide where to group specific information chunks and where to keep them separate. This does not only apply to building database models, but also function parameters and objects or variables.

4. Asynchronity

This is a very important aspect of JavaScript, Either you are fetching data from the backend or you are processing requests asynchronously in the backend itself. In pretty much all usecases, you will encounter asynchronity and its caveats. If you have no idea what that is, you will probably get a weird error, which you will try to fix for a couple of hours. If you know what it is, but you don’t really know what to do about it, you will end up in callback-hell. The better approach is to use promises and/or async await in your apps.

5. DOM Manipulation

This is an interesting topic. Normally it is somewhat left out in the day today life as a developer. Maybe you learned jQuery and never felt the need to pick up some native DOM manipulation skills, maybe you are just using a fronten framework, where there is rarely a need for custom DOM manipulation. However, I think this is a crucial part of understanding JavaScript, at least in the frontend. Knowing how the DOM works and how to access elements gives you a deep understanding of how websites work. In addition, there will be the point where you have to do some custom DOM manipulation, even when you use modern frontend frameworks, and you definitely do not want to put jQuery in your package.json just to access an element.

6. Node.js / Express

Even as a frontend developer, you should know the basics of node.js. Ideally, you would also know how to spin up a simple express server and add some routes or change existing ones. JavaScript is great for writing scripts to help you automate a lot of tasks. Therefore, knowing how to read files, work with filepaths or buffers gives you a good toolset to build anything.

7. Functional Approach

There is an everlasting debate about functional vs. object-oriented programming. You probably can achieve the same thing with both of the approaches. In JavaScript, it is even easier, you have both of the approaches available. Libraries like lodash give you a really nice collection of tools for building applications with a functional approach. Nowadays, it is not even necessary to use external libraries any more. A lot of the most important functions have been implemented in the official JavaScript specification. You definitely should know how to use map reduce filter forEach and find.

8. Object Oriented Approach

Similar to the functional approach, you also have to get familiar with object
oriented JavaScript, if you want to master it. I neglected that part for a long
time in my career and just worked my way through with a workaround, but
sometimes it is definitely better to use objects/classes and instances to
implement specific functionality. Classes are widely used in React, MobX or
custom constructors.

9. Frontend Framework

The big three are React.js, Angular and Vue.js. If you are looking for a job
nowadays, you will almost always have one of those listed as a prerequisite.
Even if they change quite quickly, it is important to grasp the general concept of those to understand how applications work. Also, it is just easier to write apps that way. If you haven’t decided which train you want to jump on, my suggestions is React.js. I have been working with it for the last couple of years and did not regret my decision.

10. Bundling / Transpilation

Unfortunately, this is a big part of web development. On the one hand I should not say unfortunate, because it is great to be able to write code with all the newest features. On the other hand, the reason why I’m saying that is that we always have to keep in mind that there’s older browsers around that may not support these features, therefore we have to transpile our code into something else that the old browsers understand. If you work with node.js, you will probably have less exposure to transpiling your code. The de-facto standard for transpilation is babel.js, so get familiar with it. As for bundling your code and tying everything together, you have a couple of options. Webpack was the dominant player for a long time. Some time ago, parcel popped up out of nowhere and is now my preferred solution, since it is so performant and easy to configure, although not perfect.

Extra : Regular Expressions

This is not specific to JavaScript, but incredibly helpful in a lot of use cases. Just as confusing as well. Getting to know the syntax of Regular Expressions definitely takes some time and remembering all of the different options is impossible.

Thanks for reading for more topics follow me
Follow me on Instagram @fahadcode

React Native Hooks , How To Use useState and useEffect Example

Fahad Ahmad — Fri, 08 Nov 2019 11:22:16 +0000

Today I am going to talk about the newly introduced react hook. So I thought, it would be easy for you guys to understand if I described under these subtopics.

1. What is React Hook?
2. Why React Hook?
3. Examples

1. What is React Hook?

React hook is newly introduced at react conference and it’s available in react’s alpha version 16.7. The React team is collecting feedback for React Hooks which is your opportunity to contribute to this feature.
It mainly uses to handle the state and side effects in react functional component.

. It Enforces best practices
. Easy to under understand
. easy to test
. It increases the performance and so on.

02. Why React Hook?

The first main reason is the Introduce state in a functional component. You know that the states cannot be used in functions. But with hooks, we can use states.
Another reason is the handle side effect in react component. It means, now you can use newly introduced state such as useEffect.
But do you know for some scenarios, there are 3 places where react fails.

.While Reuse logic between components
.Has Huge components
.Confusing classes

3. Hook Examples

Above example is the simple react class and not include any hooks. Look at there, first import the react native render elements from react-native.

So how to do these kinds of stuff in react hook?

Above example, simply import the useState from react other than react elements. This is the JavaScript function and not the react class component where I showed you an early example.

setEffect is used to replace the lifecycle hooks such as componentDidMount, componentDidUpdate and componentWillUnmount.

For an example, if your goal is to trigger data fetching upon clicking on a button, then there’s no need to use useEffect.
Before move into the effect hook code, just look at this following example,

So look at the above examples, the same logic of time interval is split into multiple lifecycle methods. This is the one of example, you will have a lot of scenarios where splitting logic into different life cycle hook.
So how can we implement this with hooks?

Now I need to clear the interval when component unmount. So how I do this with effect hook. Without react hook, do you remember, we just clear the interval in another life-cycle method called componentWillUnmount? But in react hook, we can simply do it inside the useEffect.
Inside the return, clear the interval. So interval will be cleared when the component unmounted.

But Now each time when any of state is updated, this hook method is calling.
but we need to call this only at component will mount and unmount. So how can we fix it?
Simply, you can pass the empty array as a second argument. By doing this, this useEffect will call only at the component mount and unmount.

Now, what if I want to call this side effect only when for some state is changed? Let assume, If I have another state called isStarted and initial value of it is false.

If I want to trigger this useEffect when only isStarted state variable is true, then we can pass the isStarted state instead of passing empty array.

4.Rules

There are 2 important rules here.
1.Don’t call hooks inside the loop, condition or nested function.
Instead, always use Hooks at the top level of your React function. This rule,
you ensure that Hooks are called in the same order each time a component renders.
2. Call hooks from react function. not the regular function.
So you can Call Hooks from React functional components or from the custom hooks as we discussed early. By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

7 Essential JavaScript Libraries For Developers To Take SkillSet To The Next Level.

Fahad Ahmad — Thu, 31 Oct 2019 06:50:29 +0000

1.JQuery

First released in 2006, jQuery is very much the grand old man of JavaScript libraries, and remains an essential piece of kit to this day. You’ll find it chugging away under the hood of WordPress itself, and across innumerable other projects that power the modern web. It’s also explicitly backed by some of the biggest names in the business.

From a budding JavaScript developer’s point of view, the promise of jQuery is nicely summed up in its tagline – “write less, do more.” Start diving into it and you’ll get an elegant way of handling the DOM, along with a natural introduction to the wider JavaScript front end ecosystem in the form of jQuery UI, jQuery Mobile, Sizzle, and QUnit.

2.Numeral.js

Formatting and manipulating numbers is at the heart of a huge amount of day-to-day programming tasks, and the Numeral.js library does an excellent job of making that substantially simpler in JavaScript. Not only does it make life easier for developers who are new to the language, it’s also an admirable example of a library that tackles one problem well. It’s definitely one to add to the toolkit as soon as possible.

3.Retina.js

Continuing our theme of practical libraries with obvious everyday utility, Retina.js is both a front end workhorse and practical way of easing into using JavaScript libraries on personal projects.

We’re living in an increasingly high-definition world these days. Sites of all stripes need to be able to handle retina devices gracefully, while not forcing unnecessarily large images on everyone else – Retina.js gives you an easily understandable way of doing just that.

4.D3.js

Having gotten numbers firmly under control with Numeral.js, you’ll eventually be looking to do some fancy things with data generally. That’s where D3.js comes in. D3 enables you to create data-driven documents to your heart’s content in a way that’s truly compatible with web standards.

As even a quick look at the project’s list of examples shows, this has a huge range of practical uses across all manner of projects. Start diving into the impressive list of associated tutorials, and you’ll soon be confidently displaying data with just a few lines of code.

5.Backbone.js

Full-fledged JavaScript frameworks such as Angular and Ember attract a lot of the headlines, but there’s a huge amount to be said for beginning with Backbone when you’re just getting to grips with JavaScript. It’s an easy route into the concept of models and views in JavaScript, supported by great documentation and tutorials, and a great way of starting to explore the power of the REST API in WordPress to boot.

6.Chai.Js

Testing is a topic that should always be at the front of any responsible developer’s mind, and it’s just as true in JavaScript as it is in any other language – perhaps even more so given the bewildering number of devices and scenarios where it’s deployed. If you’re just starting with the topic and have a few dollars to spare, it’s hard to beat James Shore’s Lets Code: Test-Driven JavaScript series.

7.ReactJs

We’ve deliberately left the newest library for last. With its groundbreaking approach to thinking about modern UIs, Facebook’s React library has caught the attention of developers worldwide, the team at Automatic being among them, but it’s not necessarily the easiest programming paradigm to get your head around.

Scotch.io’s intro to the library is an excellent starting point, and Andrew Farmer’s list of tutorial recommendations provides plenty of material for further exploration – Build With React is a particularly notable resource that he identifies.