Author: Rohit Khadgi

Mobile App Development in Nepal

Posted on August 16, 2022November 2, 2022 by Rohit Khadgi

What is Mobile Application development?

The process of creating mobile applications that operate on mobile devices is known as mobile app development.
These programs can either come pre-installed or the user can download them and install them themselves.
They work with remote computing resources by utilizing the device’s network capabilities.
In order to access back-end services for data access through APIs, create software that can be installed on the device, enable back-end services, and test the application on target devices are all necessary steps in the development of mobile apps.

You must take into account screen sizes, hardware specifications, and numerous other elements of the app development process in order to create scalable mobile apps. Given the rise in employment opportunities in the mobile app development sector, it is critical that business owners, startups, and in particular developers understand the complete life cycle of mobile application development.

Why is Mobile Application development crucial?

People now consider mobile phones to be just as necessary as a wallet or handbag. Mobile Apps increasingly influence our retail choices, trip plans, and the photos we take to preserve precious moments. This indispensable consumer tool is now also fueling commercial activity.

Companies must create mobile apps that access corporate systems, enable business operations, transmit information, or collect data as more employees utilize smartphones and tablets. Mobile app development is becoming a corporate priority as a result.

Web applications are not the same as mobile apps, despite the fact that some businesses utilize them to transmit information to mobile devices. They provide information via a web browser but are unable to utilize all of the hardware features of a mobile phone or tablet. More than 70% of businesses are inclined towards making a mobile application.

Types of mobile applications:

Various frameworks are used in the design and development of mobile applications.
These consist of:

Native Mobile Apps :These are created specifically for a single platform and are built in a single programming language for a specific operating system, such as mobile apps for iOS or Android. Native mobile apps are quicker, more dependable, and have offline capabilities because they are created to operate on a particular OS or platform.
HTML5 mobile Apps : These apps enable you to benefit from the write-once, run-anywhere method.
The majority of simple apps are created using HTML 5. Cross-platform HTML5 mobile apps are efficient and affordable.
Hybrid Mobile Apps: These apps have native viewer functionality and back-end programming.
Some of the top apps in the world, including gmail, Twitter, Amazon, and others are hybrid applications.
Plugins that give developers access to a platform’s native capabilities can be used by hybrid apps.
They also develop more quickly and require less maintenance.

Why Native App Development?

When using native platform features, choosing native app development is beneficial. Native apps have access to the device’s hardware functions, such as the GPS, camera, and microphone, which speeds up the execution of features and makes it simpler to provide a rich user experience.

Native development makes it much simpler to implement push alerts. For instance, push notifications to pass between the Cloud Messaging Platform of Google and the iOS Server (APNS). Due to the fact that the code is written in the original language, native apps have fewer defects.

Why cross-platform app development?

Both iOS and Android have nearly a 50/50 market share. Any of the platforms, and occasionally both, may be where you find your potential customer. It takes a sufficient budget to create distinct apps for both platforms, and not all businesses have one. Additionally, developing native platforms can make it more difficult to provide the same level of speed and functionality that your program requires.

If you want to have one development team publish for both platforms, or if you want to align the user experience across both platforms, or if you don’t have the resources to create and manage two distinct apps, choose cross-platform development.

Why Progressive Web App Development?

PWAs (Progressive Web Applications) are developed using standard web languages like HTML5, CSS, and Javascript.
These apps can only be accessed using your device’s browser. Therefore, if your user will have constant access to network connectivity and they can solve their problems using the browser alone, without needing any native device capabilities like a camera, machine learning module, GPS, gyroscope, and so forth, then you should design a PWA.

In light of this, let’s examine the steps involved in developing a mobile app step by step and learn everything you need to know to create your next successful app.

Mobile application development process:

Despite the overwhelming evidence in favor of creating an app, it is crucial to go through the entire mobile application development process. This will make it easier for you to see how your application fits with your objectives and your target market. Pick a route that will help you realize your vision. Here is a summary of the lifecycle of developing a mobile application.

Study : Every software starts with a concept. It can only be successful, though, if the concept is advantageous to the client. Make sure the demographics, motivations, and behavior patterns of your customers are included in your analysis.
Wireframing : By creating a thorough drawing of the desired product, you might find usability problems. Wireframing will help you organize and enhance your idea after drawing.
Analyze the technical viability : Your team’s ability to determine the initial functionality and feasibility will be aided by questioning, idea-generating, and status-reviewing.
Prototype : You can use this step to determine whether you are heading in the right path.
Additionally, it will enable various stakeholders to view your app for the first time and confirm the data you have acquired.
Design : Produce many screen iterations.
You’ll be able to envision the finished project thanks to the clear visual direction.
Develop : The real development of the mobile app takes place during this crucial stage of the app development process.
Testing : Delivering the software to consumers for testing the user experience. You may improve your software by adding what, in their eyes, is missing thanks to their input and thoughts.
Launch : Publish your app in the app store to launch it.
Plan routine maintenance to eliminate issues and improve user experience.

Mobile Application development platforms:

Android and iOS are two significant mobile application platforms. Apple’s mobile operating system, known as iOS, was created exclusively for iPhones. Mobile devices made by Google and several OEMs run Android. Despite the fact that the two share a lot of similarities, they each employ a different software development kit. The top programming languages for Android are Java, Kotlin, C++, C#, BASIC, Lua, etc. The top programming languages for iOS include Swift, Objective-C, React Native, Flutter, and others. In addition to the platforms for building mobile applications for Android and iOS, there are cross-platform development tools like Apache Cordova, Xamarin, Ionic, Python, Ruby, etc.

How to make sure your app is successful after launch ?

Track Key Performance Indicators (KPIs) for your app’s success when it is published to the app stores and use mobile analytics services to track user behavior. Check crash reports and other user-reported issues frequently.

Users should be encouraged to offer your firm comments and ideas for your software. Maintaining user interest will depend on providing end users with prompt support and, if necessary, constantly patching the program with enhancements. Mobile app updates must go through the same submission and review procedures as the initial submission, in contrast to web apps, where patch releases can be made instantly available to app users. Additionally, with native mobile apps, you have to regularly update your app for new mobile devices and OS platforms in order to keep up with technological changes.

Moreover, genesis being the best mobile application development company in Nepal, provides maintenance and support for all types of apps.

What is the price of creating a mobile app in Nepal?

Once more, the solution is based on functionality and a number of other factors. With that in mind, coupled with everything you have just read in this article, it is clear that even a simple mobile app demands a skilled team and a methodical approach.

You may also now realize that it is a fallacy that mobile apps can be created in a week for less than $5,000.
Unfortunately, the gig economy and news stories about instant successes spread the misconception that it is cheap and simple to create successful mobile apps. According to our experience, the average cost to design a mobile app is between NRS.150,000 and NRS.2,0000,00 and more may be required for more complex apps.

At genesis, we offer an affordable price for all technology services and it includes mobile application development as well. Depending upon the complexity and size of application, we offer services that suits your needs.

Some of the projects done at Genesis:

Nepal Press – Online News portal from Nepal in Nepali language.
Himalaya TV – Himalaya television mobile App.
Visit Gandaki – Promotes rural places of Gandaki zone.

Application Programming Interface (APIs)

Apps for smartphones have developed to the point where they are always in communication with servers.
The back-end, web service, or APIs are used by the vast majority of programs in order for them to function without connectivity. These APIs might be offered by organizations like Amazon, Google, Facebook, or others, or they might be created in-house by the teams working on mobile app development.

RestAPI is one of the simplest options for anyone developing mobile apps and is used for the majority of mobile API development. It facilitates users’ rapid communication and connection with a distant cloud data server.
But if done incorrectly, sending requests via the network might have serious consequences.
When creating mobile APIs, some considerations to make include:

Recognize the operation of web services.
Although there are many different APIs accessible, the majority of them are based on REST and return data in JSON format.
Recognize how HTTP protocols operate.
It is crucial to understand how HTTP URLs function, how data is transferred, and how it manages distant operations because REST relies on HTTP protocols to handle data.
It’s also crucial to understand how REST converts URLs into the necessary requests.

Security should not be neglected

The security precautions must be maintained whether you utilize a pre-made API or create your own.
It is constantly a crucial element for developers. Additionally, it is essential for the growth of mobile.
Before calling web-based APIs, developers must access control mechanisms, privacy controls, and secret keys. Once upon a time, APIs had independent security. The API integration process is now made easier by standards like OAuth2, TLS, and Open ID.

Mobile App front-end development

Your users will view the front end of your mobile app. There are many different technologies used in mobile frontend development. Some apps need APIs and backends, while others merely need to use the platform’s native databases.

The backend of your mobile application can be created using nearly any web programming language.
You can leverage technology-specific offerings while creating native applications.
For instance, Objective-C, Swift, Flutter, or React Native are all programming languages that can be used to create iOS applications. You can create Android applications in Java, Kotlin, Flutter, or React Native.

Every programming language offers a different set of features depending on the platform you choose.
By selecting the ideal programming language, you should be able to select a team that is knowledgeable about which essential technologies may be used most effectively.

Mobile App testing

It is crucial to ensure that an application’s quality is top-notch after it has been properly developed.
As it influences the dependability, stability, and usability of the generated application, quality assurance is an essential step in the creation of mobile applications. Also, there are a number of issues that need to be addressed by adhering to a full testing cycle specific to each application in order to achieve an all-inclusive testing process.

In general, testing can be divided into two types: manual testing and automated testing. Whether an application requires manual testing or whether automated testing can produce reliable findings depends on the type of application.

Any application must successfully navigate a variety of testing procedures in order to produce a flawless application.

Author : Anurag Pokhrel

Front-end VS Back-end

Posted on August 15, 2022November 2, 2022 by Rohit Khadgi

What is Front-end and back-end?

The two most common terminology used in web development are front-end and back-end. Although they are extremely distinct from one another, these phrases are incredibly important for web development. To increase the functioning of the website, each side must cooperate and interact with the other as a single entity.

Front-end:

The front-end of a website refers to the area that users interact with directly. It is sometimes referred to as the application’s “client side.” It covers everything that users see and interact with immediately, such as button colors, text styles, photos, graphs, and tables. For front-end development, three languages are used: HTML, CSS, and JavaScript. Front end developers put into practice the structure, design, behavior, and content of everything seen on browser displays when websites, web applications, or mobile apps are opened. The Front End’s primary goals are responsiveness and performance.

Back-end:

Back-end refers to the server-side of the application, whereas front-end refers to the client-side. Both are essential to web development, yet their jobs, duties, and working conditions are very different. Back-end is basically how everything operates, whereas front-end is what users see.

Although back-end and front-end are equally essential to how a website functions, there are some functional distinctions between them. They are like two halves of the same coin. Front-end is everything that a user can see and engage with, whereas back-end is everything that a user cannot see.

Front End Languages:

HTML
Hypertext Markup Language is what HTML stands for. It is used to create web pages’ front ends using a markup language. The acronym HTML stands for Hypertext Markup Language. The link between web pages is defined by hypertext. The written documentation contained within the tag that specifies the structure of web pages is defined using markup language.

CSS
The process of making web pages attractive is made easier with the use of CSS, often known as cascading style sheets. Applying styles to web pages is possible with CSS. More crucially, CSS makes it possible for you to do this without relying on the HTML that each web page is composed of.

JS
Famous scripting language JavaScript is used to work its magic on websites to make them interactive for users. It is used to improve a website’s functionality so that enjoyable games and web-based applications can run on it. Javascript, which may be used in the front-end and the back-end, is essential to becoming a skilled developer.

Depending on the framework, one can perform front-end development using a variety of additional languages, such as Dart for Flutter, JavaScript for React, and Python for Django, among others.

Front End Frameworks and Libraries

Bootstrap

A toolkit for building responsive websites and web applications, Bootstrap is free and open-source. The framework is the most well-liked combination of HTML, CSS, and JavaScript for creating responsive, mobile-first websites.

ReactJS

For creating user interfaces, React is a declarative, effective, and flexible JavaScript library. ReactJS is a free, component-based front-end library that is exclusively in charge of the application’s view layer. Facebook looks after it. React Js also makes front-end development incredibly simple.

Angular JS

The open-source front-end framework AngularJS is mostly used to create single-page web apps (SPAs). It is a framework that is always developing and expanding and offers improved ways to create online apps. The static HTML is converted to dynamic HTML. A free version of the open-source project is available. Data is associated with HTML, and Directives extend HTML attributes.

Flutter

Google is the manager of the open-source Flutter UI development SDK. Dart is the programming language that powers it. It creates efficient and aesthetically pleasing natively compiled applications from a single code base for desktop, web, and mobile (IOS, Android). Flutter’s primary selling point is the ease, expressiveness, and adaptability of flat development thanks to native performance and UI. Flutter delivered Flutter 2 in March 2021, an upgrade that would allow developers to create and release web applications while still in development for desktop applications.

JQuery

JQuery is an open-source JavaScript library that streamlines interactions between JavaScript and the Document Object Model (DOM) of an HTML/CSS document. To elaborate, jQuery makes JavaScript programming for cross-browser use and the traversal and manipulation of HTML documents, as well as DOM animations and Ajax interactions, easier.

SASS

The most dependable, developed, and robust CSS extension language is SASS. It is used to easily add everything from variables, inheritance, and nesting to an existing CSS style sheet on a website.

Semantic-UI, Foundation, Materialize, Backbone.js, Ember.js, and other libraries and frameworks are a few examples.

Back End development

The server-side of a website is called the back-end. It also ensures that everything on the client side of the website functions properly while storing and organizing data. It is the portion of the website that you are unable to view and use. It is the part of the program that users do not directly interact with. Users indirectly access the components and features created by back-end designers through a front-end application. The back-end also includes tasks like writing APIs, building libraries, and interacting with system elements devoid of user interfaces or even systems of scientific programming.

Back End Languages

Major programming languages that are used in back-end are as follows:

The following list of languages is used to build the back-end portion:

PHP

PHP is a scripting language used on servers that was created primarily for creating websites. It is referred to as a server-side scripting language since it’s code is executed on the server.

C++

C++ is a general-purpose programming language that is frequently used nowadays for programming in a competitive environment. In addition, it serves as a back-end language.

Java

One of the most well-liked and often used platforms and computer languages is Java. It can scale up very well. Java components are readily available. You will learn more about the appropriate framework, concepts, and other things as a result within a couple a months.

Python

Python is a programming language that enables quick work and more effective system integration. Additionally, it is a crucial language for the back end.

JavaScript

JavaScript code can be run outside of a browser using the Node.js runtime environment, which is free and cross-platform. You must keep in mind that NodeJS is not a programming language or a framework. The majority of folks are perplexed and realize it’s a computer language or framework. For creating back-end services like APIs for web apps or mobile apps, we frequently employ Node.js. Large corporations like Paypal, Uber, Netflix, Walmart, and others use it during production.

Back End Frameworks

Express JS

Express is a Node.js framework for server-side and backend development. Single-page, multi-page, and hybrid web apps can all be created with it. You can manage a variety of various HTTP requests with its assistance.

Django

Django is a model-template-views-based web framework written in Python. It is utilized to create expansive and intricate web applications. It has the qualities of being quick, secure, and scalable.

Ruby-on-rails

Model-view-controller architecture is used by the server-side framework known as Ruby on Rails. It offers pre-built structures including databases, online services, and web pages.

Laravel

Laravel is a reliable PHP web application framework called Laravel. Reusing the components of many frameworks when building a web application is its best feature.

Spring

This server-side framework, called Spring, supports Java applications’ infrastructure. It supports a variety of frameworks, including Hibernate, Struts, EJB, etc. Additionally, it offers add-ons that make it simple and rapid to create Java apps. C#, Ruby, GO, and other back-end programming and scripting languages are a few examples.

Front-end and Back-end differences

Front-end	Back-end
1. Front-end is the part of website that users see and interact with.	1. Back-end is the part of website that adds functionality to the website.
2. It is the client-side of the application.	2. It is the server-side of the application.
3. HTML,CSS and JavaScript is included in Front-end.	3. Databases, back-end frameworks like django and NodeJS are included in it.
4. It includes UI/UX, responsiveness and the look and feel of the website.	4. It includes data being transferred to the desired location and it is the engine of a website.
5. It happens in the browser.	5. It happens in the server.
6. Front-end stack eg: MEAN(Mongo ExpressJS AngularJS NodeJS) stack.	6. Back-end stack eg: LAMP(Linux Apache MySQL PHP/Python)

Author: Anurag Pokhrel

Best web design tools

Posted on August 15, 2022August 16, 2022 by Rohit Khadgi

What is Web designing and which one to choose?

Web designing, a part of Software Development Life Cycle(SDLC) is one of the starting phases when building a website. There are ample amount of tools that help a designer design websites easily. These tools can be paid, free or both but no single tool can cover all of your requirements. So, in case you are planning on buying a license for that tool, you have to choose one carefully. So, we are going to see what the major tools of web designing are and which one might fit your needs in the next section.

Are you looking for the best web design company in Nepal?

If web designing and development is what you want, genesis is more than ready to provide you with the best team and continuous effort in Nepal. At genesis, our team of hardworking and creative individuals work together as a team and create a desired product.

List of best web design tools:

Figma : Figma is not an old tool in the list but because of its fast design process and easy to use nature, it tops the list.
* Cost : Free to $45
* Availability : Windows, Mac, Linux
* Rating : 4.8/5
Figma is the best collaborative wireframing tool for beginners. Figma contains all the features that Adobe XD and Sketch possess. It offers designers to work simultaneously on a single project and version history is also available in case you want to roll back changes. Other major features of Figma includes: prototyping tools, ease of use, vector-based interface and so on.

Sketch : Sketch aims to create designs easier, quicker and has minimal UI which gives it a cleaner look. Despite it’s simple UI, more features can be added to it using plugins.
* Cost : 9$ per editor, free 30-days trial
* Availability : Mac
* Rating : 4.5/5
Sketch is intuitive and easy but it’s prototyping feature is nowhere near as good as that of Figma. Support only for Mac has definitely limited the number of users Sketch could have. With Sketch you can create pixel-perfect designs because of its amazing zoom feature. So, if you are an absolute begineer and own a mac, Sketch can be a great tool to start with.

Adobe XD : If you have any experience with Adobe products in the past, chances of you loving XD is high. Adobe released XD in 2019 as full fledged vector-based tool for web design.
* Cost : $9.99 per month, free 7-day trial
* Availability : Windows and Mac
* Rating : 4.4/5
XD has support for auto-animation, prototyping, non-static interactions, sharing tools for feedback and so on. XD also works fine with other Adobe products like Photoshop, Illustrator and even Sketch files. Some find Adobe a bit bloaty and it definitely has a steep learning curve. Hence, it might be overwhelming for beginners or even for experienced ones to get a hang of using XD.

Adobe PhotoShop : This is undoubtedly one of the most famous design tools worldwide that has been in the game for decades. If you are looking for a tool that does it all, it is perfect. It was originally made with a purpose of editing images only but it later evolved into a tool with feature like interface design, video editing and many more.
* Cost : 20$ per month, 7-day free trial
* Availability : Mac, Windows
* Rating : 4/5
Despite of it’s popularity, other tools have successfully outshined Photoshop. The learning curve of Photoshop is steep just like other Adobe products because of the large number of tools Photoshop offers. If you want to be updated with the trends of web design, other tools might suit you.

GIMP : If you are a fan of open-source tools, GIMP might suit you. It is a raster graphics editor for image manipulation, editing and transcoding different file formats.
* Cost : Free
* Availability : Windows, Linux, Mac
* Rating : 4/5
GIMP has an interface that looks and feels really old but don’t let that mask it’s powerful underlying features. GIMP can pretty much do everything Photoshop can do. It’s free but it comes with a very steep learning curve which will take a lot of time and effort to make some eye-catching designs with it.

balsamiq : Are you the type of person who just wants to make designs rapidly for user interfaces? If yes, this tool might be best suited for you. It’s wireframing feature can quickly help us share our interfaces to the customers.
* Cost : $9 to $199 per month
* Availability : Windows, Mac
* Rating : 4.1/5
It has a very low learning curve, beginner friendly and intuitive UI. It’s easy drag and drop feature can help you complete your task in no time. Balsamiq cloud is something that can come in handy if you want to save your files in cloud. Overall, balsamiq can be a good starting point for beginners and experienced ones.

Canva : This tool is beginner-friendly and useful for people who just want to start designing as a part-time job or as a hobby. From color correction to creating blur background, canva is extremely handy.
* Cost : Free and paid
* Availability : Web
* Rating : 4.1/5
The best use case for Canva is to make invitation cards, flyers, business cards, social media marketing posts, ads, etc. With the availability of beautiful templates and drag and drop feature desgining can be done within no time. The photo editing feature is really easy and even a person with no knowledge of photo-editing in the past can learn without any help.

Invision studio : Invision studio is one of the best tools for interface design and prototyping that has recently stepped into the battle of top web designing tools.
* Cost : Free and Paid
* Availability : Mac, Windows
* Rating : 4.0/5
Invision Studio is a mixed bag that contains a lot of features similar to other tools. It has almost all the features that Photoshop and Sketch are equipped with. It started as a cloud-based prototype service but now has its own powerful tool known as Studio. Along with Prototyping, Invision can handle animations and transitions really well.

Framer : Last but not least, Framer made our list beacuse it’s easy to get started and offers useful features. It was started as a JavaScript Library and a toolset for protyping but has transformed into one of the most dominant tool available.
* Cost : Free to $23 per month
* Availability : Windows and Mac
* Rating : 4.0/5
Framer is famous for its prototyping, responsive design, templates and cutting-edge animations. Moreover, it’s integration with React is really smooth. It keeps everyone connected and when code changes, so does design. Hence, it really simplifies the transition of design to production-ready code.

Author : Anurag Pokhrel

What is Sass and what are it’s features?

Posted on August 15, 2022November 2, 2022 by Rohit Khadgi

What is Sass?

Whether you are an experienced developer or a newbie who is just getting started in the technology field, you must have heard about Sass. In short, Sass (Syntactically Awesome Style Sheets) is an extension of CSS that adds special features to the regular CSS. Sass is a Preprocessor of CSS. A CSS Preprocessor is a scripting language that allows coders to code in one language and later compile it to CSS.
Before diving into Sass, it is advised to properly soak in the core concepts of CSS because Sass is similar to CSS in a lot of ways.

Why Sass?

We already have CSS to style our websites, so why should we bother using Sass or even spend time learning it? Well, the perks of using Sass is highly rewarding. Some advantages of using Sass are:
-> Neatly organized: Code written in Sass is really easy to read and understand. It comes in handy especially when building large projects.
-> Easy Syntax: If you are good with CSS, learning Sass will be a piece of cake for you. Picking up Sass on top of CSS is easy.
-> Reusable code: Using Sass, a particular piece of code can be reused multiple times. Reusability is always a plus point because it saves time and the frequency of error declines. This cannot be done using CSS.
-> Stability: Sass is a mature language that is frequently updated. So, new features are introduced from time to time and stability ensures that sass won’t have any issues.

How does Sass work?

Sass being a preprocessor language takes input and converts it to output which finally is used as an input in CSS. This extra step is required because browsers cannot read Sass code, they only understand CSS.

Features of Sass:

-> Open source: Sass is open source. It means that Sass is freely available and the source code is completely visible to everyone.

-> Variables: Repetition is something developers hate with every cell on their body. Variables can be used to store data and later these variables can be used whenever necessary.

-> Mixins: Mixins are a collection of variables. The advantage it carries is that we can use mixins instead of remembering all the variable names. For instance, we can make a mixin if most of the pages of a website use the same fonts, colors and borders.

-> Extend/Inheritance: This feature is really useful as it makes code reusable and follows the DRY (Do not repeat yourself) principle. The style of previously made selectors can be inherited by other selectors. Assume, we have a page that was built previously. Now we want to build a new page that looks the same as the previous page, but the color of the footer part is something we wish to change. Instead of rewriting everything, we can inherit the properties using mixin.

-> Functions: Functions are reusable pieces of code that can be used by calling it. In Sass, we can make functions and in the time of need, we can call them. Few built-in functions like percentage(), floor() and round() are also already available in Sass.

-> Nesting: Nesting can get tricky if not used properly. It can decrease a huge chunk of code and make code more readable but has to be executed carefully.

-> Operators: No matter what the language is, arithmetic operations can be useful. Converting pixels value into percentages and doing basic math operations like addition, subtraction, division and multiplication are always convenient.

To summarize, Sass can be considered a tool that gives CSS the power of a programming language.

Where to start learning Sass?

Just like other languages, the best place to start learning Sass is the official documentation. The link to its official website is:
https://sass-lang.com/documentation/

Sass Alternatives:

There are some alternatives of Sass that you can explore :

– Stylus
– styled-components
– PostCSS
– Bootstrap
– Less
– node-sass
– Animate.css
– Autoprefixer

Differences between Sass and CSS:

Sass	CSS
1. Sass is a preprocessor of CSS	1. CSS describes how the HTML element will appear.
2. Sass is based on SassScript.	2. CSS works after unification with HTML.
3. It uses indentation for a new line instead of a semicolon.	3. It uses semicolons in the declaration block.
4. It allows variables that can be reused.	4. There is no concept of variable reusability in CSS.
5. Nesting of CSS selectors in a certain hierarchy is present in Sass.	5. Nesting of CSS selectors often leads to conflicts.
6. Sass was made to add features to CSS.	6. CSS was made to style HTML elements.

Author: Anurag Pokhrel

How to convert PSD to HTML ?

Posted on July 28, 2022August 16, 2022 by Rohit Khadgi

What is PSD to HTML?

PSD stands for Photoshop document and the process of converting this file to an HTML document is known as PSD to HTML conversion. In Layman’s terms, graphic designers will use a tool like photoshop to create their designs and when the layout of the website is finalized, the development team will create the desired layout using HTML and CSS.

Why PSD to HTML?

PSD being a photoshop document may not be compatible with different browsers whereas HTML works perfectly fine on all browsers. PSD documents that are on the web cannot be recognized by search engines because the search engine crawler cannot identify them. This leads to our inability to do Search Engine Optimization(SEO). An in-depth description of the advantage and disadvantages of PSD to HTML will be discussed later.

Advantages:

CSS makes it easier to create the image assets such as creating shadows, gradients, and CSS and HTML work together.
PSD to HTML makes the site more responsive i.e website will be displayed properly on all devices regardless of their resolution.
Pixel-perfect designs can be made with HTML and CSS.
Customizing will get easier and the websites will load faster.
Code can be optimized using Search engine Optimization techniques.
As google indexes, the website made up of HTML, the reach of websites will grow.
HTML is compliant with W3C standards.

Disadvantages:

Too much work. The work gets doubled because of the design-to-code process.
Most front-end developers can work on HTML and CSS, so photoshop becomes unnecessary.

How much time does it take to convert PSD to HTML?

There are a few factors to consider before predicting the time required to convert PSD to HTML.

Website type: Depending upon the type of website, conversion of PSD to HTML can vary. For instance, normal business sites are less time-consuming than full-fledged eCommerce sites.
Quantity of web pages: Websites come in all shapes and sizes. The higher the number of web pages, the more time is required to convert these pages into HTML documents and vice versa.
Complexity: In addition to a number of pages, PSD documents can range in different levels of complexity. Hence, PSD documents with high complexity result in more time consumption.

What are the ways to convert PSD to HTML?

Manual coding
With the help of a PSD conversion company
Automated tools

Steps To Follow:

1. Analyze the Photoshop documents: Before you start the process, make sure to analyze the PSD document and finalize the design with the customers. Otherwise, you will have to redo the conversion every time a minor change is required in the layout.
2. Identify different components of the webpage :

Logo: The logo in general lives in the header of the website.
Header: As the name suggests, it is the top section of a website. In general, it contains a logo, tagline, animations, navigation menu, and sliders.
Body: The body section contains the content of the website. Mostly it is in textual format.

Hence, we need to make sure that all these components are well-placed in the right positions without hindering the look and feel of the website.

3. Slicing: Slicing refers to the breaking of a single PSD file into multiple small images. This helps the website load much faster. Slicing in photoshop can be done using:

Normal
Slices from Guides
Fixed Size
Fixed Aspect Ratio

After Slicing, save the file as “Save for the web” in photoshop.

4. Create the required directories: To organize the files, create directories.

Create a root folder or the main folder with the website name.
Create a folder named images under the main folder. Here, images can be stored for the website.
Create a folder named CSS. All the CSS files will be placed here.

5. Create the HTML code:
An HTML page can be built with the help of Adobe Dreamweaver or with open-source tools such as Amaya. Create a file using these tools and name it index.html and save this file to the main folder. Afterward, create a CSS file in an editor and style the webpage using font size, font background, font color, the position of images, margins, fieldset, and so on. Finally, link the CSS file to the HTML file.

6. Create JavaScript code for user interaction:
According to your need, make a JS file and link it to the HTML file.

7. Make the website Responsive:
Tweak the CSS file in order to make it more responsive. The website must render correctly on all devices irrespective of its screen resolution. To check the responsiveness of the website, you can use online responsive checker tools. Moreover, you can also use the inspect element option on your web browser. For that you can:

Open the website in your web browser.
Right-click on the screen and click the “Inspect element” or “Inspect” option. A small section will appear on the screen.
In the top right corner of the sub-section that appeared earlier, you can see three dots. Click on the square icons residing on the left of those three dots. Hovering over that icon will display Responsive Design Mode.
After clicking, you can choose a different screen resolution or display for different devices in a drop-down menu.

Author : Anurag Pokhrel

What is Cloud Computing? Some benefits of Cloud Computing

Posted on July 24, 2020August 3, 2022 by Rohit Khadgi

If you want to learn about basic cloud computing and some benefits of cloud computing. Then this blog post will help you to know about some basic cloud computing and its benefits.

What is Cloud Computing?
Cloud is generally used to describe servers, about the large cloud, data center which is available to many users over the internet. Cloud talk about multiple locations from central servers.
It is simply known as the delivery of cloud computing services to client or person whoever needs it including services like:
1. Servers
2. Networking
3. Software
4. Intelligence
5. Databases

Cloud computing gives flexible resources like people can increase resources whenever they want and decrease resources is known as Scalability.
Clouds are available to a single company or organization which is enterprise clouds or be available to more companies or organizations which is known as the public cloud.

Some benefits of cloud computing

1. Good Performance
Cloud Computing services are run globally which are daily upgraded to the latest version of fast and efficient computing systems.

2. Reliability
Cloud computing gives a good service so cloud computing makes a data backup, data recovery and makes business easier in less expensive.

3. Fast/Speed
Main services of cloud computing services are provided to fast and more flexibility to the users so that users can easily access it.

4. Scalability
Clients can easily scale up and scale down their operation and memory/storage needs quickly change as their needs.

5. Security
About cloud one thing is good that is full-time monitor security and make the backup for each and every change of the client, which is significantly more good and more efficient than a house system.

Author : Rohit Khadgi – Genesis Web Technology

What is WordPress? Some Benefits of using the WordPress Platform

Posted on July 15, 2020August 18, 2022 by Rohit Khadgi

If you are looking for developing your website or blog posts in WordPress. You must know what actually is WordPress. If you are a beginner then this blog post will help you to know about WordPress

What is WordPress?

Table of Contents

What is WordPress?
What is Content Management System?
What are Blog posts?
What are posts in WordPress?
What are Pages in WordPress?
What are the Benefits of using the WordPress Platform?

WordPress is a content management system used to develop and maintain websites which is written in PHP and paired with an MYSQL database.

WordPress provides a web-based user interface for publishing, updating, and designing websites.

If WordPress built-in capabilities or features are not sufficient for your needs, you can install different plug-ins that provide extra features.

If you don’t want to develop your website using WordPress built-in theme then you can install or activate different theme that looks better and give extra features.

What is Content Management System?

A content management system (CMS) is an application or software which is used to manage, creation and modification of digital web content.

Content management systems are typically used for enterprise content management (ECM) and web content management (WCM).

What is a blog post?

The blog post is an entry point where you can write your own article which can be any topic.

It can include content like a form of text, photos, infographics, or videos.

What are posts in WordPress?

Posts are blog content of the website which is listed in reverse order (newest content on top).

Posts contain one title, one content or post descriptions, one featured photo and you can select a category of post.

You can add and edit your posts from the ‘Posts’ menu in your dashboard. Here is how Add New Post screen looks.

What are Pages in WordPress?

Pages are static content page types such as your about us page, privacy policy, contact page, etc.

You can add and edit pages in WordPress from the ‘Pages’ menu in your dashboard. Here is how to Add New Page screen looks like:

What are the Benefits of using the WordPress Platform?

User-friendly Even for Beginners

A WordPress site can be installed and set up and run in some minutes.

WordPress can be installed and freely downloaded through WordPress through WordPress.org.

Even beginners can set up WordPress and make pages and create a new post using WordPress CMS.

WordPress themes offer multiple options

WordPress themes give users to select for the fine appearance and function of the new site. Themes can be previewed live and installed at any time to change the look and layout of your WordPress site.

Plugins give you more Functionality

WordPress provides all the elements needed to create a basic website, but many other users want more specialized functions related to a website specific need. But users can install plugins from the plugins menu.

WordPress Sites Rank High

Searchability is key to ranking high on Google and other search engines. WordPress includes a variety of tools and plugins for optimizing content for SEO (search engine optimization).

WordPress Sites are Mobile Responsive

Your websites need to look good and attractive on any device. WordPress offers a variety of responsive theme designs, and users can also make the static site responsive with plugins and adjustments to theme files.