Skip to content

Instantly share code, notes, and snippets.

View charisTheo's full-sized avatar
⚛️
Reacting

Harry Theo charisTheo

⚛️
Reacting
54 followers · 43 following
View GitHub Profile
@charisTheo
charisTheo / fallbackImages.html
Last active November 3, 2019 19:36
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="img-2560-land.webp" type="image/webp" media="(min-width: 1440px)" />
<source srcset="img-2560-land.jpg" type="image/jpg" media="(min-width: 1440px)" />
<source srcset="img-1920-land.webp, img-3888-land.webp 1.5x" type="image/webp" media="(min-width: 1024px)" />
<source srcset="img-1920-land.jpg, img-3888-land.jpg 1.5x" type="image/jpg" media="(min-width: 1024px)" />
<source srcset="img-768.webp, img-768-1.5x.webp 1.5x" type="image/webp" media="(min-width: 768px)" />
<source srcset="img-768.jpg, img-768-1.5x.jpg 1.5x" type="image/jpg" media="(min-width: 768px)" />
@charisTheo
charisTheo / Useful-React-Native-libraries.txt
Created September 29, 2018 16:42
React-redux
Redux
redux-saga(need to learn)- useful library to dispatch actions from functions
React-native redux persist - useful to store data within local storage, help us to use locally stored data when there is no inetrenet on mobile.
React-native drawer
Native-base (for ready to use design/ui components)
React-native-scrollable tab view
React-native-dismiss-keyboard(iOS)
React-native Push notification
react-native youtube(buggy on android)
@charisTheo
charisTheo / transition.css
Created October 28, 2018 10:43
Browser support for transition CSS property
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-ms-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;
@charisTheo
charisTheo / transform.css
Created October 28, 2018 10:45
Browser support for transform CSS property
-webkit-transform: /* add value */ ;
-moz-transform: /* add value */ ;
-ms-transform: /* add value */ ;
-o-transform: /* add value */ ;
transform: /* add value */ ;
@charisTheo
charisTheo / transform-origin.css
Created October 28, 2018 10:47
Browser support for transform-origin CSS property
-webkit-transform-origin: /* add value */;
-moz-transform-origin: /* add value */;
-ms-transform-origin: /* add value */;
-o-transform-origin: /* add value */;
transform-origin: /* add value */;
@charisTheo
charisTheo / animation.css
Created October 28, 2018 10:48
Browser support for animation CSS property
-webkit-animation: /* add value */;
-moz-animation: /* add value */;
-ms-animation: /* add value */;
-o-animation: /* add value */;
animation: /* add value */;
@charisTheo
charisTheo / keyframes.css
Created October 28, 2018 10:52
Browser support for keyframes CSS animations
@-webkit-keyframes /* animation name */ {
from { /* add properties */ }
to { /* add properties */ }
}
@-moz-keyframes /* animation name */ {
from { /* add properties */ }
to { /* add properties */ }
}
@-ms-keyframes /* animation name */ {
from { /* add properties */ }
@charisTheo
charisTheo / flexbox-display.css
Created October 28, 2018 10:54
Browser support for flexbox display CSS property
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
@charisTheo
charisTheo / flex.css
Created October 28, 2018 10:55
Browser support for flex CSS property
/* $values = Combination of flex-grow, flex-shrink, and flex-basis */
-webkit-box-flex: $values;
-webkit-flex: $values;
-moz-box-flex: $values;
-ms-flex: $values;
flex: $values;
@charisTheo
charisTheo / flex-order.css
Created October 28, 2018 10:56
Browser support for flex-order CSS property
-webkit-order: /* add value */;
-moz-order: /* add value */;
-ms-flex-order: /* add value */;
order: /* add value */;