Alimjanov-Ibragim

.sandwich
	.sandwich__line.sandwich__line--top
	.sandwich__line.sandwich__line--middle
	.sandwich__line.sandwich__line--bottom
	
.sandwich {
  cursor: pointer;
  display: none;
  height: 20px;
  position: relative;

Alimjanov-Ibragim

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
    background-color:#fff;
    width:16px
}

/* background of the scrollbar except button or resizer */

Alimjanov-Ibragim

Taken from http://webcoder.kz/fiksirovannaya-shapka-pri-prokrutke-stranicy

HTML разметка:

<header></header>
<div class="content">
<p>
Сюда вставляете очень много контента, для того чтобы появился вертикальный скролл...
</p>
</div>

Alimjanov-Ibragim

If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

• We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
• We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method [depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/Jav

Alimjanov-Ibragim

###Sketch trial non stop

Open hosts files:

$ open /private/etc/hosts

Edit the file adding:

127.0.0.1 backend.bohemiancoding.com

127.0.0.1 bohemiancoding.sketch.analytics.s3-website-us-east-1.amazonaws.com

Alimjanov-Ibragim

#https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router 
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Alimjanov-Ibragim

var BASE64_MARKER = ';base64,';

function convertDataURIToBinary(dataURI) {
  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(i = 0; i < rawLength; i++) {

Alimjanov-Ibragim

export const isSafari = () => {
  const ua = window.navigator.userAgent.toLowerCase();
  return (
    ua.includes('safari') &&
    !ua.includes('crios') &&
    !ua.includes('fxios') &&
    !ua.includes('android')
  );
};

Alimjanov-Ibragim

How to force a page to reload from server at browser launch with JavaScript

I spent weeks finding a way to refresh a page or a tab from the server once a user starts or restarts the browser. I was very surprised to find nothing about this topic.

Let's dig into the context, tries and the solution I came up with.

Context

Typically, once a user opens a browser and gets to a page, it directly provides the page in cache without refreshing any data from the server. Obviously, this only applies if the user is not in a private navigation.

In this case, as a user, I always need to open the browser and then manually reload the page to get the last updated data. What? Am I too lazy? Sure I am a developer!

Alimjanov-Ibragim

//=== Custom Hook useMediaQuery
import { useState, useEffect } from 'react';

export const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    /* window.matchMedia() match if the media query you passed
       is match with current media query and return boolean value