DEV Community: Thomas Wilfred

Should I learn Typescript before React?

Thomas Wilfred — Sat, 17 Apr 2021 11:56:40 +0000

The development world is quite famous for these short debates, whether to have knowledge of Typescript before React or vice-versa or is it better to have an understanding of React than Vue. So to clarify this confusion, we are writing this article to make your decision better.

What is Typescript

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

What is React

React (also known as React.js or ReactJS) is an open-source, front-end, JavaScript library for building user interfaces or UI components. 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. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

What should you learn first

To be fair, this is something which totally varies from person to person. Some may prefer learning Typescript before React or React before Typescript. But if you think about it, it's better to learn React before learning Typescript because it helps in understanding more frameworks and is more demand-rich in the industry.

Thanks for reading. Hope this helps.

What are the most important Python libraries and packages for Data Science?

Thomas Wilfred — Wed, 17 Feb 2021 14:03:46 +0000

Data Science is something that has taken over our world with a flash. Take a look around and you'll notice that Data Science has taken over every field, be it technology or future predictions. Hence, it becomes important that you have a good understanding of Data Science. It will lead to better opportunities and development in the future.

Since Data Science is a vast subject, it becomes important to understand every basic. The very basis for understanding Data Science is Python, a programming language. Now, a new question arises- How to learn Python and what are its libraries that play an important role in Data Science?

In this article, we are gonna mention important libraries that would help you greatly.

What is Python

Python is an interpreted, high-level and general-purpose programming language. Python's design philosophy emphasizes code readability with its notable use of significant whitespace. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.

Python is dynamically-typed and garbage-collected. It supports multiple programming paradigms, including structured (particularly, procedural), object-oriented and functional programming. Python is often described as a "batteries included" language due to its comprehensive standard library.

Important Libraries for Python

Now, let's see what are the important Python libraries.

TensorFlow

The first in the list of python libraries for data science is TensorFlow. TensorFlow is a library for high-performance numerical computations with around 35,000 comments and a vibrant community of around 1,500 contributors. It’s used across various scientific fields. TensorFlow is basically a framework for defining and running computations that involve tensors, which are partially defined computational objects that eventually produce a value.

SciPy

SciPy (Scientific Python) is another free and open-source Python library for data science that is extensively used for high-level computations. SciPy has around 19,000 comments on GitHub and an active community of about 600 contributors. It’s extensively used for scientific and technical computations because it extends NumPy and provides many user-friendly and efficient routines for scientific calculations.

NumPy

NumPy (Numerical Python) is the fundamental package for numerical computation in Python; it contains a powerful N-dimensional array object. It has around 18,000 comments on GitHub and an active community of 700 contributors. It’s a general-purpose array-processing package that provides high-performance multidimensional objects called arrays and tools for working with them. NumPy also addresses the slowness problem partly by providing these multidimensional arrays as well as providing functions and operators that operate efficiently on these arrays.

Matplotlib

Matplotlib has powerful yet beautiful visualizations. It’s a plotting library for Python with around 26,000 comments on GitHub and a very vibrant community of about 700 contributors. Because of the graphs and plots that it produces, it’s extensively used for data visualization. It also provides an object-oriented API, which can be used to embed those plots into applications.

Conclusion

Well, that was it for the important Python libraries that would be very helpful in learning Data Science. I hope you found some help from this.

What is the best game development engine?

Thomas Wilfred — Mon, 22 Jun 2020 09:38:45 +0000

Gaming is something we all enjoy. Games are a great way to pass time, speaking from my own experience. Not only this, but gaming also teaches many crucial things about planning, strategy making, teamwork, and quick reflexes.

Due to this immense love for games, many people start learning game development. I mean, wouldn't it be nice if people played a game developed by you? It would be more than a proud moment to see their response.

For game development, the most important element is the Game Engine. It decides how your game will come out in play. So in this article, we are going to describe some gaming engines that would help you in Game Development.

What is Game Engine

A game engine, also known as a game architecture, game framework, or game frame, is a software development environment designed for people to build video games. Developers use game engines to construct games for consoles, mobile devices, and personal computers.

The core functionality typically provided by a game engine includes a rendering engine (“renderer”) for 2D or 3D graphics, a physics engine or collision detection (and collision response), sound, scripting, animation, artificial intelligence, networking, streaming, memory management, threading, localization support, scene graph, and may include video support for cinematics.

A Game engine consists of five main components.

Main Game Program – It consists of the algorithms that implement the game’s logic.
Rendering Engine – The job of the rendering engine is to generate animated 3D graphics.
Audio engine – It consists of algorithms related to loading, modifying, and output of sound through the user’s speaker. Newer Audio engines are capable of producing Doppler effect, echoes and oscillations.
Physics Engine – Physics engine is used to implement the laws of physics realistically within the game.
AI – AI or Artificial Intelligence is employed according to the genre of the game since each genre uses a different logic.

Now that we have described the game engine, let us look at the top game engines.

1. Unity

Unity is a game engine developed by Unity Technologies. It is one of the most widely used engines in the game development industry. Since it is a cross-platform engine, it can be used to create games for different platforms like Windows, iOS, Linux, and Android.

The engine has been adopted by industries outside video gaming, such as film, automotive, architecture, engineering, and construction. As of now, the engine supports as many as 25 platforms. The latest version of the Unity at the moment is Unity 2019.2.

The engine can be used to create three-dimensional, two-dimensional, Virtual reality, Augmented Reality, and simulations/experiences.

Advantages of Unity

Advantages of Unity are

Debugging – Debugging in Unity is a hassle-free work and easy job for any developer. The support for debugging is nice because all the variables are displayed in the gameplay.
Graphics – It supports high-quality audio and visual effects that support easing the game development. The visuals are capable of adapting to every screen and device.
Analytics – Unity consists of built-in analytics which you can easily find in the editor. Thanks to Unity Analytics, you can get very deep insights into your game. It gives you information that can be used to improve the gameplay by doing some modifications and offer an awesome gaming experience for the players.
Community Support – Unity enjoys the support of a large number of users that help in keeping the engine up-to-date and free of bugs.
Platform Support – This is one of the biggest strengths of Unity. Since it offers support to 25 different platforms, it becomes easy to share an app created in one platform among others. Besides, its methodology allows for speedy prototyping, which in turn reduces the time required to develop apps.

2. Unreal

Unreal is a game engine developed by Epic Games which was first showcased in 1998 first-person shooter game Unreal. Initially, it was developed as a game engine for the first-person shooter. But over the year, it is being used to develop for other genres like platformers, MMORPGs, and other RPGs. The latest version of Unreal is 4.25.

It is the most preferred engine when it comes to game development for big title games(AAA). It is more suited for those working in teams rather than individually.

Advantages of Unreal

Performance – The performance of the Unreal Engine is great due to the fact that it uses very little memory and other resources.
AAA Games – Unreal is widely preferred when it comes to making big-budget games where the quality of the game needs to be over the roof.
Open-Source – Since Unreal Engine is open-source, this makes its development very easy and increases its efficiency. Iteration – Unity makes rapid iteration easy, which makes it useful when making a new project.
VR – It provides good integration for VR for achieving the best quality picture.

3. CryEngine

CryEngine is a game engine developed by German developer Crytek. It has been used in all of their titles. It has also been used for many third-party games under Crytek’s licensing scheme and has beautiful graphics. Along with it, the characters made with it are life-like.

To learn how to use CryEngine, there are a lot of free resources. Since it is programmed in C++, C#, and Lua, it is easy to code and supports platforms like macOS and Windows and consoles like Playstation and Xbox.

Advantages of CryEngine

Advantages of CryEngine are

Exceptionally convenient real-time lighting engine, neat terrain tools.
90% of the gameplay framework is already in place, the best technical art pipeline in the business, blueprints offer high accessibility to designers.

Conclusion

Game development is a very interesting and fun hobby if you feel connected to games. For that, we use game engines like Unity, Unreal, and CryEngine. Unity is used for its beautiful graphics and platform support. Unreal is used for making big-budget games that are made by large teams. The performance of the engine is pretty good. CryEngine is used by CryTek and mostly employed in games like FarCry and Crysis.

Each engine has its own set of advantages and drawbacks. You can compare it on your own. Some might suit others while some won't. So it's better if you check its compatibility yourself.

How to begin you Android Development Journey?

Thomas Wilfred — Fri, 05 Jun 2020 09:47:40 +0000

Android Development is quite raging these days. With almost everyone having a smartphone, demand for apps has lead to the exponential rise of the app industry. Big businesses are shifting their base to an online model to capitalize as much as possible.

Hence, companies are looking to hire people who have good knowledge of app development. Therefore, we are going to discuss how to begin your Android Journey from scratch

But before jumping to that, let us have a brief overview of Android Development.

What is Android Development?

Android app development has huge market scope, considering Android is one of the most widely used OS in smartphones these days. It occupies a huge market share, thanks to the strong backing by Google and mobile companies using it as their primary OS.

Advantages of Android App Development

Higher Income– App development provides a great opportunity for those who want to make good money. According to Payscale, the average salary of an entry-level Android developer in the United States is $98000. It is quite a huge competitive amount if you compare it with other developments or other domains. Therefore, it is a good option to consider getting into, for those who want to make a good amount of money.
Revenue Generated– This is no hidden truth, that apps are a great source of capital. Google Play Store gives you a great chance to sell your app. The number of downloads and ads you run on it determines the net revenue of the app. According to latest statistics, the revenue generated by apps on Google Store and Apple Store was $51 million and $84 million respectively.
Freelancing– One of the biggest benefits of app development is the ability to do freelancing. You can easily work for yourself as per your need and convenience. Furthermore, one can work from the comforts of your home without actually going to the workplace/office.

Now that we have got the basics of Android covered, let us begin with the development process.

How to start Android App Development?

1. Go to the official Android website

First, visit the website. It has many things that would help you in getting an idea about the ecosystem and a variety of solutions, ideas, and technologies linked with Android. You won't understand everything but you would know where to look the next time you forget something.

2. Check out Kotlin

Google officially supports Kotlin on Android as a “first-class” language since May 2017. Fewer companies are developing commercial applications using only Java, so studying Kotlin is a necessary step to become a successful Android Developer. For all the documentation related stuff, you can refer to Kotlin's official website.

3. Get to know material design

Material design allows you to design beautiful products, design, and build with new tools for customizing material and sharing work. Try to feel it. Be the material. Think like material. Behave like material. You shouldn’t miss this point while getting started with Android.

4. Download Android Studio

It’s unquestionably the best IDE for Android and it’s from Google. If you have been using Eclipse previously, then you would find Android Studio a better IDE compared to it.

5. Write some code

It’s time to look a bit at the code and write something. Practice together with a theory is one of the best ways of learning. Go back to the official Android website and this time go to Develop. There are two of the most important sections:

Training courses and Codelabs – you can find there a lot of helpful examples. Go through all these lessons before you start programming for real.
API Reference – I know it will be hard to go through all these texts, descriptions, examples, and so on but it’s worth it. Trust me. This section is very important.

Conclusion

Android App Development is the way to these days. It has many advantages like good ROI(Return on Investment), Freelance working, Higher salaries, and many more. It is expected to grow even more with the reach of smartphones extending to each and every person. Therefore, it is better that you have an idea of Android. It will help in improving your understanding.

React vs Flutter vs Xamarin

Thomas Wilfred — Tue, 26 May 2020 13:05:29 +0000

Cross-mobile app development is quite trending these days. It is used to develop apps for Android as well as iOS. It helps in the reduction of time and money for the development of the app.

We have heard a lot of buzz around React and Flutter, the two raging cross-platform apps for mobile app development. But we haven't compared it with the old player in the market, Xamnarin. So in this blog, we're going to do a comparison between the three.

To begin with, we will have an introduction to the three software.

Flutter

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia, and the web.

It allows the developers to create a native mobile application with only one codebase. In short, you can create applications for two different operating systems by using one programming language.

It is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. It develops beautiful

Programming of Flutter is done in a programming language known as Dart, a quick, object-oriented programming language. It is new compared to other programming languages and easy to learn, specifically for those who have programming knowledge of C# and Java.

Advantages of Flutter

Beautiful Design - Flutter has its own widgets that are managed by its graphics engine. It has a beautiful UI which is good for viewing experience. Due to this, it makes beautiful looking designs.
Same UI across all devices - The UI of Flutter is the same on all devices, irrespective of their mobile version. In other words, a 3-year old phone will have the same experience for Flutter as a modern phone.
Productivity - With the help of Flutter, you can change the code and see the changes in real-time.
Less Testing - Flutter requires almost half the testing of the applications developed using it compared to the application developed by other frameworks.

React Native

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web, and UWP by enabling developers to use React along with native platform capabilities.

It is one of the most preferred cross-platform software for app development. It was released in 2015, way before the release of Flutter. Since it's a cross-platform software, you can use the same code across the web and mobile.

Advantages of React Native

Community - React Native enjoys a large community support thanks to being the oldest cross-platform framework available in the market and the backing of Facebook. It gets timely updates and fixes.
Performance - Performance of React Native is very fast and gives a fluid feel thanks to its UI.
Cross-Platform Capabilities - App development in React Native is fast because it uses a single code to develop apps for different platforms.
Easy to Use - React Native is programmed in Javascript, a popular language for framework programming. Also, React Native is very similar to React. Therefore, anyone who has worked on React won't face any difficulties working with React Native.

Xamarin

Xamarin is a cross-platform software owned by Microsoft. With a C#-shared codebase, developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share code across multiple platforms, including Windows, macOS, and Linux.

User Interface - It gives the developer complete freedom to choose the User Interface layout, a great benefit while designing apps according to user interests.
Simplified Maintenance - Due to its cross-platform application, Xamarin makes maintenance and updates easier. You can simply deploy the changes or updates to the source file and they will be applied to both iOS and Android apps.
Native User experience and feel - Xamarin cross-platform app development tool (IDE) enables such C# coding that the result is a native look and feel of the mobile app. At the moment of app runtime, it converts UI components into platform-specific elements, resulting in native app-like experience.
API Integration flexibility - Xamarin mobile application development also stands out because of its utmost flexibility to use the same APIs and UI controls as found in developing Android, iOS, and Mac applications.

Now that we have discussed them individually, let us see how they compare against each other.

App size - The size of the app is the smallest in React native, followed by Xamarin and Flutter.
Learning Curve - The learning curve of React Native is the simplest due to its similarities with React and JavaScript. Flutter has a steeper learning curve as it requires Dart for its programming. Xamarin has the steepest curve because Xamarin requires separate configurations for iOS and Android- i.e Xamarin.iOS & Xamarin.Android.
Community Support - React native has the largest community support thanks to its developers timely updating it. Xamarin comes in second but it is more because of the fact that it has been present for long. Flutter is relatively new and gaining support slowly.
Programming Language - React Native is programmed using Javascript, a language found common in many frameworks. Flutter is programmed using Dart, which isn't a common language. Xamarin is programmed in C#, which is mainly used for web development.
Testing Support - React Native community has no official support for integration and UI level testing, while Flutter has great documentation and a rich set of testing features. Xamarin has good testing support but loses to Flutter as it has widget testing support and the ability to conduct tests at multiple levels.
Developer Productivity - React and Flutter have almost the same productivity as they both have Hot Reloading. Xamarin is better than the two because it has great developer support in terms of resources and tools.
UI Components & Development API - Flutter is rich in developing APIs and UI components whereas React Native is too dependent on third-party libraries. However, Flutter lags behind Xamarin because of Xamarin's rich set of documentation and a developer API.
Installation - Xamarin installation is dependent on the Visual Studio IDE, whereas Flutter installation is performed via the command line. Both Flutter and React Native lack simpler installation with native package managers for a specific OS.

Conclusion

With all that, we have completed the comparison between React Native, Flutter, and Xamarin. I hope it gave you some new insights into the three.

Thanks for reading.

Flutter vs React Native

Thomas Wilfred — Fri, 15 May 2020 13:28:00 +0000

Flutter and React Native- Which one of them is the best? This has been one of the hottest cross-platform app debate that has been going on ever since its arrival in December 2018.

Ever since the number of smartphones has increased, the demand for apps has also observed a rise in demand. Since we have Android and iOS as the primary OS, building apps individually for them is expensive and time-consuming.

Taking notice of that, developers started to opt for cross-platform solutions over the native solutions to build apps for iOS and Android together with lesser time and money.

To solve this problem and capitalize on it, Facebook released React Native in 2015. It was the only software for cross-platform app development at the time and made its name in the market.

Flutter arrived in the market when React Native had almost taken the entire market in its stronghold. It also provides the same set of features with few additions.

Now, let us look at both Flutter and React Native

Flutter

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia, and the web.

It allows the developers to create a native mobile application with only one codebase. In short, you can create applications for two different operating systems by using one programming language.

It is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. It develops beautiful

React Native

React is an open-source mobile application framework developed by Facebook. It is used to build applications for Android, iOS, and UWP by allowing its native capabilities.

React Native helps developers use the same code across the web and the mobile. And the specialty feature is that there is very little difference between a finished app built in Objective-C or Java and one built using React Native.

Advantages of Flutter

Beautiful Design - Flutter has its own widgets that are managed by its graphics engine. It has a beautiful UI which is good for viewing experience. Due to this, it makes beautiful looking designs.
Same UI across all devices - The UI of Flutter is the same on all devices, irrespective of their mobile version. In other words, a 3-year old phone will have the same experience for Flutter as a modern phone.
Productivity - With the help of Flutter, you can change the code and see the changes in real-time.
Less Testing - Flutter requires almost half the testing of the applications developed using it compared to the application developed by other frameworks.

Advantages of React Native

Community - React Native enjoys a large community support thanks to being the oldest cross-platform framework available in the market and the backing of Facebook. It gets timely updates and fixes.
Performance - Performance of React Native is very fast and gives a fluid feel thanks to its UI.
Cross-Platform Capabilities - App development in React Native is fast because it uses a single code to develop apps for different platforms.
Easy to Use - React Native is programmed in Javascript, a popular language for framework programming. Also, React Native is very similar to React. Therefore, anyone who has worked on React won't face any difficulties working with React Native.

Disadvantage of Flutter

App Size - The size of the app developed in Flutter is quite large compared to the native ones.
Community - The developer community for Flutter is very small when compared with other frameworks. This is mainly because of its arrival not being very old.
Libraries and Development - Flutter is full of components and Google's support for Flutter is impressive. However, as it is very new, there are a lot of functionalities you wouldn't find in its libraries.

Disadvantages of React Native

Debugging - React Native introduces another layer to the project. This makes the debugging of the project difficult.
Abandoned Packages - React Native boasts of a large number of libraries. However, most of these libraries are either of low quality or have been completely abandoned.
Low Security - Since React Native is a Javascript-based library, it requires a little bit more attention when it comes to security. Javascript is famous for its fragility so you would need to be extra careful.
Memory Management - It is not very suitable for computation-intensive apps. The performance and speed of the app are degraded in such a case.

With all that done, let us look at the differences.

Comparison between Flutter and React Native

Learning Curve - Learning required to be done for Flutter is more than React because you need to learn Dart which is not a frequently used programming language. React Native requires less learning thanks to its similarity with React.
Components Library - React has an extensive library which has a lot of functionalities. On the other hand, Flutter doesn't have such a library.
UI Components - Flutter is very rich in components. It doesn't need to use 3rd party components. React isn't that much rich in components. To make the use of its core UI components, it requires the use of the 3rd party library.
Maturity - React Native seemingly has more maturity than Flutter. It has seen many changes over the years whereas Flutter is relatively new and requires many changes.
Applications - React Native is used by companies like Facebook, Instagram, Airbnb, and PayPal while Flutter is used by companies such as GeekyAnts, Appinventiv, and BrainMobi.

Conclusion

To summarise this, it is very difficult to say which one is the best of the two. Both of them have their own set of pros and cons. Some things are better in React Native while some are better in Flutter. So it comes down to your preferences. So choose what's best for you and begin your app development.

Thanks for Reading.

CSS vs SCSS

Thomas Wilfred — Thu, 23 Apr 2020 12:05:14 +0000

CSS is one of the foundations of web development. It has been there for years. But ever since SCSS has been developed, CSS has got a tough competition from it. So what is it that makes SCSS better than CSS? Read more to know the differences between both of them.

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the structural content.

The basic idea behind CSS is to separate the structure of a document from the presentation of the document. HTML is meant for structure. It was never intended for anything else. All those attributes you add to style your pages were added later as the viewing public demanded it. All those additions though make HTML clumsy and work against its main purpose of structuring a document. HTML is there to let a browser know that this block of text is a paragraph and that block of text is a heading for this paragraph.

Advantages of CSS

Easier to maintain and update
Greater consistency in design
More formatting options
Lightweight code
Faster download times
Search engine optimization benefits
Ease of presenting different styles to different viewers
Greater accessibility

Disadvantages of CSS

It ould be easily overridden
It takes more time to download a CSS file than an HTML file.
It becomes complicated because of different versions.

SCSS

SASS or SCSS (short for syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass SassScript, a scripting language used in Sass files.

Sass consists of two syntaxes. The original syntax, called "the indented syntax," uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

Advantages of SCSS

It contains fewer codes so you can write CSS quicker.
It is more stable, powerful, and elegant because it is an extension of CSS, making it easy for designers and developers to work more efficiently and quickly.
It is compatible with all versions of CSS. So, you can use any available CSS libraries.
It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions, and other values.

Disadvantages of SCSS

The developer must have enough time to learn new features present in this preprocessor before using it.
Using SCSS may cause losing benefits of the browser's built-in element inspector.
Debugging becomes harder in case of SCSS
It can produce very large CSS files.

Now that the brief description of both CSS and SCSS is done, we will discuss the comparison between CSS and SCSS

SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it.
SCSS is full of advanced features.
SCSS is more expressive than CSS
It encourages proper nesting of rules.

Thanks for reading the article.

CSS Interview Questions

Thomas Wilfred — Thu, 02 Apr 2020 08:23:33 +0000

CSS, an abbreviation for Cascading Style Sheets, is a style sheet language used for describing the layout of a document written in a markup language like HTML. It is one of the three technologies used to design the Web pages- the other two being HTML and Javascript. It is designed to enable the separation of presentation and content layout.

It has a simple syntax and uses a number of English keywords to specify the names of various style properties.

Now that we have discussed the basics of CSS, let us have a look at the important Interview questions based on CSS.

Q1- What is CSS?
Ans- CSS stands for Cascading Style Sheet. It is a popular styling language that is used with HTML to design websites. It can also be used with any XML documents including plain XML, SVG, and XUL.

Q2- What is the origin of CSS?
Ans- SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that defines markup languages.

Q3- Why background and color are the separate properties if they should always be set together?
Ans- There are two reasons behind this:

It enhances the legibility of style sheets. The background property is a complex property in CSS, and if it is combined with color, the complexity will further increase.
Color is an inherited property while the background is not. So this can make confusion further.

Q4- What are the different variations of CSS?
Ans- The variations for CSS are:

CSS 1
CSS 2
CSS 2.1
CSS 3
CSS 4

Q5- Who maintains the CSS specifications?
Ans- World Wide Web(WWW) maintains the CSS specifications.

Q7- Discuss the merits and demerits of Embedded Style Sheets
Ans- There are several merits and demerits of embedded style sheets:
Merits of Embedded Style Sheets:

Multiple tag types can be created in a single document.
Styles, in complex situations, can be applied by using Selector and Grouping methods.
The extra download is unnecessary.

Demerits of Embedded Style Sheets:

Multiple documents cannot be controlled.

Q8- What is the purpose of Z-index and how is it used?
Ans- The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

Auto: Sets the stack order equal to its parents.
Number: Orders the stack order.
Initial: Sets this property to its default value (0).
Inherit: Inherits this property from its parent element.

Q9- What does CSS selector mean?
Ans- A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

Q10- What are the advantages of CSS?
Ans- Advantages of CSS are:

Bandwidth
Ease of use
Website Speed
Multiple Browser Support
Device Compatability

Q11- What is the difference between CSS2 and CSS3?
Ans- The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which are also known as modules. Unlike CSS2, CSS3 modules are supported by many browsers.

Apart from that, CSS3 contains new General Sibling Combinators which is responsible for matching the sibling elements with the given elements.

I hope this article helped you in gaining some new information regarding CSS.

Javascript: Its significance and future aspects

Thomas Wilfred — Thu, 12 Mar 2020 11:24:52 +0000

Javascript is the foundation stone of the frameworks we use today like React and Vue. We cannot imagine software development without the contribution of Javascript. Therefore, we are going to discuss Javascript and future aspects.

What is Javascript

Javascript, often abbreviated as JS, is a programming language that conforms to the ECMA specification. It is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

Combined with HTML and JSS, it forms the backbone of the World Wide Web. It is the most preferred language for web development. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

Advantages of Javascript

Speed: Since Javascript is an interpreted language, it reduces the time required by other programming languages like Java for compilation. Along with this, it is a client-side script, meaning it can be run immediately within the client-side browser.
Simplicity: Javascript is easy to learn and implement, saving developers a lot of money for developing dynamic content for the web.
Popularity: Since all modern browsers support Javascript, it is present almost everywhere. It is used as a tool by many famous companies like Google, PayPal, etc.
Interoperability: Javascript works flawlessly with other programming languages and can be used in a variety of applications.
Rich Interfaces: It provides various interfaces to developers for creating catchy and elegant looking webpages. Drag and drop components or sliders may give a rich interface to the webpages.

Disadvantages of Javascript

Client-side security: Since the code is executed on the user's computer, it can be used for unlawful purposes. These purposes may include using the source code without authentication. Also, it is very easy to place some code into the site that compromises the security of data over the website.
Browser Support: Javascript is interpreted differently by different browsers. Hence, the code must be run on all the platforms before its publishing.
Single Inheritence: Javascript supports only single inheritance and not multiple inheritances.

Future of Javascript

Javascript has become an integral part of the development community. We cannot imagine developing frameworks or webpages without Javascript, especially for the front end. With the increase in the popularity of frameworks like Vue and React, Javascript is destined to become famous and have a huge community base.

Therefore, it has become crucial for companies to hire people who have good coding as well as knowledge of Javascript

How to prepare for Javascript interview?

In this competitive world where each person is trying to surpass another, it becomes important to be above your peers. You need to show your worth to companies when you go to them for work.

To help you with this, we have prepared an array of questions commonly asked in interviews based on Javascript.

Click here to check out beginner level questions.

Click here to check out advanced level questions.

Summary

Javascript is a great language when you talk about the current scenario. The entire developer community is focused around Javascript. You cannot imagine front end development without Javascript. It will help in building your career and help you become a good developer.

I hope this blog helped you in understanding Javascript.

Comparison between React Native Web and React

Thomas Wilfred — Tue, 25 Feb 2020 06:41:40 +0000

I'm sure most of you would agree that we don't need an introduction to React. It is the unquestionable leader of the framework world. But then, Facebook went ahead and released React Native web. "So what is the meaning of this?" is what most of you would be thinking. Is it the same thing? If not, then doesn't it make React completely redundant?

Well, this article is all about clearing that doubt only. You will be clear about both by the end of this article.

React Native Web vs React

Since React used the virtual DOM concept and there was a code conversion from jsx to HTML, developers thought of using the same concept for the apps, i.e. Write jsx and convert the code into java and objective c under the hood. And that’s how React native was born.

Also, developers thought of simplifying the code writing process by writing one code instead of two codebases. This way you have to write just one code and let it get converted into HTML, java, and objective c under the hood. And that’s how React native for the web was born.

Is React obsolete now or can React Native Web and React Native work together?

Although React Native web is a great software for creating your own website, it is advisable to use it only when you have to build both web and app versions together, or if you already have an app in react native and are planning to launch the web version.

Advantage of React over React Native web

React’s syntax is close to HTML. In React, we use div, h1, h2, p, etc, and it is easier for a frontend engineer with the HTML background to jump in. Whereas in react-native-web, we use , which is what is used in react–native and is different than the HTML way of coding.
You can easily experiment with the browser's inspect element and change the HTML over there to test your changes to React, as the conversion of React code to the browser is pretty straightforward.
You can easily integrate third-party libraries. Most of the third-party libraries have React packages, even if they don’t you can easily integrate the library in the raw HTML and js form. Whereas with react-native-web integrating third-party libraries may not be that straightforward, although sometimes you can always create mocks.
React is more stable and you can obtain a lot of documentation on the web.
The community support that React has is very large compared to the React Native web.
React Native web is a comparatively new technology so there isn't a lot of documentation on the internet right now.

Advantages of React Native Web over React

If you already have a codebase in react-native written, then with minimal changes you can run the same code on to the web. Whereas if you select react, then you have to start almost from scratch. Although, you can save some time by setting a monorepo and keeping some utils code common between both the app and the web.
React Native Web is great to use if you want to build app and web versions together as it provides maximum code sharing whereas, with React you have to keep the files separately.
As the community is driving towards using styled-components everywhere, slowly it is going to be quite similar development efforts to use react-native-web and react.

Fundamentals of the React Native web

Every frontend framework needs some fundamentals to show its advantages

Easy to start
Great Development experience
Navigation
Styling
Good Community support

Easy to Start

Setting up React Native for the web is quite easy with the expo. Since expo SDK version 33, expo gives support to the react-native web.

Great Development Experience

With the expo kit, you get hot reloading and other great development benefits and experiences. Its been seen that changing styles sometimes get difficult with react-native-web when you are coming from an HTML background and don’t have much experience with react-native.

Navigation

React-navigation is one of the most popular navigation libraries for react-native, and since version 3.0 it has extended the support for react-native for the web as well.

Styling

Styling react-native-web component is exactly the same as styling react-native components. In case, you want to have specific styling for the web, you can always write the conditional styling using Platform.OS === ‘web’ check.

Good Community Support

Since react native web is a recent technology hence it doesn’t have a community as big as react. But you’ll for sure get a lot of help on the web.

Well, this was the comparison between React and the React Native Web. I hope it was helpful to you and provided some new insights to you.

Fetching API data with ReactJS

Thomas Wilfred — Fri, 21 Feb 2020 13:08:00 +0000

If you've used fetch to retrieve data from API using Javascript, then doing it with React will be pretty similar. In this article, we'll discuss the steps you need to use fetch to get data from an API using React.

But before we get into the details, we need to be familiar with some basic definitions.

API: An API is basically a set of data, often in JSON format with specified endpoints. When we access data from an API, we want to access specific endpoints within that API framework. For example, if in the scenario we are using today, we are going to be using the random user API. Within this API, it has randomly generated user data, basically like Lorem Ipsum, but for imaginary users. It has data within the API like phone numbers, email addresses, names and pictures for each user. We don’t want all the data, but we’ll use certain endpoints to grab only the data we want.
Fetch: Since all the data we want is stored in an API, the fetch is used to retrieve the data. By this command, we are basically requesting the API to send the data stored in it. We can also specify how we want the data to be returned. JSON data is often the easiest to use, so if the server returns anything other than JSON format, if that’s what we’ve requested, we may get an error.
Lifecycle Method: In React, there are several lifecycle methods. We’ll be using three of these lifecycle methods in this exercise, Constructor, componentWillMount and Render.
State: State can be very confusing for someone who is new to React. The state can be compared with the state of water- it is the same thing but different according to the state.

Now that we're done with the basics, let us dive into the process.

Because React uses components, it’s easy to make a fetch request, or pull data from an API, store it in one component, and then import the entire component to the app or parent component. Since you may need to fetch from multiple sources or have multiple fetches from the same source, dividing it up into components will help keep your code less cluttered. Here’s how I set up the architecture of this app:

The background component contains all of the user photos that we’ll pull from the fetch. But I’ve made Background it’s own component, and then import it into Splash, so that the code remains cleaner and less cluttered. You can go ahead and set up the architecture of your app before you begin making the API if it’s easier for you to work that way. Now, let’s take a look at the Random User API, so we can see what data we want to grab.

Before you get too far into the project, it’s usually a good idea to go to the API and read any documentation available. This will usually give you a good idea of how the API is structured and how to access the data. Often, bigger APIs will have you register for a key, or have specific ways you need to access the data. Random User API is open source and easy to use, so we can avoid a lot of that hassle.

Once you’ve had time to look over the API documentation, I usually like to pull the data up in a program called Postman. Postman is a great way to see the data and target the specific data you want. If you haven’t downloaded it already, go ahead and take a second to do that.

Here, in postman, you will notice a couple of things. At the top, I’ve put the API address into the search bar. Since we’re retrieving data, I’ve set the request to a GET request. If this were an API that we had constructed, we could also do a POST, PUT or DELETE request, if we needed to. After the API address I’ve added one line, “results=500”. I want to make sure the Thumbnail pictures we pull fill the entire background, so I’m asking the API to return 500 results.
Now, suppose we were pulling data from the API, and instead of the background, we were making a user profile site. We might only want 1 result, or 3, or whatever. You can filter the results in many different ways, but for now, this is as complicated as we are getting. If you scroll through the data, you can see there’s quite a lot there. I’ve highlighted the data that we want. We don’t want any text data, only the pictures. And not just pictures. We only want the thumbnails, which are part of the picture object. Once we know what we want, and we can see in postman where that data is nested, it’s easier for us to target later.
Okay, now comes the fun part.

Here we are in the background component. Like I mentioned earlier, to do a fetch in React, we’ll need to use 3 lifecycle methods. You can look at this as a 3 step process.

Step 1: Constructor Method
In the constructor method, we only have to worry about two things. Once we call the constructor method, we use super to pass any props from the parent to the child component. Then we set the state. I mentioned the state earlier. When you set the initial state, you want to set it as empty, or blank. If it’s going to be a string, it would be an empty string. If an array, an empty array, etc. In this scenario, we only have one thing that we need to set the state of, and that’s the pictures. Because we want our pictures in an array, we’re setting it now to an empty array. Then, once we use the fetch to retrieve the data, we’ll go in afterward, and set the new state to the data that we’ve pulled.

Step 2: ComponentWillMount
In React, lifecycle methods including “Will” are called before something happens. Lifecycle methods including “Did” are called after something happens. In this case, we want to call the method before, and then pull the data, which is why we are using componentWillMount instead of componentDidMount.

Step 2, part A: Fetch:
Once you’ve done one fetch, you’ve basically done a thousand. The format will be more or less the same for each one, with just minor differences in how you want to map over the data, etc. In this fetch, we’re calling the fetch, and if you’ll notice in the web address, I’ve included the “results=500” filter that I pointed out earlier. Once you have targeted the data the way you want in postman, you can just copy and paste that URL into your fetch.

Step 2, part B: Results:
Here, we’re just specifying how we want the data returned. Since JSON is easy to work with, and that’s how this data is formatted, that’s what we’re expecting here.

Step 2, part C: Map:
Here, we’re mapping over the data that we’ve pulled. This is basically the same thing as doing for a loop. If you’re more comfortable using a for loop, there’s probably no reason you can’t do that. However, sometimes the map function just seems to work better. Think of mapping like this, We’ve told the API we want to get 500 user data objects. If we go back to the postman, we can see that each user data object contains a lot of information we don’t want, like numbers, addresses, etc. So we need to map over it first. Then, we can tell the API, “Hey dude, all we really need are these pictures here. Let’s just discard everything else”.

Step 2, part D: Key and Return data:
There are two parts to this step. First, we have to set the key, and then specify the data object. The key attribute is used by React to ensure that dom elements correspond with data objects. Here, we’ve set the key to pic.results. Then, we’ve created an image tag, with a source that’s set to the data we want to pull. Basically what’s happening here is we’ve set a key inside the parent container. Then, inside the parent container, we’re saying, “Okay here’s an element…and whenever all the data is mapped over, we want it to populate this element with that data.” Because we want pictures, that’s why we’re using an img element.

Step2, Part E: Set State
Now the last part of this lifecycle method, and arguably the most important. We need to set the new state of our pictures empty array. Using ‘this.setState’, we’re basically saying, “Hey React, remember that empty array we defined as ‘pictures’ earlier? Well, now we want to change its state. So we’re changing it to this array of pictures we pulled from the API. Is that okay with you?” React is usually pretty nice, so I don’t think it will mind.

Step 3: render:
Finally, the last lifecycle method, which is the render. Here, we want to use the new state we defined in the componentWillMount lifecycle method. So, we’re setting up a structure here, and then using curly braces to bring in that state “{this.state.pictures}”

I hope you enjoyed the article and understood how to fetch API data with ReactJS.

DEV Community: Thomas Wilfred

Should I learn Typescript before React?

What is Typescript

What is React

What should you learn first

What are the most important Python libraries and packages for Data Science?

What is Python

Important Libraries for Python

TensorFlow

SciPy

NumPy

Matplotlib

Conclusion

Top Data Structures Interview Questions & Answers

What is Data Structure

Interview Questions on Data Structures

Conclusion

What is the best game development engine?

What is Game Engine

1. Unity

Advantages of Unity

2. Unreal

Advantages of Unreal

3. CryEngine

Advantages of CryEngine

Conclusion

How to begin you Android Development Journey?

What is Android Development?

Advantages of Android App Development

How to start Android App Development?

Conclusion

React vs Flutter vs Xamarin

Flutter

Advantages of Flutter

React Native

Advantages of React Native

Xamarin

Conclusion

Flutter vs React Native

Flutter

React Native

Advantages of Flutter

Advantages of React Native

Disadvantage of Flutter

Disadvantages of React Native

Comparison between Flutter and React Native

Conclusion

CSS vs SCSS

CSS

Advantages of CSS

Disadvantages of CSS

SCSS

Advantages of SCSS

Disadvantages of SCSS

CSS Interview Questions

Javascript: Its significance and future aspects

What is Javascript

Advantages of Javascript

Disadvantages of Javascript

Future of Javascript

How to prepare for Javascript interview?

Summary

Comparison between React Native Web and React

React Native Web vs React

Is React obsolete now or can React Native Web and React Native work together?

Advantage of React over React Native web

Advantages of React Native Web over React

Easy to Start

Great Development Experience

Navigation

Styling

Good Community Support

Fetching API data with ReactJS