Skip to content

Commit 58f7783

Browse files
author
Dave Bitter
committed
feat(article): add manypkg article
1 parent 8defddf commit 58f7783

File tree

4 files changed

+232
-126
lines changed

4 files changed

+232
-126
lines changed

‎content/articles/quickBits.md

Lines changed: 140 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,66 @@
11
---
22
items:
3+
- type: quick-bits
4+
body: >-
5+
As a reference, the mono-repo might look something like this:
6+
7+
```
8+
9+
packages/
10+
11+
├── foo-pkg
12+
13+
│ └── package.json
14+
15+
├── bar-pkg
16+
17+
│ └── package.json
18+
19+
├── baz-pkg
20+
21+
│ └── package.json
22+
23+
└── qux-pkg
24+
└── package.json
25+
26+
27+
```
28+
29+
In its essence, [Manypkg](https://github.com/Thinkmill/manypkg) is a linter for `package.json` files in Yarn, Bolt or pnpm mono-repos. You can use it to automate these chores. Simply run `yarn add @manypkg/cli` and you can run the following commands in your pre-commit hooks and pipelines:
30+
31+
## `manypkg check`
32+
33+
I use this to check whether all `package.json` files are alphabetically sorted, there are internal and external mismatches between packages, there are invalid dev and peer dependency relationships, invalid package names and more. You can have a look at the checks [here](https://github.com/Thinkmill/manypkg#checks).
34+
35+
## `manypkg fix`
36+
37+
This will run the check and try to automatically resolve the issues it finds. Usually, it’s a wise idea to run this command in your pre-commit hook. That way, your pipeline won’t fail mid-way because of a minor issue.
38+
39+
## `manypkg run <partial package name or directory> <script>`
40+
41+
With this command, you can run a script in a `package.json` file of a particular package in the mono-repo. Let’s say you have a package that has a script that runs a test for that package. You can then run `manypkg run your-package some-tests`.
42+
43+
## `manypkg exec <cli command>`
44+
45+
This will let you run a CLI command in each of the packages. For example, you can run `yarn manypkg exec rm -rf dist` to remove the dist folder in every package in the mono-repo.
46+
47+
## Verdict
48+
49+
Although the latter two are nice to have, the check and fix commands are vital in any mono-repo to me. It not only helps me but gives me peace of mind that a large group of developers can work on the mono-repo and we have checks and tools in place to make sure that dependencies are properly checked and fixed.
50+
51+
Since introducing this into a project I work on, we managed to easily keep everything up-to-date across the mono-repo.
52+
53+
Try it out in your project! You’ll see that it makes your life way easier.
54+
date: 2022-06-01T00:00:00.000Z
55+
slug: manypkg
56+
tags:
57+
- front-end
58+
intro: >-
59+
When building a component library as a mono-repo, you need to keep internal and external dependencies up-to-date between packages. You could do this manually once in a while, but there is a better way. Let’s have a look at Manypkg!
60+
teaserCopy: >-
61+
When building a component library as a mono-repo, you need to keep internal and external dependencies up-to-date between packages. You could do this manually once in a while, but there is a better way. Let’s have a look at Manypkg!
62+
teaserImage: /img/quick-bits/mono-repo.jpg
63+
title: Keeping dependencies in sync in your mono-repo
364
- type: quick-bits
465
body: >-
566
The idea is simple; the user scrolls. As soon as the user is over a certain threshold, you snap to the next item. We used to do this with Javascript to calculate when the user is over this threshold. We would then manually scroll to a certain position with a neat animation.
@@ -519,88 +580,88 @@ items:
519580
title: GitHub profile README
520581
- type: quick-bits
521582
body: >-
522-
## The old way
583+
## The old way
523584
524-
I used to start new projects in three different ways:
585+
I used to start new projects in three different ways:
525586
526-
* Fork another repository that fits the needs and remove what is not needed
587+
* Fork another repository that fits the needs and remove what is not needed
527588
528-
* Fork a boilerplate repository
589+
* Fork a boilerplate repository
529590
530-
* Create a new repository and copy files from another local repository
591+
* Create a new repository and copy files from another local repository
531592
532593
533-
These three do the trick but come with issues. Firstly, I don't want to fork or copy files from another repository to then remove what is not needed. Secondly, I don't want to for another repository and then squash the entire history and/or remove all branches besides the main one.
594+
These three do the trick but come with issues. Firstly, I don't want to fork or copy files from another repository to then remove what is not needed. Secondly, I don't want to for another repository and then squash the entire history and/or remove all branches besides the main one.
534595
535-
## The new way
596+
## The new way
536597
537-
Luckily, the folks over at GitHub recognize these issues and provide a solution: GitHub template repositories. So, how is this different from having a boilerplate repository? Well, they offer:
598+
Luckily, the folks over at GitHub recognize these issues and provide a solution: GitHub template repositories. So, how is this different from having a boilerplate repository? Well, they offer:
538599
539-
* A new fork includes the entire commit history of the parent repository, while a repository created from a template starts with a single commit.
600+
* A new fork includes the entire commit history of the parent repository, while a repository created from a template starts with a single commit.
540601
541-
* Commits to a fork don't appear in your contributions graph, while commits to a repository created from a template do appear in your contribution graph.
602+
* Commits to a fork don't appear in your contributions graph, while commits to a repository created from a template do appear in your contribution graph.
542603
543-
* A fork can be a temporary way to contribute code to an existing project while creating a repository from a template starts a new project quickly.
604+
* A fork can be a temporary way to contribute code to an existing project while creating a repository from a template starts a new project quickly.
544605
545606
546-
## This is how I use it
607+
## This is how I use it
547608
548-
I started off with creating a boilerplate repository. My boilerplate repository, among other things, consists of:
609+
I started off with creating a boilerplate repository. My boilerplate repository, among other things, consists of:
549610
550611
551-
* React.js
612+
* React.js
552613
553-
* Next.js
614+
* Next.js
554615
555-
* TypeScript
616+
* TypeScript
556617
557-
* Jest
618+
* Jest
558619
559-
* Enzyme
620+
* Enzyme
560621
561-
* Storybook
622+
* Storybook
562623
563-
* Husky
624+
* Husky
564625
565-
* ESLint
626+
* ESLint
566627
567-
* StyleLint
628+
* StyleLint
568629
569-
* LintStaged
630+
* LintStaged
570631
571-
* Basic styles
632+
* Basic styles
572633
573-
* Basic utilities
634+
* Basic utilities
574635
575636
576-
You see why I want to have all of this quickly for a project.
637+
You see why I want to have all of this quickly for a project.
577638
578-
![The Next Boilerplate repository](/img/articles/next-boilerplate-repository.png)*The Next Boilerplate repository*
639+
![The Next Boilerplate repository](/img/articles/next-boilerplate-repository.png)*The Next Boilerplate repository*
579640
580641
581-
Next, I went over to the settings of this repository and enabled 'Template repository'.
642+
Next, I went over to the settings of this repository and enabled 'Template repository'.
582643
583-
![The Next Boilerplate settings](/img/articles/next-boilerplate-settings.png)*The Next Boilerplate settings*
644+
![The Next Boilerplate settings](/img/articles/next-boilerplate-settings.png)*The Next Boilerplate settings*
584645
585-
That was all the setup that is required. Whenever I want to start a new project with this repository I go to the Next Boilerplate and click the green button saying 'Use this template'.
646+
That was all the setup that is required. Whenever I want to start a new project with this repository I go to the Next Boilerplate and click the green button saying 'Use this template'.
586647
587-
I then have the option to:
648+
I then have the option to:
588649
589-
* Create a new repository and name it
650+
* Create a new repository and name it
590651
591-
* Give a description
652+
* Give a description
592653
593-
* Make it public or private
654+
* Make it public or private
594655
595-
* Include all branches
656+
* Include all branches
596657
597658
598-
![The Next Boilerplate template](/img/articles/next-boilerplate-template.png)*The Next Boilerplate template*
659+
![The Next Boilerplate template](/img/articles/next-boilerplate-template.png)*The Next Boilerplate template*
599660
600661
601-
After clicking 'Create repository from template' I have a new repository with all the files, non of the history or branches and start creating right away.
662+
After clicking 'Create repository from template' I have a new repository with all the files, non of the history or branches and start creating right away.
602663
603-
Please head over to [GitHub](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template) to learn more.
664+
Please head over to [GitHub](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template) to learn more.
604665
605666
date: 2020-06-18T00:00:00.000Z
606667
slug: github-template-repositories
@@ -615,65 +676,65 @@ items:
615676

616677
- type: quick-bits
617678
body: >-
618-
The backdrop-filter property lets you apply graphical effects such as blurring or colour shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
679+
The backdrop-filter property lets you apply graphical effects such as blurring or colour shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
619680
620-
This introduces a new tool to progressively enhance your website or web -application. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) has a list of all the values you can set. Today, we will take a look at one that my co-worker and CSS wizard [Syb Wartna](https://waarissyb.nl/) and I recently used in a project. This value is blur-filter.
681+
This introduces a new tool to progressively enhance your website or web -application. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) has a list of all the values you can set. Today, we will take a look at one that my co-worker and CSS wizard [Syb Wartna](https://waarissyb.nl/) and I recently used in a project. This value is blur-filter.
621682
622-
We made a sidebar that would reveal more information after clicking on an item. It was sort of like a modal. For the past few years, there has been one technique that everybody would use. The backdrop, or overlay, would have a slightly transparent, solid, grey colour. Let’s enhance this using the new backdrop-filter!
683+
We made a sidebar that would reveal more information after clicking on an item. It was sort of like a modal. For the past few years, there has been one technique that everybody would use. The backdrop, or overlay, would have a slightly transparent, solid, grey colour. Let’s enhance this using the new backdrop-filter!
623684
624-
For this example, we are going to build a simple modal. First, we’ll create the version that just displays a backdrop:
685+
For this example, we are going to build a simple modal. First, we’ll create the version that just displays a backdrop:
625686
626-
```scss
687+
```scss
627688
628-
...
689+
...
629690
630-
&[data-overlay='true'] {
631-
&:after {
632-
content: '';
633-
z-index: 101;
634-
position: absolute;
635-
top: 0;
636-
right: 0;
637-
bottom: 0;
638-
left: 0;
639-
background-color: rgba($navy, 0.4);
640-
}
641-
}
691+
&[data-overlay='true'] {
692+
&:after {
693+
content: '';
694+
z-index: 101;
695+
position: absolute;
696+
top: 0;
697+
right: 0;
698+
bottom: 0;
699+
left: 0;
700+
background-color: rgba($navy, 0.4);
701+
}
702+
}
642703
643-
...
704+
...
644705
645-
```
706+
```
646707
647-
![default backdrop](/img/quick-bits/backdrop-default.jpg)*Default backdrop*
708+
![default backdrop](/img/quick-bits/backdrop-default.jpg)*Default backdrop*
648709
649-
Then we add one simple CSS property.
710+
Then we add one simple CSS property.
650711
651-
```scss
712+
```scss
652713
653-
...
714+
...
654715
655-
&[data-overlay='true'] {
656-
&:after {
657-
content: '';
658-
z-index: 101;
659-
position: absolute;
660-
top: 0;
661-
right: 0;
662-
bottom: 0;
663-
left: 0;
664-
background-color: rgba($navy, 0.4);
665-
backdrop-filter: blur(2px);
666-
}
667-
}
716+
&[data-overlay='true'] {
717+
&:after {
718+
content: '';
719+
z-index: 101;
720+
position: absolute;
721+
top: 0;
722+
right: 0;
723+
bottom: 0;
724+
left: 0;
725+
background-color: rgba($navy, 0.4);
726+
backdrop-filter: blur(2px);
727+
}
728+
}
668729
669-
...
730+
...
670731
671-
```
732+
```
672733
673-
![blurry backdrop](/img/quick-bits/backdrop-blur.jpg)*Blurry backdrop*
734+
![blurry backdrop](/img/quick-bits/backdrop-blur.jpg)*Blurry backdrop*
674735
675736
676-
And there we have it. It’s a simple way to quickly enhance the feel of your website or web-application. Just add this property below your default slightly transparent backdrop and you will offer this style as soon as it hits in the browser your user is using. Obviously, this effect is more dramatic with a less empty page. [View the demo here](/examples/backdrop-filter/modal/modal.html). This demo was built with the [Mirabeau boilerplate](https://github.com/mirabeau-nl/frontend-boilerplate). The source code for this demo can be found at [this Gist](https://gist.github.com/DaveBitter/dd0cc612ce87bd6f69fc379b101b9265) if you would like to have a look at the final working code.
737+
And there we have it. It’s a simple way to quickly enhance the feel of your website or web-application. Just add this property below your default slightly transparent backdrop and you will offer this style as soon as it hits in the browser your user is using. Obviously, this effect is more dramatic with a less empty page. [View the demo here](/examples/backdrop-filter/modal/modal.html). This demo was built with the [Mirabeau boilerplate](https://github.com/mirabeau-nl/frontend-boilerplate). The source code for this demo can be found at [this Gist](https://gist.github.com/DaveBitter/dd0cc612ce87bd6f69fc379b101b9265) if you would like to have a look at the final working code.
677738
678739
date: 2019-03-01T00:00:00.000Z
679740
slug: backdrop-filter

‎public/img/quick-bits/mono-repo.jpg

183 KB
Loading

0 commit comments

Comments
 (0)