8 HTML, CSS, JavaScript and MongoDB Tips

Languages-cloudwords

1. A million dollar css mistake

Sometimes when you click or highlight a part of text, and it will blink or change to a different color. The reason why it happens is there are multiple style definition (color for active or visited status) for the same part of content, it’s usually created by mistake like the following example.

It intends to define style for keywords_link hover, active visited status, but if it omitted the scope for later two status and they work for globally.

(wrong)

.keywords_link:hover, :active, :visited {

    text-decoration: none;

color: #73c8bd;

}

(correct)

.keywords_link:hover, .keywords_link:active, .keywords_link:visited {

    text-decoration: none;

    color: #73c8bd;

}

2. Enter mongoDB shell and debug one (statement) by one

Cd /usr/local/var/mongodb

/usr/local/bin/mongo

Diff between MongoDB vs Mongoose

http://stackoverflow.com/questions/28712248/difference-between-mongodb-and-mongoose

Location of mongoDB database on mac

http://stackoverflow.com/questions/13827915/location-of-the-mongodb-database-on-mac

https://docs.mongodb.com/manual/reference/mongo-shell/

3. Scroll to related posts area to trigger fetching related posts

http://imakewebthings.com/waypoints/

https://github.com/imakewebthings/waypoints

http://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery

Trigger once for waypoint (load related posts)

http://imakewebthings.com/waypoints/api/destroy/

http://stackoverflow.com/questions/28113152/not-repeating-the-function-once-waypoint-reached

4. Nodejs libs

https://github.com/sindresorhus/awesome-nodejs

https://blog.nodejitsu.com/6-must-have-nodejs-modules/

5. center a div

margin:0 auto;

http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css

6. How to implement a load spinner

https://www.w3schools.com/howto/howto_css_loader.asp

http://stackoverflow.com/questions/19445639/how-to-implement-a-jquery-spinner-image-in-an-ajax-request

http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery

http://smallenvelop.com/display-loading-icon-page-loads-completely/

https://loading.io

7.  Select random document from MongoDB

Sample operation

https://docs.mongodb.com/manual/reference/operator/aggregation/sample/

skip random number (it might have performance issue)

http://stackoverflow.com/questions/2824157/random-record-from-mongodb

http://stackoverflow.com/questions/39277670/how-to-find-random-record-in-mongoose

8. Use hreflang tag to support multiple languages or regions

https://yoast.com/hreflang-ultimate-guide/

https://support.google.com/webmasters/answer/6059209

https://support.google.com/webmasters/answer/189077

https://support.google.com/webmasters/answer/189077?hl=en

Donate $5 to me for a coffee with PayPal and read more professional and interesting technical blog articles. Feel free to visit my web app, WhizWallet, to apply for credit, store or gift cards, DealsPlus to browse daily deals and store coupons to save money.
Follow me @Yaoli0615 at Twitter to get latest tech updates.

Resource:

A Smarter Way to Learn JavaScript. The new tech-assisted approach that requires half the effort

Secrets of the JavaScript Ninja

Node.js Design Patterns

Web Development with MongoDB and NodeJS

Node.js the Right Way: Practical, Server-Side JavaScript That Scales

Web Development with Node and Express: Leveraging the JavaScript Stack

Learn NodeJS in 1 Day: Complete Node JS Guide with Examples

Learning Node: Moving to the Server-Side

Getting MEAN with Mongo, Express, Angular, and Node

Advertisements

About liyao13

Yao Li is a web and iOS developer, blogger and he has a passion for technology and business. In his blogs, he shares code snippets, tutorials, resources and notes to help people develop their skills. Donate $5 to him for a coffee with PayPal at About Me page and read more professional and interesting technical blog articles. Follow him @Yaoli0615 at Twitter to get latest tech updates.
This entry was posted in CS Research&Application, Uncategorized and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s