Skip to content

Instantly share code, notes, and snippets.

View Grawl's full-sized avatar
🔨
work work

Даниил Пронин Grawl

🔨
work work
72 followers · 37 following
View GitHub Profile
@Grawl
Grawl / index.md
Created February 3, 2020 01:10
How to Mock an API with random data from NodeJS

As a frontend developer, you often need data from an API. But sometimes the backend hasn't been set up by your team. In order for you to continue and mock your data, it's a good idea to not store your data structure on memory.

It's a good idea to start as soon as possible to talk with an external API where your data comes from. In this tutorial, I want to go through a minimal setup for mocking your data. After this, you should be able to extend it with your own data as needed.

Dependencies

In order to work with Node you need to have it installed on your machine. For the mac users I highly recommend to install it with NVM, because it will make it easier to update NodeJS in the future. (There is also a version for Windows).

Create a new folder to start for this project. Run npm init -y to initialize the folder with Node and it will create automaticly a package.

@Grawl
Grawl / webpack-https-mkcert.md
Created August 10, 2019 06:21
Running Webpack Dev Server with HTTPS on developer machine using MKCERT

  1. Add local domain to /etc/hosts:

    127.0.0.1 my-project.dev

  2. Install mkcert

  3. Create certificate for this domain:

    ➜ mkcert my-project.dev
@Grawl
Grawl / sass-nested-media.md
Created April 23, 2019 11:45
Sass nested media queries issue

With Sass, I can use nested media queries:

.selector
    @media (min-width: 100px)
        @media (max-width: 200px)
            color: white

And it combines all media queries with and:

@Grawl
Grawl / index.html
Created December 6, 2018 08:45
Off-Canvas navigation without JS
<html>
<body>
<input
type='checkbox'
id='nav-off-canvas'
class='offCanvas-model'
>
<div class='offCanvas-layer'>
<p>navigation</p>
<label
@Grawl
Grawl / example.twig
Last active July 11, 2018 05:34 — forked from SimonSimCity/pagination.html.twig
A gist for pagination in Twig, based on the total number of pages, the current page and some URL-settings. UIkit design.
{% include 'modules/pagination.twig' with {
currentFilters: {
foo: 'bar',
},
currentPage: 43,
paginationPath: '/news',
showAlwaysFirstAndLast: true,
lastPage: 75,
urlType: 'slash',
} %}
@Grawl
Grawl / jquery.magnific-popup.ru.js
Created May 8, 2018 04:05
export default {
tClose: 'Закрыть', // Alt text on close button
tLoading: 'Загрузка…', // Text that is displayed during loading. Can contain %curr% and %total% keys
gallery: {
tPrev: 'Назад', // Alt text on left arrow
tNext: 'Далее', // Alt text on right arrow
tCounter: '%curr%/%total%' // Markup for "1 of 7" counter
},
image: {
tError: 'Не получилось загрузить <a href="%url%">изображение</a>.' // Error message when image could not be loaded
@Grawl
Grawl / Shell-ликбез.md
Last active January 11, 2018 01:07

& между командами

Для выполнения двух команд параллельно, например yarn live & ./artisan-serve

&& между командами

Для выполнения двух команд последовательно, например yarn && composer install

Соответствует двум строкам в сценарии:

@Grawl
Grawl / sass-order.md
Last active December 21, 2017 03:19
Sass order
  1. @extends
    • @extends %placeholder
    • @extends .className
  2. $variables
  3. @media
    • @media (max-width: 1400px)
    • +breakpoint(medium)
    • @media (max-width: 768px)
  4. @at-root
  • @at-root :root &
@Grawl
Grawl / htmlhintrc.json
Last active November 15, 2017 06:32
FEIP HTML lint rules
{
"alt-require": true,
"attr-lowercase": true,
"attr-no-duplication": true,
"attr-unsafe-chars": true,
"attr-value-double-quotes": false,
"attr-value-not-empty": false,
"csslint": false,
"doctype-first": true,
"doctype-html5": true,
@Grawl
Grawl / feip-sublime.md
Last active November 9, 2017 08:18

Sublime Text plugins used in FEIP

GitGutter

Shows you modified lines

SublimeLinter

Required for other linters