Tips and Tricks.
All #accessibility #cloud9 #codepen #concept #css #css-basic #css-flex #css-grid #data-url #html #html-form #inspirations #ios #javascript #lang-zh #layout #link #mobile #mobile-web #mysql #php #php-basic #podcast #progress-enhancement #python #resilient #resources #swift #ui-design #user-media #video #wordpress
2018-09-14
Traditionally, we divide our layout into rows. Inside each row, there are 12 columns.
2018-02-23
2018-01-06
The difference happens when there are not enough content to fill up all columns.
When the screen is wide enough to fill in more "minmax(200px, 1fr)" columns, auto-fill will fill extra empty 200px width columns.
When it is auto-fit, extra column works only where there is content there. So there won’t be any extra empty columns in auto-fit.
2018-01-04
In this example, we create the block-grid effect by using CSS grid grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).
2017-05-10
I created an example that demonstrates block-grid by using Flexbox.
2017-05-04
The code that disables auto-complete, auto-correct, auto-capitalize and spell check.
<input autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false">
2017-05-01
2017-04-30
A quick demo:
2017-04-29
2017-04-28
2017-04-27
In this short video, I showed the steps to setup a wordpress development environment in Cloud9. I also add some basic CSS styles on the theme.
2017-04-26
http://blog.createjs.com/stagegl-faster-better-stronger-webgl-update-easeljs/
StageGL is a drop-in replacement for the CreateJS Stage.
2017-04-25
2017-04-24
https://developer.apple.com/reference/livephotoskitjs/
<div
data-live-photo
data-shows-native-controls
data-photo-src="https://cdn.makzan.net/IMG_7677.JPG"
data-video-src="https://cdn.makzan.net/IMG_7677.mov"
style="width:320px;height:320px;"
>
<img src='https://cdn.makzan.net/IMG_7677.JPG' alt='Sample Live Photo in Macao Science Center.'>
</div>
2017-04-21
2017-04-21
I created a web page to test if your mobile browser overrides the user-scalable meta configuration.
2017-04-20
2017-04-19
*{
box-sizing: border-box;
}
2017-04-18
ModernWeb.Design is an online mentorship community to learn web design. You can find tutorials, courses, and test projects (exercises) here.
2016-09-25
.hyphenate {
 overflow-wrap: break-word;
 word-wrap: break-word;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
}