Skip to content

Instantly share code, notes, and snippets.

@AdamPetroff
AdamPetroff / libs.txt
Created March 12, 2022 21:32
libs to use
animation on scroll in (supports ssr) - https://www.npmjs.com/package/react-animation-on-scroll
@AdamPetroff
AdamPetroff / 100vh mobile fix
Created March 28, 2022 13:23
Fix for 100vh not taking into consideration the bars on mobile browsers
index.tsx:
```
if(typeof window !== "undefined") {
document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);
}
```
mixins.scss:
```
@function vh($quantity) {
@AdamPetroff
AdamPetroff / responsive sass vars
Created March 28, 2022 13:25
responsive sass variables
globals.scss:
```
:root {
--navbar-height: 12rem;
@include respond($bp-phone-lg) {
--navbar-height: 9rem;
}
}
```
@AdamPetroff
AdamPetroff / setup for rem
Created March 28, 2022 13:30
setup for REM as the main size unit
variables.scss:
```
$bp-desktop-sm: 75em; // 1200px
$bp-tablet-land: 62.5em; // 1000px
$bp-tablet: 48em; // 768px
$bp-phone-lg: 27em; // 425px
$bp-phone-sm: 23.5em;
```
mixins.scss:
@AdamPetroff
AdamPetroff / gist:e7c6df14d1bde4e1b48db643f99239aa
Created August 19, 2022 09:54
Beautiful blur/non blur pattern
backdrop-filter: brightness(90%) blur(20px);
-webkit-backdrop-filter: brightness(90%) blur(20px);
-moz-backdrop-filter: brightness(90%) blur(20px);
mask-image: repeating-radial-gradient( circle at 50% 50% center, var(--background), var(--background) 20px, rgba(255, 255, 255, 0.3) 20.5px, rgba(255, 255, 255, 0.3) 21px );
-webkit-mask-image: repeating-radial-gradient( circle at 50% 50%, var(--background), var(--background) 20px, rgba(255, 255, 255, 0.3) 20.5px, rgba(255, 255, 255, 0.3) 21px );
@AdamPetroff
AdamPetroff / gist:036e376793693e41df08e664a4af9748
Created September 25, 2022 09:56
cool dot background filter
background-image: radial-gradient( rgba(0, 0, 0, 0) 1px, var(--background) 1px );
background-size: 4px 4px;
backdrop-filter: blur(3px);
@AdamPetroff
AdamPetroff / Blockchain Node.js dev task.md
Created March 23, 2023 21:49
Blockchain Node.js dev task

Title: Goerli Network Native Token Tracker

Objective: Create a small backend application that tracks native token balances for a list of Ethereum addresses on the Goerli Network and serves this information through an API. This project will be used as a hiring test for a backend developer skilled in Node.js, TypeScript, Express.js, SQLite, Prisma ORM or Knex.js, and ethers.js.

Requirements:

  1. The backend application should be developed using Node.js with TypeScript.

  2. Utilize Express.js as the web framework for creating the API.