DEV Community: SMAmmar

Free to Use Form

SMAmmar — Tue, 31 Mar 2020 10:30:54 +0000

Hello Guys,
I have decided to create and reuse opensource components.
Here is the first step, I replicated Freecodecamp Survey Form and made it opensource.
So if anyone of you people need a template survey form, feel free to use it :)
Techstack:

HTML5

CSS3

Link to Git Repository:
Survey Form

**Don't Forget to Contribute to the repo. Cheers!!

Advice Regarding Interview

SMAmmar — Fri, 20 Mar 2020 07:16:47 +0000

Hello Devians,
I am a final year student and have an Interview Tomorrow.The position that I am being offered is a Software Engineer Intern.For that reason, I want the help and advice of DEVIAN's as to what things to skim and what kind of questions can I be asked.

Free to use Portfolio

SMAmmar — Thu, 02 Jan 2020 16:24:20 +0000

Hello Fellow Devians,
I have created a website portfolio, which is fully opensource.
Now I want to share it with developers who need a boilerplate for their portfolios.

Also I was looking for helpers, who could help me make it look more better and friendly. The portfolio is free to constructive criticism.

Hosted Version

https://smammar.github.io/my_portfolio/

Github repository

https://github.com/SMAmmar/my_portfolio

Looking forward to your suggestions and contributions :)

Improving Web Portfolio

SMAmmar — Sat, 28 Dec 2019 10:34:33 +0000

Hello guys, I just created this portfolio recently. The issue I am facing is that when you click the hamburger icon, a portrait overlay should appear on the left-hand side, but it is not showing.
I would like the help of my fellow DEVIAN's.
Here is the link to my Github repository.
https://github.com/SMAmmar/my_portfolio

Here is the deployed version link
https://smammar.github.io/my_portfolio/

Python to React

SMAmmar — Sat, 23 Nov 2019 07:22:44 +0000

Hello guys
I have performed sentiment analysis in python using Vader library,but now I want to send this data to react front end.
How can I do it ?

The REACT SHOW , Chapter1: Introduction

SMAmmar — Wed, 06 Nov 2019 07:29:01 +0000

Hello Guys, My name is Syed Mohammad Ammar but you guys can call me Ammar.

So As promised I am here with the first series of our REACT tutorials.
So now I will be giving you a plan, as to how I am going to follow up on these tutorials.

1. The Basic React Concept Series

2. A small React project which will implement the concepts

3. A Large Project ,covering the advance React concepts.

So let's get started without wasting any time.

The first question that will come into the minds of many learners would be

What is React ?
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded.

Next, thing that would come in mind is,to

Why pursue React?##

I will be giving 9 reasons. Why I consider as React my goto option as a Javascript Extension for frontend.

1.Facebook built it
The fact that they created React should immediately lend credibility to the library.

2.Most loved frameworks, libraries, and technologies being used today

Stack Overflow Developer Survey 2019

3.It can be used to produce any type of web applications, native mobile apps, command-line interfaces, avionics and much more.

4.It allows developers to write their apps within JavaScript. JSX is one of the greatest features that not only makes ReactJS easy but fun too. Developers can easily make a new UI feature and see it appear in real-time. It brings HTML directly into your JS.

5.React is capable of building any complex UI keeping state out of the DOM. React employs a Virtual DOM that ensures maximum efficiency by only re-rendering nodes whenever it is required.

6.On performance, the assessment reveals that ReactJS yields better performance. AngularJS becomes relatively slow when there are very many users because anything in its scope changes. Besides, the digest cycle in AngularJS requires running multiple times before stabilizing if a user triggers an update. ReactJS does not experience this issue because it has a dependency tracking system that uses an async queuing. Though after the arrival of Angular 4, the Angular community has improved this to a lot better extent.

7.Everything in ReactJS is JS. Every HTML structure is expressed through JSX while the latest trends add CSS management inside JS as well.

8.For a new developer to get started with ReactJS, the learning step is less steep compared to AngularJS. One only needs to get familiar with JS and HTML in the case of ReactJS. However, learning AngularJS is a lengthy process that requires following very many concepts. Less experienced developers often find it very difficult to get started with AngularJS compared to ReactJS.

9.Though there is a little dependency, ReactJS makes it easy to import components. Also, it is very good for JS debugging.

Here's another comparison of ReactJS with other frameworks and libraries.

Future of React!

In the arena of technology, Companies and developers are always looking for better methods of giving their businesses a competitive advantage. One great technology for helping enterprises to outdo their competitors when creating web apps is ReactJS.
ReactJS allows enterprises to craft apps with better UI to enhance user experiences.
Businesses that use ReactJS are assured of better performance compared to those that use other frameworks. Because ReactJS helps to prevent updating of DOM, it means that the apps will be faster and deliver better UX.

Conclusion

So I hope I had ignited the curiosity for learning React.
I will meet you guys in the next part with the basic concepts of React.js
So stay tuned to the REACT SHOW

Need a Suggestion

SMAmmar — Tue, 05 Nov 2019 17:37:16 +0000

Hey Guys,
I have started learning React, and want to have a better learning experience with the developer community also. Therefore I am deciding on creating a React Tutorial Series here on DEV, where I will be explaining each React concept in detail, though I will also be learning at the same time. Also will be sharing some cool resources that will help in enhancing the React skills.

So I just wanted the green signal from my beloved DEVIAN's if they will support me in my cause?

Cover Image: Photo by Emily Morter on Unsplash

Why go for SASS

SMAmmar — Thu, 31 Oct 2019 12:26:40 +0000

If you are new to web design you must have heard the term of CSS preprocessors such as SASS, or LESS. Today in this article we are going to discuss the SASS preprocessor.

What are Preprocessors?
A program or tool that has its Syntax which gets compiled later into CSS code.

A Preprocessor has its own clean and easy to write CSS code for developers. Then when you want to use the Preprocessor code you convert it into standard CSS code, as the Browser doesn't understand the Preprocessor syntax. Some popular CSS Preprocessors are SASS, LESS, and Stylus.

Why Choose SASS over others
First and foremost is the usage of the awesome Compass library, that SASS offers. As it is regularly maintained and contributed by a large online community.Features that Compass offer is dynamic map generation, legacy browser hacks and cross-browser support for CSS3 features

So what is SASS?

SASS is one of the most popular and widely used Preprocessor. It helps the developer in writing a more clean and better CSS3 code version. For further details, you can visit their website

Reference: SASS official website

FEATURE#1: Variables
Numerous CSS classes can contain the same rule in a Project. For example, there are 10 rectangles to be used on our page with different background colors.

.rectangle-1 { width: 100px; height: 100px; background: green; } .rectangle-2 { width: 100px; height: 100px; background: purple; } ............. .rectangle-10 { width: 100px; height: 100px; background: orange; }

But after some, there's come's a change requirement from the Client-side, and now he wants 50 of these rectangles. Writing in CSS3 would be a lot of pain for any developer, as he has to replicate the same code 50 times thus increasing the redundancy.
So here comes the use of CSS Preprocessors.
Sass provides a solution:variables

Returning to our example

$rectangle-width: 100px; $rectangle-height: 100px;

Later when a change is needed, only we have to change the variable values instead of changing the values in each code block.

$rectangle-width: 200px; // changed from 100px to 200px $rectangle-height: 200px; // that's all!

.rectangle-1 { width: $box-width; // using variables now instead of pixels height: $box-height; background: green; } .rectangle-2 { width: $box-width; height: $box-height; background: purple; } ...... .rectangle-50 { width: $box-width; height: $box-height; background: orange; }

CSS also supports variables but older browser versions,and Internet explorer doesn't support it.

FEATURE#2: Nesting
The CSS3 does not support nesting. Therefore we can not write a class within a class. As the project starts to get larger and larger readability problem arises, and the structure of code is also disrupted.
Here's a sample code of Navigation Bar which we are going to use as the example here.

HTML5 supports nesting, but in CSS3 we can not do nesting, therefore, the respective CSS code is like.

nav ul{ margin: 0; padding: 0; } nav li{ display: inline-block;} nav a { display: block; padding: 5px 10px; color: black;} nav a:hover{ color: blue; cursor: pointer; }

We have to repeat nav every time while defining the CSS for each tag. However, SASS solves this issue as it provides nesting.

The above image is the CSS code converted into SASS syntax. Here you can see the code is properly structured and looks more appealing to read. Also, redundancy is removed.

It is not recommended to nest deeper than 3 levels

FEATURE#3: Mixins
What if we want to use multiple rules together.CSS fails over here, but then comes to rescue SASS who make use of mixins.

What are mixins?
Mixins are Sass functions that group CSS declarations together. We can reuse them later like variables.

We can create a mixin with @mixin command, followed by a name.

@mixin mixin_font{ font-family: Arial, Monospace, Helvetica; font-size: 12px; }

Or we can create a parameterised mixin function.

$font-color: blue; @mixin mixin_font($font-color) { font-family: Arial, Monospace, Helvetica; font-size: 12px; color: $font-color;}

After creating it we can use it any class.

p{ @include mixin_font; }

Making use of Mixin is a good practice to get rid of redundancy

FEATURE#4: Imports
The last feature that I like the most is Imports as it creates chunks of large CSS files.This makes readability and maintainabiltly easier.Also it is fast as SASS does not require https request,but CSS does need it.

@import 'file'; @import 'File_1'; .class { // Code to go in here }

We don't need to use .scss extension in the file path.SASS is smart.

So these are the important features, I think that makes SASS the most popular CSS Preprocessor.

I hope you find this article helpful. If there is something you don’t understand, comment your questions below. Also if you think I missed something do comment it down to.

Design Pattern Series, Abstract Factory

SMAmmar — Fri, 25 Oct 2019 17:31:39 +0000

First all Hello fellow Devian's.This is my first series to write proper articles in the field of Design Patterns. So if I am wrong somewhere, please feel free to correct me in the comments section.

I decided to create this series as a part of my learning journey. So ready to start the first one

Abstract Factory Pattern is included in the Creational Design Pattern. As it provides an interface for creating families of related or dependent objects without specifying their concrete class. Abstract Factory Pattern is like a Factory design pattern (we will see this later in the series). Basically, Abstract Factory is a super-factory pattern, as it has another layer of abstraction over factory pattern.
We can implement the Abstract Factory Pattern when objects tend to follow this kind of model. At runtime, the Abstract Factory is coupled with any concrete factory class which can create objects of the desired type.
A little Sneak Peek into the Abstract Factory UML model:

Basic Terms used in UML:
Client: Uses only Interface declared by Abstract factory and Abstract Product classes.
Product: Defines a product object to be created by the corresponding concrete factory and implements the Abstract Product Interface.
Concrete Factory: Implements the operations declared in the Abstract factory to create concrete Products.
Abstract Factory: Declares an interface for operations that create abstract product objects.

The gist of Abstract Factory Pattern:
So Abstract factory just provides interfaces for creating families of related or dependent objects without specifying their concrete class.
The client creates a concrete implementation of the abstract factory and then uses the generic interfaces to create concrete objects. Client doesn’t care about which concrete it gets from the Abstract factory. As it makes use of the general interfaces.

Applicability:
• A system should be independent of how its products are created, composed, and represented.
• A system should be configured with one of the multiple families of products.
• A family of related product objects is designed to be used together, and the designer must enforce it.
• You want to provide the class library of products, and just want to reveal the interfaces, not their implementations.

Pros:
This pattern is successful when the client doesn’t know what exactly he/she wants to create.
• Isolation of Concrete Classes, The pattern basically helps you control the classes of objects. Because a factory encapsulates the process of creating product objects. Thus, the client manipulates instances through their abstract interfaces.
• Product families are exchanged very easily, The concrete factory class appears only once in an application, where it’s instantiated. This makes it easy to change the concrete factory an application uses.
• Consistency should prevail among the products that are being created. As it’s important that an application use objects from only one family at a time. So the Abstract factory makes this task easier.

Cons:
• It’s difficult to support new kinds of products in the Abstract factory. That’s because Abstract factory interfaces fix the set of products that can be created. It is difficult to modify the whole architecture when a new product is added to the Abstract factory. Supporting new kinds of products requires extending the factory interface, which involves changing the Abstract factory class and all its subclasses.

How to be consistent with programming?

SMAmmar — Sat, 05 Oct 2019 06:26:21 +0000

Hey guys
I have recently been into development progress, and am struggling a lot. But at the same time, I feel like these competitions like Hacktoberfest are really big motivations for a coder like me, who likes to keep things simple. As things get really tough my motivation level drops to zero, and after some time I lose interest in that problem. Then I move on to the next problem and leave the previous behind.
After learning the basics, when I try to dive into the complex part of let's say Javascript, React. I fail to do so.
I was hoping Anybody from the community can help me out in this regard, like what things am I doing wrong, or my approach to solving the problem is entirely wrong.
I would appreciate your people's precious guidelines and will welcome every harsh comment. So feel free to express yourself :)

Does Xiomi redmi 7 supports Google AR core

SMAmmar — Fri, 04 Oct 2019 18:12:03 +0000

Can Xiomi Redmi 7 support Google AR core? I have checked the specs needed to run the AR core, and the phone has it. But it is not listed on supported devices section in Google AR documentation

How can I improve this flip card design

SMAmmar — Thu, 15 Aug 2019 20:09:06 +0000

Hello guys ,I am out of ideas for designing this flip card.I need help of people who can help me get better of this card.

https://codepen.io/muhammad-ammar-the-bashful/pen/eYOJgVZ

Considering in mind that I have to design 120 of them and align them in a grid,so I want some cool ideas that,I can use on this card.