Przemysław Szelenberger

Lint Styled Components

2020-08-14T00:00:00+00:00

TLDR: Do VSC jest wtyczka koloryzująca style napisane za pomocą Styled Components oraz najwidoczniej uruchamia się dodatkowo process lintowania -> vscode-styled-components

Podczas implementowania projektu z 8 Projects with Designs you can do to Become FRONT-END developer - DEV zastanawiałem się czy style napisać w SCSS czy może jednak użyć Styled Components.

Tak naprawdę decyzji jeszcze nie podjąłem. Część styli mam w SCSS a część w Styled Components.

stylelint-processor-styled-components

Jedna sprawa mi przeszkadzała. Style z Styled Components nie przechodziły przez stylelint‘a. Natrafiłem na stylelint-processor-styled-components. “Świetnie!” pomyślałem i zastosowałem rady z dokumentacji. Problem w tym, że od tegomomentu pipe dla CSS i SCSS przestał mi działać. Jakoś dużo czasu nie chciałem spędzić na rozwiązanie tego problemu i zaparkowałem temat na branchu.

vscode-styled-components

Zajrzałem do dokumentacji Styled Components. Zauważyłem, że jest wtyczka do kolorowania składni CSS’ów w Styled Components -> vscode-styled-components. Doinstalowałem i ku memu zaskoczeniu VSC uruchomił lint dla styli w komponencie używającym Styled Components.

Podsumowanie

Myślę, że nie mam się co przejmować, którą drogą iść oraz cieszę się, że stylelint mi działa! Dodatkowo nie musiałem spędzać zbyt dużo czasu na rozwiązanie problemu lub szukaniu jego obejścia. Więcej czasu mi zajęło napisanie tego posta!

React Testing Library - intro

2020-07-16T00:00:00+00:00

Zauważyłem, że jest niewiele materiałów o React Testing Library po polsku.

Posty, które się pojawią w serii, mają głównie pomóc mi w nauce korzystania z React Testing Library. Możliwe, że Tobie się też przydadzą.

Posty będą oparte o workshop Kent’a C. Dodds’a:

Chcę się zastosować do wyzwań z 8 Projects with Designs you can do to Become FRONT-END developer - DEV i przy okazji poćwiczyć z React Testing Library.

Dlatego kod w postach nie będzie typu “foo/bar”. Wiem, klasyka, ale ile można :-).

W miarę jak się posty będą pojawiać, to dodam w każdym z nich spis treści, by można było po nich nawigować. Oczywiście włącznie z obecnym postem.

Why TypeScript fails to inform you about wrong use of getter?

2019-03-27T00:00:00+00:00

What Happend

While refactoring Switcher class in one of my projects I got error:

error TS2349: Cannot invoke an expression whose type lacks a call signature. Type ‘Switcher’ has no compatible call signatures.

“What the hell?!” - I thought. I looked into given line number of the error log. It looked like: path/to/file/switcher.ts(line,column) and in that line and column was only getter… I googled entire error message and found nothing that could help me. The solution is very easy and that is the reason of no solution on internet. But I couldn’t figure out how to fix the problem.

I asked my collegue to look into the code, which looks similiar to:

class Switcher {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  click(): void {
    console.log(`Switcher ${this.name} was clicked.`)
  }
}

class Page {
  private get switcher(): Switcher {
    return new Switcher('page');
  }

  toggleSwitcher() {
    this.switcher().click();
  }
}

const page = new Page();

page.toggleSwitcher();

He found problem and solution very quickly. Do you know the solution? YES! In toggleSwitcher() method switcher is called but this is a getter not the method. When I got rid of brackets it worked fine. If I didn’t call for help I could wrestle with this for hour or more.

The next day

The next day I struggled with the fact I didn’t realize what was the reason behind the error. Why I didn’t notice that I called getter as a method? I wrote the same code in JS.

class Switcher {
  constructor(name) {
    this.name = name;
  }

  click() {
    console.log(`Switcher ${this.name} was clicked.`)
  }
}

class Page {
  get switcher() {
    return new Switcher('page');
  }

  toggleSwitcher() {
    this.switcher().click();
  }
}

const page = new Page();

page.toggleSwitcher();

It logged me a message:

Uncaught TypeError: this.switcher is not a function at Page.toggleSwitcher (:17:10) at :23:6

Wow! This message clearly said that this.switcher is not a function. Not some lack of a signature like it was in TS error message! If TS could log this instead of crap it give to me, I think I wouldn’t ask anybody for help! this.switcher is not a function! Just like that! Bad TypeScript! BAAAD!!!

Going with Ionic 3 in My Cookbook app

2019-01-04T00:00:00+00:00

My Cookbook

My Cookbook is a digital cookbook and pantry.

In the Pantry, you can track the number of your ingredients.

Based on the contents of your Pantry Cookbook shows which dish you can prepare immediately. Dishes are marked when there is lack of some ingredients. There is shown which ingredient is lack of and how many of it.

I used Ionic v1.

Migration from Ionic v1 to v3

I think Ionic v3 is stable version of this framework and I will use it for app. I don’t want go with the newest 4th version for now. It has RC when I publish this post. I will struggle with many new things for me in v3 like “new” Angular.

I will build app upon one of the templates called super. So I generated app with this template and then I will add functionalities from old code to the new one.

Repo

My Cookbook repo is on Bitbucket. It is public so you can go there and look into my code.

How I fixed the issue with using SimpleDebugger in a browser

2018-04-09T00:00:00+00:00

I made a mistake

I configured Webpack for an app, not for library and that was the mistake I made. Start your own JavaScript library using webpack and ES6 post was very helpful and Authoring Libraries from Webpack documentation. I changed Webpack’s configuration. SimpleDebugger can be used as <script> tag in a browser.

What else I changed

I extracted Logger

I changed conception and SimpleDebugger is whole library now. For now, it has only Logger module. Logger is tool for logging the messages like SimpleDebugger was. So functionally nothing is changed.

ClassNames refactor

I refactored ClassNames and every class is written in kebab-case.

Demo

I’ve changed code Demo. SimpleDebugger is loaded as a global variable. You can play with it, e.g.:

var myLogger = new SimpleDebugger.Logger(0);

myLogger.add('Testing... Testing...');

Code Coverage

2018-02-19T00:00:00+00:00

Code Coverage in Jest

Code Coverage is built in Jest. Only what is needed to do is give --coverage parameter:

jest --coverage

Reports

Reports are generated as statical sites which are very readable. Report sites are linked in a way that you can click on the names of files to get more detailed reports.

In detailed reports, you can notice which lines are covered and if all variants of code are covered.

Reports are sortable. You can sort’em by click on the header in the report table.

Istanbul is used under Jest to generate Code Coverage reports.

Configuration

I didn’t do any configuration. I hadn’t to!

npm script

I wrote npm script to run Code Coverage on watch:

"test:coverage": "jest --watch --coverage"

Things to do

Create github page

Things I done

add Code Coverage

Continuous Integration

2018-02-16T00:00:00+00:00

Why simple project as SimpleDebugger needs CI?

Answer is simple.

I what to learn something new
CI is not so much known topic for me
for fun!

Why I chose CircleCI?

I didn’t want use TravisCi

I saw TravisCi in many projects on Github
I think I will use it in some other project
I wanted something new for me

CircleCI

It is very easy to start working with it. I don’t quite remember what things must be done but there is the reason for it. CircleCI needs a config file and connection with project repository. Of course, you need to register on CircleCI.

I made mistake and CircleCI gives me some errors at the start. It was my fault. I didn’t changed needed version of nodeJS in config file. When I fixed it CircleCI just started!

I added integration with Slack. When I commit something I get a message on Slack about the results from CircleCI. It is AWESOME!

I added badges to README file. It shows the status of branches master and develop.

Fun Fun Function

I saw series about CI on Fun Fun Function channel on Youtube. You can watch it too: Continuous Integration - What’s the point?. Fun Fun Function is great show of @mpj. He is talking a lot about JavaScript but it isn’t only one thing which he talks about. You definitely should give him a try and watch some movie.

Things to do

add Code Coverage
Create github page

Things I done

add CI
- integration with CircleCI
- integration with Slack
- badges in README file

Demo Page and scrollable Main Container

2018-02-10T00:00:00+00:00

Demo Page

I prepared Demo Page for testing and adding new features purposes.

I prepared two npm scripts:

the first for building Demo Page files - build:demo
the second for running the dev server - start:demo

Scripts using Webpack which use config file prepared for Demo Page. I just duplicated config/dev.js file and made some changes in it (Added Demo - config file).

Scrollable Main Container

The problem with height of Main Container

In Main Container appears all messages. When a message was added or deleted then the height of Main Container actualized. It was possible to cover all page’s content when Main Container had many messages.

How did I fix the problem?

I thought that the Main Container should have a fixed height and that it should be scrollable. This solved the problem of covering the content of the page by SimpleDebugger.

Things to do

add CI
add Code Coverage
Create github page

Things I done

Create demo page
Fix Main Container: Now it enlarges and would cover all window view

Refactoring: use ES6

2018-01-23T00:00:00+00:00

ES6

When I started SimpleDebugger 5 years ago the ES5 was a standard. So I refactored code to ES6 using class and moving stuff to separate modules. index.js file is only start point code. Its grabbing all needed files and exports the main module which is SimpleDebugger.

Class

I don’t really like this thing because it causes confusion about objects in JavaScript. I hope it is well known that JavaScript has prototype based architecture. There are no classes in JS.

I love prototypes. It is so different from class object-oriented architecture. I feel prototypes gives developer more freedom than classes. Prototypes are more flexible.

Sure it is cool to have some shortcut to define Constructors (I will write post what I mean "Constructors" in near future or you can read about it: From constructors to classes) and I really don’t know why the class is chosen.

I used it in SimpleDebugger and it works fine.

Modules

I moved SimpleDebugger Constructor and removeNode() to separate files.

SimpleDebugger has its own file and it exports only this module.

I moved removeNode() to dom.js. This function is not the default of this module. I think dom module will not have any default. It will be the collection of functions to do stuff on DOM.

Satisfy TODO notes

I added some TODO notes in the past and well, I satisfied them.

One of those notes was about adding version a number to the bundles. I searched for some plugins for Webpack. There are some on Github but I realized I don’t need a plugin. It is really simple to do that. You can grab the version of the project from package.json file and put to filename and source map.

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const version = require('../package.json').version;

module.exports = function (env) {
  return {
    devtool: 'cheap-module-source-map',
    entry: {
      main: './src/index.js'
    },
    output: {
      path: path.resolve(__dirname, '../dist'),
      filename: `[name].${version}.bundle.js`,
      sourceMapFilename: `[name].${version}.map`
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader'
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [ 'css-loader', 'sass-loader' ]
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin({
        filename: '[name].bundle.css'
      }),
      new HtmlWebpackPlugin({
        title: 'SimpleDebugger',
        alwaysWriteToDisk: true
      }),
      new HtmlWebpackHarddiskPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      port: 7777,
      host: 'localhost',
      hot: true,
      noInfo: false,
      stats: 'minimal'
    }
  };
};

And that’s it! Simple enough!

Added bump version npm script

I added npm script for bumping the version number. I know this will be helpful. I used it in my work, so this is tested on the live object!

"version-bump": "npm run set-tag-prefix && npm version"

Things to do

Fix MainContainer: Now it enlarges and would cover all window view
Create demo page
Create github page
add CI
add Code Coverage

Things I done

Refactored Code to ES6
Moved code to separate modules
Satisfied TODO notes
created npm script for bumping version

Unit Tests helped rid of jQuery

2018-01-08T00:00:00+00:00

Xmas

I wrote some code during Xmas. Little but very important. I added Jest to running Unit Tests. That helped me to rid of jQuery. I learned again some DOM API methods which I forgot that exist.

Unit Tests

Running tests with Jest is very delightful. All you need to do is on Jest documentation website. Adding Jest was a very simple task to do. When all config was ready I wrote tests which tested existing features. Then I started another task…

Rid of jQuery

…which was rid of jQuery. One of the goals from the start of mine comeback to SimpleDebugger project was rid of jQuery. It is not reason that I don’t like jQuery. I want to SimpleDebugger to be independent.

With unit tests rid of dependence was easy. I always knew when I broke something and detected which feature works wrong and I fixed it.

Future of SimpleDebugger

Now I will need refactor code to ES6 and prepare some demo page.

I prepared Trello Board for this project.

On this board I will add ideas for some new features.

Things to do

Demo site
think about new features
Setup use linter

Things I done

changed path to dist folder
Unit Tests
- now I can run Unit Tests with Jest
- added Unit Tests
added [linter] for JS
rid of jQuery
added .editorconfig