Skip to content

Instantly share code, notes, and snippets.

@Samjin
Samjin / Bugs and Fixes
Last active July 25, 2017 07:48
Experienced common CSS IE8 Bugs and Fix.
Inline-block
1. For inline-block for ie8 to work, <!DOCTYPE html> has to be declared, as well as <meta http-equiv="X-UA-Compatible" content="IE=edge">for correct rendering mode. Has to be first loading element in head.
2. inline-block may cause width problem. Use max-width: 100% or inherit to fix.
3. Try use *display: inline; *zoom:1; or float: left/right(works same as zoom), because ie8 treat inline-block as block element in cerntain condition. This supports ie6+
4. inline-block may stack or overlap on each other even they are in same line, to fix it use margin-right: 1px if possible, otherwise, use #3 tip above
5. Align to bottom: Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent/block element is greater than that of the inline element.*
6. Using 'vertical-align: baseline' would stack inline-block element instead of align them.
Float and img width
.float > img, If img has max-width: 100% in IE8, it will be 0 width. image won't be seen.
1. Height and max-height at 100%;
2. HTML may need 100% to expand all the way to viewport height(browser height), because viewport is the hidden container of <html>;
IF a child want to use 100% of container's height, then you may need height: 1px to container if the container
doesn't have height property but a min-height. http://jsfiddle.net/aUDnn/1/?utm_source=website&utm_medium=embed&utm_campaign=aUDnn
3. > *:target {} // this might be a good way for animation.
4. What :nth-child(an+b) does is it divides the container’s children into a elements (the last group taking the remainder),
and then selects the bth element of each group. So, li:nth-child(3n+1) will divide the list items into 3 groups, put the
@Samjin
Samjin / Scroll() event optimization
Last active July 5, 2016 06:34
Scroll() event optimization
var throttle = (function () {
return function (fn, delay) {
delay || (delay = 100);
var last = +new Date;
return function () {
var now = +new Date;
if (now - last > delay) {
fn.apply(this, arguments);
last = now;
}
@Samjin
Samjin / Constructor and prototypeFactory
Last active July 10, 2023 04:51
Constructor and prototypeFactory
class Car {
constructor(options) {
this.doors = options.doors || 4;
this.state = options.state || "brand new";
this.color = options.color || "silver";
}
}
class Truck {
constructor(options) {
@Samjin
Samjin / Facade example
Created May 3, 2016 18:01
Facade simple exmaple
var module = (function() {
var _private = {
i:5,
get : function() {
console.log( "current value:" + this.i);
},
set : function( val ) {
this.i = val;
},
@Samjin
Samjin / Rem vs Em
Created July 31, 2016 01:11
Rem vs Em
http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
rem and em units are computed into pixel values by the browser, based on font sizes in your design.
em units are based on the font size of the element they’re used on.
rem units are based on the font size of the html element.
em units can be influenced by font size inheritance from any parent element
rem units can be influenced by font size inheritance from browser font settings.
Use em units for sizing that should scale depending on the font size of an element other than the root.
Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.
@Samjin
Samjin / mysql import data
Created March 21, 2017 23:18
mysql import data
mysql -u root -p epg < epg.sql
@Samjin
Samjin / multiple_ssh_setting.md
Created April 6, 2017 07:22 — forked from jexchan/multiple_ssh_setting.md
Multiple SSH keys for different github accounts

Multiple SSH Keys settings for different github account

create different public key

create different ssh key according the article Mac Set-Up Git

$ ssh-keygen -t rsa -C "[email protected]"
@Samjin
Samjin / UV_THREADPOOL_SIZE.md
Created September 2, 2021 22:11 — forked from rjoydip-zz/UV_THREADPOOL_SIZE.md
How you can set `UV_THREADPOOL_SIZE` value?

When you need to set value to "UV_THREADPOOL_SIZE"?

  • Libuv has a default thread pool size of 4, and uses a queue to manage access to the thread pool - the upshot is that if you have 5 long-running DB queries all going at the same time, one of them (and any other asynchronous action that relies on the thread pool) will be waiting for those queries to finish before they even get started.

  • Note, however, that tuning UV_THREADPOOL_SIZE may make more sense for a standalone application like a CLI written in Node.js. If you are standing up a bunch of Node.js processes using the cluster module then I would be surprised if tuning UV_THREADPOOL_SIZE was particularly beneficial for you. But if your application resembles the web tooling benchmarks then tuning UV_THREADPOOL_SIZE may help with performance.

@Samjin
Samjin / headers-timeout-keep-alive.js
Created December 15, 2021 17:28 — forked from shuhei/headers-timeout-keep-alive.js
A test case for server.headersTimeout + keep alive (fails on Node v10.15.2 and newer)
const http = require("http");
const net = require("net");
const server = http.createServer((req, res) => {
req.resume();
res.end("hello");
});
server.keepAliveTimeout = 6 * 1000;
server.headersTimeout = 4 * 1000;