Skip to content

Instantly share code, notes, and snippets.

View Pustelto's full-sized avatar

Tomas Pustelnik Pustelto

35 followers · 2 following
View GitHub Profile
@Pustelto
Pustelto / class-toggler.js
Created October 13, 2016 08:47
Very simple class toggler
// =============
// CLASS TOGGLER
// =============
(function(){
const togglers = document.querySelectorAll('.js-toggler');
togglers.forEach(elm => {
elm.addEventListener('click', toggleClass);
});
@Pustelto
Pustelto / svg-artdirection.js
Last active October 13, 2016 08:50
Art direction for responsive SVG (usefull for responsive logos). Taken from www.arborvitae.skauting.cz, Modernizer media queries is necessary.
// SVG art-direction
const logoSvg = document.getElementById( 'av-logo' );
function artDirectSvg() {
if( Modernizr.mq( '(max-width: 300px)' ) ) {
logoSvg.setAttribute( 'viewBox', '0 0 79 85' );
}
if( Modernizr.mq( '(min-width: 300px)' ) && Modernizr.mq( '(max-width: 560px)' ) ) {
logoSvg.setAttribute( 'viewBox', '97 -230 403 310' );
}
if( Modernizr.mq( '(min-width: 561px)' ) ) {
@Pustelto
Pustelto / _grid.scss
Last active November 25, 2016 08:58
custom configurable flexbox grid works for IE10+
$breakpoints: (
xs: 320px, //small
sm: 768px, //tablet
md: 1024px, //laptop
lg: 1400px //desktop
);
// Basic layout settings
$layout: (
width: 1170px,
@Pustelto
Pustelto / _grid-legacy.scss
Created November 25, 2016 08:58
Legacy sass grid module (working IE8+) based on floats (I have to swap my flexbox grid with floats due to IE8 support thats why I just quickly rewrite it).
$breakpoints: (
xs: 320px, //small
sm: 768px, //tablet
md: 1024px, //laptop
lg: 1400px //desktop
);
// Basic layout settings
$layout: (
width: 1170px,
@Pustelto
Pustelto / RN improvement suggestions.md
Last active November 9, 2017 07:43
Few suggestions for writing more readable and performant code in React native

RN improvement suggestions

Images

When loading image from local storage, don't include size variable manualy. Instead different size variants should be names with @Nx suffix (eg. @2x or @3x) and only suffixless file name should be included. This way RN will pick best image by itself based in device screen.

Bad:

<Image source={require('../../img/graphics/wishlist/checkbox-selected-2x.png')} />
@Pustelto
Pustelto / Setup iOS fastlane deployment for RN.md
Last active July 11, 2019 08:11

RN iOS fastlane setup

What you need

  • fastlane
  • private git repo to store certificates and profiles on
  • access to app store and to developer account
  • set your phone number as trusted phone number in Apple ID managmend for your developer account.

How to do it

@Pustelto
Pustelto / .gitlab-ci.yml
Created February 15, 2022 11:18
GitLab CI to deploy CRA with react router
workflow:
rules:
- if: $CI_COMMIT_BRANCH == "main"
image: node
pages:
variables:
# Replace this variable with your own path. Just copy everything right behind the domain gitlab.io. Don't forget to add
# the slash at the beginnig.
@Pustelto
Pustelto / GetTimeSince.js
Created June 28, 2022 06:55
JS snippet to get relative time between two dates. Taken from https://twitter.com/branmcconnell/status/1541539848129073153/photo/1
function getTimeSince(_fromDate, _toDate = new Date()) {
const throwError = () => {
throw new Error("getTimeSince requires 1-2 arguments, of type date or date-string");
};
if (typeof _fromDate === "undefined") {
throwError();
}
const fromDate = +new Date(_fromDate);
@Pustelto
Pustelto / Can I Use High contrast bookmarklet
Created July 24, 2022 17:07
javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule(':root {--primary-bg: white !important; --primary-bg-shade-1: white !important; --primary-bg-shade-2: white !important; --primary-bg-shade-3: white !important; --supported: #84CC16%20!important;%20--no-support:%20#DC2626%20!important;%20--no-support-alt:%20#b43b2b%20!important;%20--partial:%20#22D3EE%20!important;%20--partial-alt:%20#06B6D4%20!important;%20--no-support-pattern:%20var(--no-support)%20!important;%20--supported-fg:%20black%20!important;%20--partial-pattern:%20var(--partial)%20!important;%20--partial-fg:%20black%20!important;%20--no-support-fg:%20white%20!important;}',0);})()