DEV Community: Przemek Nowak

ApolloClient - React useSuspenseQuery hook

Przemek Nowak — Fri, 05 Jun 2020 14:30:52 +0000

If some of you need hook to collaborate with React Suspense and Apollo Client - I've created one.

According to discussion on Apollo github - Apollo Client 3 won't have such a hook in first version. Yeah I know, Suspense is still in React experimental phase, but it looks like lot's of society started using it and it becomes an inseparable part of React. That's why I've created one and you can get it from this npm.

For now this hook is out of types, and still this code is not perfect, but it provide error handling and promise managing for Apollo.query. We tested it at Brainly on one of our prototype project and works fine.
Cheers!

Angular - Custom Webpack Config to use SvgDocGen plugin

Przemek Nowak — Fri, 21 Feb 2020 09:11:15 +0000

Hello everyone, in last time I've posted webpack plugin for generating demo and variables of your sprites.svg file. In this post I would like to show you how to add custom webpack configuration to your Angular project to use some plugins - in this article SVG Doc Generator.

I will be working with angular project generated by angular-cli so to go through it with me you can just generate simple app ng new app-name.

When we have generated angular app we have to install some builders to build this app with additional webpack config. So let's install:

  npm install @angular-builders/custom-webpack @angular-builders/dev-server --save-dev

Now we have to update angular.json to use installed builders.

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.extends.js",
              "replaceDuplicatePlugins": true
            },

as you can see name of my webpack config is webpack.extends.js you can use whatever name you want.
Dump below we have to change builder for ng serve

"serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",

In root directory according to path which we added to angular.json we have to create webpack.extends.js file. It is a file where we will be keeping our additional webpack configuration. For now let's just export empty object:

module.exports = {};

Perfect, we've updated builders and added custom webpack config to Angular app. Everything is working so let's go to next step and let's add some custom plugin.

Adding Custom Webpack Plugin

As I mentioned above I'm gonna add SVG Doc Generator. plugin. According to instruction we have to install it via npm

npm install --save-dev svg-doc-gen

Great, now we can configure plugin in our webpack.extends.js file. But before it I will add my sprites.svg file to generate styles and demo html based on this. My SVG file looks like:

<svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 24 24">
    <defs>
      <style>
        svg.sprites {
        display: inline;
        }
        svg {
        display: none;
        }
        svg:target {
        display: inline;
        }

        svg[id^="primary-blue/"] use {
        fill: #047BC1;
        }

        svg[id^="primary-white/"] use {
        fill: #fefefe;
        }

        svg[id^="black/"] use {
        fill: #000000;
        }

        svg[id^="gray/"] use {
        fill: #AAAAAA;
        }

        svg[id^="green/"] use {
        fill: #197F86;
        }

        svg[id^="orange/"] use {
        fill: #C3561A;
        }

        svg[id^="red/"] use {
        fill: #B21F24;
        }

        svg[id^="secondary-blue/"] {
        fill: #002B49 !important;
        }

        svg[id^="white/"] {
        fill: #FFFFFF;
        }

      </style>
        <g id="def-icon1.svg">
            <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
        </g>
        <g id="def-icon2.svg">
            <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/>
        </g>
        <g id="def-icon3.svg">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/>
        </g>
        <g id="def-icon4.svg">
            <path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
        </g>
    </defs>
    <!--
        @SVGDoc
        name: Icon1
        variable: icon1
    -->
    <svg id="icon1.svg">
         <use xlink:href="#def-icon1.svg"/>
    </svg>
    <!--
        @SVGDoc
        name: Icon2
        variable: icon2
    -->
    <svg id="icon2.svg">
        <use xlink:href="#def-icon2.svg"/>
    </svg>
    <!--
        @SVGDoc
        name: Icon3
        variable: icon3
    -->
    <svg id="icon2.svg">
        <use xlink:href="#def-icon2.svg"/>
    </svg>
    <!--
        @SVGDoc
        name: Icon4
        variable: icon4
    -->
    <svg id="icon4.svg">
        <use xlink:href="#def-icon4.svg"/>
    </svg>
</svg>

As you see for every icon I've added @SVGDocGen comment according to plugin documentation. Now we can configure plugin,
Inside webpack.extends.js we have to add:

const path = require('path');
const SVGDocGen = require('svg-doc-gen');

module.exports = {
  plugins: [
    new SVGDocGen({
      svgDefsPath: path.resolve(__dirname, 'src/assets/sprites.svg'),
      stylesConfig: {
        outputPath: path.resolve(__dirname, 'src/assets/styles/svg-vars.scss'),
        styleLang: 'scss',
        svgPathInFile: 'assets/sprites.svg'
      },
      htmlConfig: {
        outputPath: path.resolve(__dirname, 'src/assets/svg-demo/index.html')
      }
    })
  ]
};

This is configuration which is taking sprites.svg file from assets folder and generating variables and demo html with icons to assets folder.
Now when you run ng serve or ng build according to path if you open src/assets/svg-demo/index.html you should see that output:

And src/assets/styles/svg-vars.scss:

$icon1: "assets/sprites.svg#icon1.svg";
$icon2: "assets/sprites.svg#icon2.svg";
$icon3: "assets/sprites.svg#icon2.svg";
$icon4: "assets/sprites.svg#icon4.svg";

Ok perfect, at the end we can just import our vars to styles.scss to get usage of generated variables. I.e:

@import "./assets/styles/svg-vars";

.icon1 {
  background: url($icon1);
  background-size: 100%;
  width: 2rem;
  height: 2rem;
}

That's all from me, If you have some questions feel free to add comments below this article. If you have some problems with configuring let's download this zip package (this is working angular app generated for this article) and compare your code with code from this pack.

SVG doc generator based on sprites.svg

Przemek Nowak — Tue, 18 Feb 2020 17:48:17 +0000

If some of you need a tool to generate SVG doc/demo of icons which are included in sprites.svg file I've created webpack plugin to achieve this.

You can install it via NPM and take a look on source code in my github.

It generates for you demo html with svg icons and variables scss|less|css based on your svg sprites file.

NPM link: https://www.npmjs.com/package/svg-doc-gen

CSS Challenge #1

Przemek Nowak — Wed, 05 Feb 2020 21:06:13 +0000

Hello everyone, recently I've discovered that with gradient in CSS we can create amazing things, here is a link what I've seen. For me it was incredible and I was thinking that its worth to go through it and learn this not readable (at the beginning) part of code.

In general I have some habit about learning, when I'm discovering something I'm trying to create some exercise to summarise knowledge which I've just learned. Because of this I've created a exercise to draw only with gradients football pitch and this is what I achieved at the end:

Of course, I know there is no lots of details etc, but I realised that actually gradients in CSS are really schematic.

So let's go and let's learn how easy gradients are. At the end of the article I shared link to repo with football pitch so you can go and take it and you will have local app to play with css gradients. But ok, no more talking, let's code!

First problem with gradients could be - how to create stripes with gradients?

This is one of amazing and most know problem to solve with gradients, but thanks to it we can discover some new property which I didn't know. But let's start with some simple solution.

What is going on there? Actually on this example you can understand basic concept of gradients. As you can see this is only a background, so still you can use every background properties.

background: linear-gradient(90deg, blue 0, blue 1rem, red 1rem, red);

Let's divide this code in to smaller part. First property 90deg says about our angle of stripes. Then we are starting with drawing stripes.
blue 0, blue 1rem - its mean that our gradient starts from 0 from blue color and finising blue on 1rem. red 1rem, red - Then red gradient start from 1rem and finish at the end.

As you probably know, background has repeat property and as a default it's working as background-repeat: repeat. Thats why our gradient is repeating and filling all background.

Second thing which we have to do is setting our background size, as default it is 100% 100%, so let's fit it to size of our gradient:
background-size: 2rem 100%;

I assume that on this basic example you've understood basic concept of gradients. So let's go to the next problem.

Second problem - how to create diagonal stripes?

You could think that its actually easy, we have to just change angle of our linear-gradient property and thats all. Well, no especially, if you really understood above part then you can imagine that if you change your angle to i.e 45deg then you will have that effect:

and as you can see, at the bottom you have 2 gradient lines, 1rem of blue and 1rem of red, because our background-size is 2rem 100% thats why we have big horizontal line and only part of blue diagonal line... So the first thing what we could do is changing background-size into background-size: 2rem 2rem;:

But it's not looks like diagonal stripes. So what the problem is?
On above screenshot you can see that we have square with 2 parts 1rem of blue and 1rem of red - so this is what our code is saying. Now we have to change our square gradient into repeatable square which create stripes for us. Maybe you're remember that stripes background with image also required from us to create small square and repeat it - thanks to that solution we was able to receive stripes. The same things is with gradients, our square should look like:

As you can see we have to create more gradients than 2 elements. First we have to create 25% of blue, then 25% to 50% of red then 50% to 75% of blue and at the end 75% to 100% of red. So let's code it!

Amazing it's working, so what is the next problem? Actually let's stay in current one, what if we would like to change angle? As you can see our square is calculated to 45deg and from 0% to 100% we've provided gradient for it. When we change angle to 60deg then we have some ugly effect like not fitted image:

So what we can do, in general one of solution is to recalculate our gradient and change percentage values. But in fact it isn't flexible solution. CSS is coming with help to us, because there is one more gradient property... linear-gradient and radial-gradient has also properties repeating-linear-gradient, repeating-radial-gradient.

So instead of using background-size: 2rem 2rem to keep our gradient in small square, we can define steps to repeat our gradient. In our case we could say that we would like to repeat our gradient by 1rem alternately blue/red.

I think that explained to you how actually gradients works, and they are really schematic and simple in usage.

If you would like to take this challenge and build football pitch fell free! If you're need some help add comment below article and I will try to answer you or just take a look on mine code in my repository.

Cover Photo by Kobu Agency on Unsplash.