Skip to content

Instantly share code, notes, and snippets.

Avatar
🔨
work work

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

🔨
work work
View GitHub Profile
View photoswipe-previews.js
import PhotoSwipe from 'photoswipe/dist/photoswipe'
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
import { photoswipePreviews } from './previews'
const holder = document.querySelector('.pswp')
// initializing code
const openPhotoSwipe = ({ items }) => {
View uvue-server-plugin-amp.js
import posthtml from 'posthtml'
export default {
async rendered(response, context, app) {
// TODO try to use route meta instead?
if (context.url.endsWith('/amp')) {
const html = response.body
const transform = new TransformHTML(html)
response.body = await transform.transform()
}
},
View ImageURLsFromHTML.js
/**
* Return array of URLs found in HTML string
*
* If `<img>` wrapped into `<a>` uses `[href]` of `<a>` if it's an image
*
* @param {string} html
* @returns {string[]}
*/
async ImageURLsFromHTML(html) {
try {
View SCP-1295-A.md

SCP-1295-1 - Война - Вильгельм

SCP-1295-2 - Голод - Готфрид

SCP-1295-3 - Мор - Боб

SCP-1295-4 - Смерть - Сэм

<Начало записи>

View util.php
<?
class Util {
/**
* Join paths
*
* @param
*
* @return string
*/
public static function PathJoin() {
@Grawl
Grawl / index.md
Created Feb 3, 2020
How to Mock an API with random data from NodeJS
View index.md

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 Aug 10, 2019
Running Webpack Dev Server with HTTPS on developer machine using MKCERT
View webpack-https-mkcert.md
  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 Apr 23, 2019
Sass nested media queries issue
View sass-nested-media.md

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 Dec 6, 2018
Off-Canvas navigation without JS
View index.html
<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 Jul 11, 2018 — 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.
View example.twig
{% include 'modules/pagination.twig' with {
currentFilters: {
foo: 'bar',
},
currentPage: 43,
paginationPath: '/news',
showAlwaysFirstAndLast: true,
lastPage: 75,
urlType: 'slash',
} %}