DEV Community: jan paul

thinking to myself when setting up a project boilerplate

jan paul — Tue, 04 May 2021 17:33:39 +0000

this is a thinking out loud to myself.

how to prepare a SPA in different frameworks/libraries but also in angular

ng new create-react-app vue cli
enable router
enable i18n strategy
enable store / reduxy stuff
bind router into store
ensure your API with smthng like or curls / postmany stugff

test GET / POST/ UPDATE
brief moment of think: do we need to auth? if so handle auth token with like setLocalStorage

create an entityfolder for selected endpoint, (if angular, also create a module here!!)
create model/type declartion (only if typescript, which we prefer) of entities
create service to consume any http-client (eg axios) // consider auth process

test GET / POST/ UPDATE loadAll(), oneOneById(), postNew(), update(), delete() for selected entity

test servicemethods in bare minimum but routable component, most liekly in lifecycle method of given framework
from now on we would need to distungiush from framework to framework/library which should be more articles,

in angular -which we atm work with- we go with:

create routeresolvers
prepare actions / reducer / selectors from ngrx, naivly bind http service into the loadaction (we like ngrx-entity here)
access store in template and trigger action for udf to ensure actions work
create effect for entity -> loadAllEntity -> http-service -> dispatch loadAllEntitySucess, bind result into store
we forget about, register router, effect, store, store-router in module, considering it silently given from now on, knowing forRoot() and forFeature().
remove 3 from template
consume loadEntity from action in routeresolver -> which should also will trigger the effect -> which will trigger the http -> which will trigger store binding
bind observable/subscriber to store in template list view
prepare route for single entity
access route, write resolver that gains single entity from store / write actions..... from here on
rinse repaet

quod erat demonstrandum.

looking for a good vpn provider

jan paul — Sat, 09 Jan 2021 16:14:05 +0000

I just asked this on the Typescript Discord Channel -- Offtopic, but tought why not enhance my question radius.

[17:08] Paulquapper: could somone suggest my a VPN provider with

1. a documented (javascripty) API and
2. the feature torenew ip, for given city/country. Ideally non US, no US-Server provider.
3. "cost efficient" (paying annualy)

Need help to improve my usage of gatsby-image

jan paul — Thu, 19 Nov 2020 10:26:11 +0000

Hello fellow Gatsby'ers. Today i am comming with a question to you. I need to improve my bundle size, and therefore i want to rewrite my gatsby-image wrapper to be more efficient.

Consider my bundle

BUT: the 150 images itself are only 14MB in total, which means gatsby bloats it like crazy.

I know my code smell in terms of BIG-O, but, my poor excuse, i didn't knew another way than mapping over the result. Can you guys help me to improve here, considering:

const ImageLarge = props => {
  return (
    <StaticQuery
      query={graphql`
        query {
          allFile(filter: { sourceInstanceName: { eq: "assets" } }) {
            edges {
              node {
                relativePath
                name
                childImageSharp {
                  fluid(maxWidth: 600, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      `}

and here now my pile of shame:

 const image = data.allFile.edges.find(n => {
          return n.node.relativePath.includes(`${path + props.src}`)
        })

        if (!image) return null

Btw, my problem are comming from not beeing able to parametrize my static gqlquery with arguments, so i took all images, mapped over and returned only the image that i needed. horrible inifficnient.

Why cant i do something like this?

const ImageLarge = props => {
  return (
    <StaticQuery
      query={graphql`
        query {
          allFile(filter: { sourceInstanceName: { eq: `assets/${name}.png` } }) {
            edges {
              node {
                relativePath
                name
                childImageSharp {
                  fluid(maxWidth: 600, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      `}

I asked google and found this, which describes my problem perfectly, but offers no solution

"Believe it or not you cannot create a fully dynamic image component using a gastby-image without risking a (possibly very large) bloat in your bundle size. The problem is that static queries in Gatsby do not support string interpolation in it's template literal."

what-is-the-best-way-to-display-all-pictures-of-a-directory-in-a-gatsby-project

If one you could help me to solve this problem, i'd be glad and i also think, that we should write about it here, so others can find this googeling.

May the code be with you 🙏

Javascript Homeoffice Stream

jan paul — Thu, 12 Nov 2020 09:46:46 +0000

Hey fellow nerds,

out of boredom in the homeOffice era, i started my very "unique" frontend stream. Feel free to join and chit chat.

https://www.twitch.tv/paulquappe :-)

How to deal with real imposters?

jan paul — Thu, 12 Nov 2020 09:43:26 +0000

Since we all read a lot about imposter syndrom, we tend to see an unrecognized genius in our collegues.

BUT? How to deal with an actual real imposter in your job?

I have been hired for a nice project, JAVA Backend + REACT (SSR) Frontend, Webassembly, webGL and Azure, just to bring you some buzzwords. The run is planed for like 5 years, so to say, it is today already planned, what they want to do with the product in the future.

After 10 years of beeing a developer, mostly Frontend, but also JSP/jinja/smartie and other templating stuff, i decided to take this position for the following reasons:

the stack looks familiar, but also there are some new things
the lifetime of the project (to comparsion, most agency project last 3 months in coding)
there will be a new team formed, since we take the project over and make it an internal company project
my desire to become a senior developer (not only moneywise)

And when they hired me, they said, there will be an IT Team soon in our company. So far, so good.

Then "the corana" happened and it was decided to hire only the Senior Architect, the HR found a promising candidate. No, they don't liked the indian guys, sadly. Still i bet he was good at JAVA but bad in german (since iam german).
They offered the job to someone else. It is a handsome, very charming, young and old, 10 years of experience as team-leader "senior software architect".

Just after stalking him on xing (our german linkedin) i realized, that his buzzwords never fit to each other. he has 4 star experience in C++/C#!!

??
!!

WTF, in either one, or in both? i mean for me, its been worlds between microsoft .NET and C++, but ok...

Then he has 4 Stars in JAVA/Android Studio? Hu? Java OR android or both or what? Iam confused.

But, i am the smallest lightbulb in the world, so they hired him, and he gets paid well, since i know my salary, which is pretty ok, but it is not the money i am about.

After talking to him for an hour, i realized he mixes terminology up. From my experience, if i dont develop daily, skills decay. I forget things, even the any type in Hypescript (joke is on me).

I wonder if it is reasonable to think, that someone who has not been in coding for 10 years, since his resumee is saying "PROJEKT MANAGER" and not "DEVELOPER", simply can not code.

We talked. He didn't know that JAVA servers are configurable for the MEM they are allowed to use.
He has no ****ing clue about JAVA changing it's business model and versioning, openjdk vs oracle java.

He messes up PUT and POST and sends the same JSON-body on the same route, and asks me after two hours "why is this not working" (we use a swagger).

So i told him: "please be honest, how good is your JAVA?"
He replied: "i can learn fast, iam just learning spring boot on udemy right now."
And then he said, and this made me really listen up. "In the job description the where looking for a nodejs guy", So his resume has 4 of 5 stars in JAVA/android, but he applied for nodejs?

JEZ. I get confused about all the wrong buzzwords and project manager gibber he is talking.

My boss asked me, what i think about my new collegue. What would you say in this moment? I tend to be diplomatic. "He is really nice. I like him. I hope he can show me things in backend, that will make me senior in 4-5 years too."

I know this differs to the usual dev.to stuff, it's more a writeup. But let me get to the point.

I think he is an imposter, since he knows what is paid in IT.

How would you react if you find out your colleque is a liar about his skillset, wirite some tipps in the comments.

TL:DR
Among all the smart guys with imposter-syndrome, are some real imposters, for the lulz and the $$$$

console.fun() or how to mess up the DOM

jan paul — Wed, 13 Mar 2019 19:15:11 +0000

I stumbled upon this little gem in the vue-land #random channel and it made me smile. Posted by xan#2554.

Thought maybe it can make you smile too and decided to share it to you. Have fun.

Instructions

copy script

visit your most preferred website -- ..most likely dev.to 😜

open console

paste script and press enter

(function funnyFunction() {
  var screenwidth = window.innerWidth;
  var screenheight = window.innerHeight;
  document.querySelectorAll('body *').forEach(function(node) {
    randT = Math.floor(Math.random() * screenheight);
    randL = Math.floor(Math.random() * screenwidth);
    node.setAttribute('style', 'transition-duration:500ms; transition-property: left, top; position: fixed; top:'+randT+'px; left:'+randL+'px');
  });
  setInterval(funnyFunction, 500);
})();

Be honest to yourself, did you knew what will happen?

cheers

i installed a 9 month old mini project again

jan paul — Fri, 09 Nov 2018 09:08:29 +0000

I installed a npm project again after 9 months...
The package.json contained less then 10 entries.

This feels insecure, somehow.... but iam not an expert ;-)

How to improve the build speed in React-Typescript, when using material ui

jan paul — Mon, 22 Oct 2018 09:44:47 +0000

Hi,
you are using material - ui in react typescript and having trouble with the performance? Well i stumpled upon the same issue.
The build takes like forever, since i started to use material-ui and i was really no fun to code against such a lame project.

But lets go in medias res and describe the scenario:

I wrote a header component like this
Header. Pretty staright forward, right?

While coding i went really unhappy, because the build and the livereolad grew pretty slow. So i played around with the Typescript compiler and found this little command
tsc --diagnostics --listFiles which i made an alias healtcheck in my package.json.

Running it was painfull and ended in results like

Files:          5598
Lines:        108833
Nodes:        453997
Identifiers:  146625
Symbols:      217251
Types:         56743
Memory used: 300772K
I/O read:      4.66s
I/O write:     0.48s
Parse time:   26.90s
Bind time:     1.62s
Check time:    9.72s
Emit time:     1.64s
Total time:   39.87s

As you guys can easily see, it takes quite some time and runs to a TON of files.

I imported the two icons for the header like this:

import {
  AccountCircle,
  Language
} from '@material-ui/icons';

And i was wondering about the mass of files that --diagnostics considered when building, especially the trillions of /node_modules/@material-ui/icons/**.d.ts.

Yes iam a typescript user, and althought i had some troubles to get into it, i really like it now. As you might know, if a package does not bring its own typings, there is a huge community in DefinitlyTyped on github, that provides typings for large packages.

For example: one would get the typings for material-ui like this: npm install --save-dev @types/material-ui, with the result of beeing able to consume material-ui in the typescript world.

But a build time of nearly 40seconds? I wanted to improve this and did some research at big brother.
Found this github issue that point to the same problem. And i was really happy to read this comment with a major improvement.

Instead of importing like above, i simply rewrote my import of the icons to:

import AccountCircle from '@material-ui/icons/AccountCircle';
import  Language from '@material-ui/icons/Language';

Lets see how much this impacts our healtcheck now:

Files:           382
Lines:         98396
Nodes:        386176
Identifiers:  130972
Symbols:      201601
Types:         56743
Memory used: 245687K
I/O read:      0.35s
I/O write:     0.37s
Parse time:    4.29s
Bind time:     0.79s
Check time:    5.16s
Emit time:     1.44s
Total time:   11.69s

Wow! Iam was speechless by such a little change, but with an impact like this. We gained nearly 30seconds by altering 2 lines, i mean it could be more lines, but by NOT IMPORTING VIA THE INDEX.

Iam glad i could share this to you, and it will maybe help the one or another.

My name is JanPaul and iam working for instant-data. We are small company, that provides internal tooling for large agencies and also data-exchange platforms.

May the code be with you :pray:
Thanks for the title image to Emil Bruckner @unsplash.

reducks, a boilerplate

jan paul — Tue, 11 Sep 2018 18:27:54 +0000

img by Jase Ess

Hello dear dev.to,

Iam working for instant-data. a small company that provides solutions in the environment of a larger advertising agency. mostly internal toolings.

After playing round a little with the create-react-app, i wanted to share my latest boilerplate with you and ask for your opinions, or improvements. You can visit me here on github.
In this i follow the ducks pattern, in which you try to keep all your redux and store reducer stuff in one single file, but for sakes of DRY, i will present you the README.MD. I appreciate any feedback ;-)

It is created via the CLI-Tool

create-react-app <your-appname> --scripts-version=react-scripts-ts

and customized to my needs, by running

npm eject

Prequisites

Installed node and npm Version 8 or higher.

Available Scripts

In the project directory, you can run:

`npm start`

Open http://localhost:3000 to view it in the browser.

`npm run build`

Builds the app for production to the build folder.

`npm run seed` Authentication seed

To make the boilerplate work from scratch, and to simulate the flow of Auth, we put a JSON-Server.
You should remove the complete seed folder, or better add it to your .gitignore, when you implement your own workflow. To make use of it simply npm run seed. You will get served at json-server --port 4000 --watch -- seed/db.json.

Folder Structure

After creation, your project should look like this:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  seed/
    /* a helper fake backend for firsttimers */  
  src/
    index.tsx
    components/
      App.tsx
    containers/
      /* your connected containers here */
    ducks/
      /* your ducks here */
    services/
      /* put all your global helpers inside here */
    store/
      history.ts
      index.ts
      localStorage.ts
  types/
    /*your types go here */

Debugging and DevTools

I strongly suggest you to install and use theses BrowserExtensions.

Material-UI and Decorators

The experimental feature for Decorators is activated in the tsconfig.json. By this it is possible to use the withStyle decorator in combination with compose of the recompose package.
Example usage is:

import { compose } from 'recompose';
import { withStyles } from '@material-ui/core/styles';

@(compose(withStyles(styles)) as any)
class Example extends React.Component<IExampleProps, IExampleState> {...}

To make use of themes in material-ui we need to wrap the content of App inside a

<MuiThemeProvider theme={createMuiTheme()}>
  //any content here
</MuiThemeProvider>

Environment

There is the possibility to provide ENV variables. use the .env file for this.
Please note, they need to follow the naming convention of REACT_APP_ EXAMPLE=FOOBAR.
Inside the project one can consume them by proccess.env.REACT_APP_EXAMPLE.
At a new start its set to the seedings path, so one might want to change it there.

HTTP Requests

Please use axios for your requests. It supports Promises and also async/await.
https://github.com/axios/axios
Also make sure the allow crossorigin-access on your server.

Ducks

We follow the 'Ducks'-Pattern to structure our application. Get insights on this specc here
https://github.com/erikras/ducks-modular-redux
The pattern is to have all these inside one duck:

action enum
action types
action creators
reducer functions
mainreducer
thunk
initialStore

Message Component

There is a rudimental example prepared in this boilerplate, that shows usage and consumption of a high level message or notification-component. Import the NofictationDuck inside the Ducks that you want the NotificationStore to be catched.

import NotificationDuck from '~/src/ducks/notification';

your.action()
  .then(() => /* success */)
  .catch((err) => {
      dispatch(NotificationDuck.throwNotificationWithError({text: 'your text', title: 'your title'}))
  })

But you can also connect them directly to components. Please keep in mind to reset the NotificationStore, with the RESET_NOTIFICATION_STORE action!

Store

Use the folder src/store to configure the store of redux according to your needs. There is also the possibilty to subscribe parts of the store to your localStorage. To do so check the index.ts and have a brief look at the store subscribe pattern.

store.subscribe(throttle(() => {
  const storage = store.getState() as RootState;
  const AuthStore = storage.AuthStore;

  saveState({
    AuthStore
  } as RootState);
}, 300));

Please make use of the throttle lodash-helper. JSON.parse()/JSON.stringyfy are expensive in Javascript.

Services

Anything you want to consume repetitive belongs to the services. Another word could be globalHelpers.

apicontroller -> an axois instance the can be configured. import it into your ducks to make http-verbs.
authenticationService -> can be used in conjunction with apicontroller inside of ducks to verify auth-Status

inside your duck - an example usage in thunk

import axios from '../../services/apicontroller';

public static getAuth() {
    return function (dispatch: any, getState:() => RootState): Promise<void> {
      dispatch(AuthDuck.getAuthAction());

      //return the axois object with header, pass the state by `getState()` to auth and GET the route with `get('/yourRoute')`

      return axios(getState()).get('/Authentication')
        .then((res) => {
          dispatch(AuthDuck.getAuthSuccessAction(res.data));
         })
        .catch((err: Error) => {
          /**
        });
    };
  }

There is also a whole react-router v4 part, i will explain at 50 :heart: :-)