Forem: Vahe

Make CSS3 grid layout in 1 minute

Vahe — Wed, 21 Aug 2019 16:42:19 +0000

If you are having difficulty with CSS3 Grid and you need to quickly write a layout, then this tool may help you.

The interface of the tool is very simple, you can change the size, change the location of the widgets. You can highlight rows and columns in the grid, and in the end you just get the generated CSS code

Let's create our html file and put the already generated css code

<style>
  /* A little style 💅 */
  .container > div {
    background-color: rgb(211, 234, 252);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }

  .container {
    display: grid;
    grid-template-areas:
      "Header Header Header Header Header"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Footer Footer Footer Footer Footer";
    grid-template-rows: 100px auto auto auto auto auto 100px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
  }

  .head {
    grid-area: Header;
  }
  .left {
    grid-area: Left;
  }
  .main {
    grid-area: Main;
  }
  .right {
    grid-area: Right;
  }
  .footer {
    grid-area: Footer;
  }
</style>

<div class="container">
  <div class="head"></div>
  <div class="left"></div>
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur.......
  </div>
  <div class="right"></div>
  <div class="footer"></div>
</div>

I just changed the grid-template-rows

Let's look at the result

Links

Website

Repo

@vaheqelyan

HTTP request with ES6 tagged templates

Vahe — Wed, 09 Jan 2019 13:49:42 +0000

ES6 template literals are one of my favorite features in es6. A few days ago I saw an open source project on github - htm, there are also hyperHTML and, possibly, several other projects also.And I decided to create such a thing to perform AJAX requests.

By the way, package uses node-fetch for node.js and whatwg-fetch for client javascript

Source in github vaheqelyan/karin

Do you think this is a good idea ?

Turn any callback into promise with babel-plugin-promise

Vahe — Tue, 29 Aug 2017 12:50:03 +0000

briefly,I will tell you how to convert an existing callback to promise.

We will need to use babel.

For example, let's take a request from npm and convert it to a promise

yarn add babel-plugin-promise --dev

require("babel-polyfill");

import request from "request";

//@promisify<err,res> req
__ = request(arg1);

console.log(req("http://www.google.com"));

req("http://www.google.com")
    .then(res => console.log(res.body.length))
    .catch(err => console.log(err));

let's check

quite quickly

babel-plugin-promise