Frontend - UX, UI - HTML, CSS, JavaScript, TypeScript

Think of tools like Pencil, Balsamiq for ideas into shapes, Adobe XD for mockups, Adobe XD, Adobe Photoshop for brigings the thoughts into vision. We have various frameworks introduced and extensively used in the industry to fulfill the business needs and to make ease of job (in terms of designing and development). This page covers some of those stuff related to User experience and User interface related technologies in the web app deisgn and development.

Popular posts from this blog

Simple Pie Graphs Using <canvas> element in HTML 5

Now a days graphs are playing a major role to visualise the statistics in the web applications. With the help of these graphs, user can see all the information in detail at a glance. One popular kind among those graphs is Pie Graphs. So i continued my work for plotting Pie diagram with the help of simple Javascript & HTML5 <canvas> element. The canvas element properties such as 'arc()', 'beginPath()', 'lineTo()' & 'fill()' are used in this example. Let us go through each step for better understanding. Define the canvas element in your document body as shown below. You can apply styles either by using "style" tag (inline CSS) or defined class in separate .css file. <canvas id="canvas" width="800" height="500"></canvas> This text is displayed if your browser does not support HTML5 Canvas. Define your values in the form of an array as shown below. To display different filled colors for ...
Read more

Stored Procedures in MySQL

Stored procedure is a segment of declarative SQL statements stored inside the MySQL Server. To define it other way, we can save (one or set) queries within stored procedure for future use. For example, we have a SELECT query that returns rows based on the condition SELECT * FROM customers WHERE city = ‘Bangalore’ ORDER BY firstName; The first time you invoke a stored procedure, MySQL looks up for the name in the database catalog, compiles the stored procedure’s code, place it in a memory area known as a cache, and execute the stored procedure. If you invoke the same stored procedure in the same session again, MySQL just executes the stored procedure from the cache without having to recompile it. A stored procedure can have parameters so you can pass values to it and get the result back. Advantages Reduce network traffic Centralize business logic More secure Disadvantages Resource Usages Troubleshooting Maintenance Creating Stored Procedures If we ...
Read more

Simple Line Graphs Using <canvas> element in HTML 5

After i worked with the Bar graph, i feel it is very easy to implement the line graphs using <canvas> element in HTML5. You can find many similarities in the javascript while working on this. New functions moveTo() , lineTo() , stroke() , lineWidth() has been used for line graphs. Define the canvas element in your document body as shown below with the ID attribute and mention the height & width attributes. You can apply styles either by using "style" tag (inline CSS) or defined class in separate .css file. <canvas id="myCanvas" width="800" height="500"></canvas> <script language="javascript" type="text/javascript"> var interval = 30; var linewidth = 1; var color = "blue"; var graphholder = "myCanvas"; var displayLabel = true; var labelfontstyle = "Arial"; var labelfontsize = "12px"; var labelfontclr = "#000000"; var ...
Read more