Skip to content

Instantly share code, notes, and snippets.

View wwwebman's full-sized avatar
🇺🇦

webman wwwebman

🇺🇦
59 followers · 10 following
View GitHub Profile
@wwwebman
wwwebman / In viewport React
Created May 5, 2021 07:30
const handleScroll = () => {
const pageYOffset = window.pageYOffset;
const windowHeight = window.innerHeight;
const elementOffsetTop = ref?.current?.offsetTop ?? 0;
const elementHeight = ref?.current?.offsetHeight ?? 0;
const scrollDirectionToTop = pageYOffset < prevPageYOffset.current;
const distanceFromTop = pageYOffset + elementOffsetTop;
const inViewport =
pageYOffset >= elementOffsetTop - windowHeight &&
pageYOffset <= elementOffsetTop + elementHeight;
@wwwebman
wwwebman / eslint-pre-commit
Last active February 18, 2018 16:37
ESLint git pre-commit hook to check Javascript code quality
#!/bin/sh
# 1.
# Code Quality Check
# @scope ./react
#
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM "src/react/*.js" "react/*.jsx" | tr '\n' ' ')
ESLINT="$(git rev-parse --show-toplevel)/react/node_modules/.bin/eslint"
[ -z "$STAGED_FILES" ] && exit 0
@wwwebman
wwwebman / add-remove-input-class.js
Created May 27, 2017 08:18
Add/Remove class when on input Focus/Blur with Pure JS
var IputEffect = function(){
var placeholderPosition, appendInputWhenSelect, actions;
actions = {
activate: function(el) {
el.parentNode.parentNode.addClass('active');
},
deactivate: function(el) {
if (el.value === '') el.parentNode.parentNode.removeClass('active');
@wwwebman
wwwebman / docker-compose.yml
Last active February 3, 2023 05:28
Docker Compose For Wordpress, Maria/MYSQL, phpMyAdmin
version: '2'
services:
db:
container_name: database
image: mariadb # Pull mysql image from Docker Hub
ports: # Set up ports exposed for other containers to connect to
- "3306:3306"
volumes:
- ./dep/mysql:/docker-entrypoint-initdb.d
@wwwebman
wwwebman / cookie.scss
Last active November 16, 2017 17:35
Set and get cookie with JavaScript (JS, SCSS, HTML)
@wwwebman
wwwebman / Webpack-Babel-ES6-PhotoSwipe-JavaScript-gallery-init.js
Last active July 25, 2019 15:15
How to init the PhotoSwipe Plugin by dimsemenov for JavaScript gallery (Webpack + Babel + ES6 + pureJS)
@wwwebman
wwwebman / determine_scroll_direction.js
Last active January 26, 2017 14:40
How you can simple determine the direction of a jQuery scroll event
var scrollDirectionPrevValue = 0;
// Function return:
// true - scroll bottom
// false - scroll top
function scrollDirectionToBottom(scrollTop){
var directionToBottom = false;
if( scrollDirectionPrevValue < scrollTop ) directionToBottom = true;
scrollDirectionPrevValue = scrollTop;
return directionToBottom;
@wwwebman
wwwebman / Generate Random Number Between min and max value
Last active January 17, 2017 12:39
function generateRandomBetween(min, max){
var y = Math.floor(Math.random()*(max-min + 1) + min);
return y;
}
@wwwebman
wwwebman / check-element-in-viewport.js
Created September 16, 2016 11:34
jQuery. check if element in viewport
$.fn.inViewport = function(){
var win = $(window);
var self = $(this);
var posOnPage = win.scrollTop();
var selfOffset = self.offset().top;
var visiblePartOfpage = posOnPage + win.height();
var endOfElPos = selfOffset + self.outerHeight();
return (visiblePartOfpage >= selfOffset && visiblePartOfpage <= endOfElPos ? true : false);
}