Category: Web Development
-
Designing REST APIs
Response: Returning errors When the API has to communicate a full error or a partial error back to the client, it is better to have a typed structure rather than a plain string. This allows the clients to render an appropriate UI or design their workflow depending on the type of error. Instead of an…
-
How to use Storybooks with React?
There are plenty of tools in react ecosystem which makes the development faster and easier one such tool is the storybook. Let us see how a storybook is used to accelerate the react application development What is a storybook ? Storybook is basically a development environment and playground for UI components that create the components…
-
Deploy a React app to Firebase
In this blog, we are going to discuss how to deploy react js applications for free in a few minutes in firebase. before that let’s discuss what is firebase. What is Firebase ? Firebase is a backend as a service(Baas) built on Google’s infrastructure.it is categorized as a NoSQL database that stores data in JSON-like…
-
Writing Effective Unit Tests with React and Enzyme
UNIT TESTING is a type of software testing where individual units or components of the software are tested. with this method of testing, both testers and developers can isolate each module, identity, and fix the system defects at the very early stage of the software development lifecycle(SDLC). Unit test is solely performed by developers. Why…
-
Make your App Multi-lingual with React i18n Internationalization
Internationalization (i18n) is the process of building applications with local languages and cultural settings. An internationalized product solves the need of the local market with a more appropriate language approach and settings which in terms will produce greater user satisfaction and market success. i18n is usually misrepresented as Localization (L10n) and typically even Translation. i18n is development centered so within the case of software package, one…
-
Using tableLayout CSS property with TypeScript
Using table-layout property with React and TypeScript was giving a type error like below: ERROR in /var/jenkins/workspace/dev/resources/packages/sites/table.tsx [tsl] ERROR in /var/jenkins/workspace/dev/resources/packages/sites/table.tsx(79,25) TS2322: Type ‘{ padding: number; width: string; margin: string; tableLayout: string; }’ is not assignable to type ‘CSSProperties’. Types of property ‘tableLayout’ are incompatible. Type ‘string’ is not assignable to type ‘TableLayout’. This was…
-
CSS Flip Animation for Font Awesome Icons
This flip animation will be a perfect use-case for enable/disable UI actions. We’ll be using rotateY transform function to achieve this flip animation. Here is a simple HTML page with a few font awesome icons in both enabled and disabled states (we’ll be adding CSS for these states later) and jquery included for click actions.…
-
React – Render String with HTML tags as HTML
There are often times when you have a string with some HTML tags such as strong that you want to render as HTML on the DOM. Most solutions online recommend using dangerouslySetInnerHTML but that is dangerous as the name suggests. The proper way to render HTML from string is to use FormattedMessage from the formatjs…
-
jQuery DataTable: Sorting dynamic data
jQuery DataTable is a powerful library to super charge your HTML tables. By default DataTable can sort your data based on the content of the cells. But if you are loading your table data dynamically and want to apply a custom sorting based on the DOM data, you can use DataTable’s custom sorting code: data-sort…
-
First look at HTML
HTML is used to feed the content on the web page or web application. HTML = content. HTML is not used for styling the page if you want to style then you need to use CSS. HTML ≠ style. CSS = style. HTML Document Structure All HTML document must start with <html> and end with…