CODE; Use.386 if you need to work with variables that take 8 bytes and more. Allows ES,FS etc. func PROC FAR; Remember that all of your pointers will take place of 4 bytes. Public func PUSH BP; Save BP's value MOV BP, SP.your function here.;your returned value should be in DX:AX (if you work with c etc.) POP BP RET func ENDP END.
What I got
I got any reviews and suggestion from peers and from friends. Some of them were
- Homepage font is awesome
- The app is nice but loading is slow.
- Review of my web app Snipcode. Tagged with snipcode. DEV Community is a community of 554,041 amazing developers. We're a place where coders share, stay up-to-date and grow their careers.
- Find the Bootstrap rating that best fits your project. The best free rating snippets available. Design elements using Bootstrap, javascript, css, and html.
- A web-app built during the internship in Hasura using Node.js.It has features like saving in private mode and full-text search.
After all these reviews now is the time for improvement. The first thing I must consider is the loading time of my web app which was very high due to the use of .gif file in background hence I compressed it manually though I was not satisfied with the loading time. So introduced a new package in my project compression
One more idea came to my mind. What if the background will be chosen randomly?
Random background
I introduced 4 more gifs in my static/img folder and wrote a small script to chose them randomly.
And voila everytime the user reloads he will get a new background(most of the time).
| Homepage 1 | Homepage 2 | Homepage 3 |
|---|
Search optimization
One more tweak I would like to do in future is optimizing the search by including a separate column for tsvector and indexing that using GIN. Going through the documentation of PostgreSQL I ran into these three pages for optimizing full-text search and info about the functions.
Here is the index of all the post regarding this series of snipcode developemnt
Part I: App Idea
Part II: App prototype
Part III: Local Development
Part IV: G for Git
Part V: Data Modeling
Part VI: Data & Auth APIs
Part VII: Basic Functionalities
Part VIII: App Screen 1
Part IX: App Screen 2
Part X: App Screen 3
Part XI: User Reviews
Part X: Final Submission
Learn how to create a fast and awesome responsive website that will work on all devices, PC, laptop, tablet, and phone.
Create a Website with a CSS Framework
DID YOU KNOW?
There is a Crash Course for building the above web site.
A 'Layout Draft'
It is always wise to draw a layout draft of the page design before building a website.
Having a 'Layout Draft' will make it a lot easier to create a web site:
The Band
Howd they do that? embed facebook messenger. Description of the band
Description of the band
Description of the band
Article
Footer
Doctype, Meta Tags, and CSS
The doctype should define the page as an HTML5 document:
A meta tag should define the character set to be UTF-8:
A viewport meta tag should make the web site work on all devices and screen resolutions:
W3.CSS should take care of all our styling needs and all device and browser differences:
To learn more about styling with W3.CSS, please visit our W3.CSS Tutorial.
Our first empty web page will look much like this:
<html>
<meta charset='UTF-8'>
<meta name='viewport'>
<link href='https://www.w3schools.com/w3css/3/w3.css'>
<body>
<!-- Content will go here -->
</body>
</html>
Note: If you want to create a website from scratch, without the help of a CSS framework, read our How To Make a Website Tutorial.
Creating Page Content
Inside the <body> element of our web site we will use our 'Layout Picture' and create:
- A navigation bar
- A slide show
- A header
- Some sections and articles
- A footer
Semantic Elements
HTML5 introduced several new semantic elements. Semantic elements are important to use because they define the structure of web pages and helps screen readers and search engines to read the page correctly.
These are some of the most common semantic HTML elements:
The <section> element can be used to define a part of a website with related content.
The <article> element can be used to define an individual piece of content.
The <header> element can be used to define a header (in a document, a section, or an article).
The <footer> element can be used to define a footer (in a document, a section, or an article).
The <nav> element can be used to define a container of navigation links.
In this tutorial we will use semantic elements.
However, it is up to you if you want to use <div> elements instead.
The Navigation Bar
On our 'Layout Draft' we have a 'Navigation bar'.
<nav>
<a href='#home'>Home</a>
<a href='#band'>Band</a>
<a href='#tour'>Tour</a>
<a href='#contact'>Contact</a>
</nav>
We can use a <nav> or <div> element as a container for the navigation links.
The w3-bar class is a container for navigation links.
The w3-black class defines the color of the navigation bar.
The w3-bar-item and w3-button class styles the navigation links inside the bar.
Slide Show
On the 'Layout Draft' we have a 'Slide show'.
For the slide show we can use a <section> or <div> element as a picture container:
<section>
<img src='img_la.jpg'>
<img src='img_ny.jpg'>
<img src='img_chicago.jpg'>
</section>
We need to add a little JavaScript to change the images every 3 seconds:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName('mySlides');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = 'block';
setTimeout(carousel, 3000);
}
Sections and Articles
Game 158: july 7, 2017the initials game. Looking at the 'Layout Draft' we can see that the next step is to create articles.
First we will create a <section> or <div> element containing band information:
<h2>THE BAND</h2>
<p><i>We love music</i></p>
</section>
The w3-container class takes care of standard padding.
The w3-center class centers the content.
The w3-wide class provides a wider heading.
The w3-opacity class provides text transparency.
The max-width style sets a maximum with of the band description section. Mega man project x.
Then we will add a paragraph describing the band:
<p>
We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
The w3-justify class justifies the text's right and left margins.
Then create a <section> or <div> with an <article> or <div> about each band-member:
<article>
<p>John</p>
<img src='img_bandmember.jpg' alt='Random Name'>
</article>
<article>
<p>Paul</p>
<img src='img_bandmember.jpg' alt='Random Name'>
</article>
<article>
<p>Ringo</p>
<img src='img_bandmember.jpg' alt='Random Name'>
</article>
</section>
Snapcode List
Footer
Finally we will use a <footer> or <div> to create a footer:
<footer>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<p>
Powered by <a href='https://www.w3schools.com/w3css/default.asp' target='_blank'>w3.css</a>
</p>
</footer>
The fa fa classes are Font Awesome Icon classes.
Snapcode 2019
To use these classes you must link to a Font Awesome library:
To learn more about using icons, please visit our Icons Tutorial.
Snapcode Link