Skip to content

Instantly share code, notes, and snippets.

View yeromin's full-sized avatar

Dima yeromin

  • Kyiv, Ukraine
View GitHub Profile
@yeromin
yeromin / JavaScript media query.md
Last active May 31, 2023 14:54

JavaScript media query

  try {
    const mediaQueryMax1023 = window.matchMedia('(max-width: 1023px)')
    const mediaQueryMin1024 = window.matchMedia('(min-width: 1024px)')
  
    mediaQueryMax1023.addListener(mobile);
    function mobile(media) {
 if (media.matches) {
@yeromin
yeromin / react.md
Last active July 4, 2020 21:07

REACT hints

router

<BrowserRouter>
  <Switch>
    <Route exact path="/">
      <Main
        mockData={this.props.mockData}
@yeromin
yeromin / tests - jest_enzyme.md
Last active July 5, 2020 18:45

JEST/ENZYME

run test:

npm run test.jest -- -t
npm run test.jest -- -t "appTest"
npm run test.jest -- -t -u
@yeromin
yeromin / es6.md
Last active September 4, 2020 08:43

ES6 - 2015

.map()

Similar to forEach(). BUT: it creates a new array with the results of calling a provided function on every element in the calling array. Example:

const [int, dec] = count.toString().split('.').map(el => parseInt(el, 10))
@yeromin
yeromin / onload.js
Created June 5, 2019 13:01
onload
window.addEventListener('DOMContentLoaded', function() {
console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
@yeromin
yeromin / make image square.md
Created March 19, 2019 10:45 
/* make img wrapp square */
.kuGridView .klevuImgWrap{
  height: auto !important;
}

.kuGridView .klevuImgWrap::before {
  content: "";
  display: block;
 padding-bottom: 100%;
@yeromin
yeromin / Cut few text-rows (pure CSS).md
Created May 16, 2018 09:32 
        overflow: hidden
        text-overflow: ellipsis
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
@yeromin
yeromin / Docker.md
Last active October 31, 2018 21:21

Docker commands

docker-compose up
docker-compose up -d
docker-compose down && docker-compose up --build
docker system prune
@yeromin
yeromin / all but not hovered.md
Created April 3, 2018 09:53
All elements, except hovered

Допустим, у нас эффект ховера на img. Тогда пишем для контейнера img-ов такое:

.wrap:hover img:not(:hover)
  -webkit-filter: grayscale(1)
  filter: grayscale(1)
  opacity: 0.75

и прописываем здесь все элементы, которые нам нужно изменить, когда в ховере только один.

Или еще пример:

@yeromin
yeromin / Hide placeholder via CSS.md
Created March 26, 2018 15:53 
input
  &:active, &:focus
    transition: 0.35s ease
    color: #1d1d1d
    &::-webkit-input-placeholder
      transition: opacity 0.3s ease
      opacity: 0
    &::-moz-placeholder
 transition: opacity 0.3s ease