-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path2021-03-28_Web-Developer-Resource-List-Part-4-fd686892b9eb.html
More file actions
1696 lines (1693 loc) · 148 KB
/
2021-03-28_Web-Developer-Resource-List-Part-4-fd686892b9eb.html
File metadata and controls
1696 lines (1693 loc) · 148 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Developer Resource List Part 4</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<article class="h-entry">
<header>
<h1 class="p-name">Web Developer Resource List Part 4</h1>
</header>
<section data-field="subtitle" class="p-summary">
A all encompassing list of tools and resources for web developers
</section>
<section data-field="body" class="e-content">
<section name="ff46" class="section section--body section--first section--last">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="e032" id="e032" class="graf graf--h3 graf--leading graf--title">Web Developer Resource List
Part 4</h3>
<p name="ad34" id="ad34" class="graf graf--p graf-after--h3">A all encompassing list of tools and
resources for web developers</p>
</div>
<div class="section-inner sectionLayout--outsetColumn">
<figure name="4dd8" id="4dd8" class="graf graf--figure graf--layoutOutsetCenter graf-after--p"><img
class="graf-image" data-image-id="1*QXSlTWm23iJGGW_R4Vslug.png" data-width="1689" data-height="636"
data-is-featured="true" src="https://cdn-images-1.medium.com/max/1200/1*QXSlTWm23iJGGW_R4Vslug.png">
</figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<h3 name="881b" id="881b" class="graf graf--h3 graf-after--figure">General resources</h3>
<ul class="postList">
<li name="a017" id="a017" class="graf graf--li graf-after--h3"><a href="http://devdocs.io/"
data-href="http://devdocs.io/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Devdocs.io</a>: Fast, offline, and free documentation browser for developers. Search
100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…</li>
<li name="9bd1" id="9bd1" class="graf graf--li graf-after--li"><a href="https://devhints.io/"
data-href="https://devhints.io/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">DevHints</a>: cheatsheets for many web technologies</li>
<li name="f774" id="f774" class="graf graf--li graf-after--li"><a
href="https://carbon.now.sh/?bg=rgba%28171,%20184,%20195,%201%29&t=seti&l=auto&ds=true&wc=true&wa=true&pv=32px&ph=32px&ln=false"
data-href="https://carbon.now.sh/?bg=rgba(171,%20184,%20195,%201)&t=seti&l=auto&ds=true&wc=true&wa=true&pv=32px&ph=32px&ln=false"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Carbon</a>: use this to
share images of your code in presentations etc</li>
<li name="c97f" id="c97f" class="graf graf--li graf-after--li"><a href="https://badgen.net/"
data-href="https://badgen.net/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Badgen</a>:</li>
<li name="2122" id="2122" class="graf graf--li graf-after--li"><a href="https://shields.io/"
data-href="https://shields.io/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Shields.io</a>:</li>
<li name="83e7" id="83e7" class="graf graf--li graf-after--li">to your documentation/readmes</li>
<li name="daff" id="daff" class="graf graf--li graf-after--li"><a
href="https://github.com/k88hudson/git-flight-rules"
data-href="https://github.com/k88hudson/git-flight-rules" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">Git Flight Rules</a>: A guide for astronauts (now, programmers using
Git) about what to do when things go wrong.</li>
<li name="1977" id="1977" class="graf graf--li graf-after--li"><a
href="https://github.com/luruke/browser-2020" data-href="https://github.com/luruke/browser-2020"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">browser-2020</a>: Things you
can do with a browser in 2020 ☕️</li>
</ul>
<h3 name="d17a" id="d17a" class="graf graf--h3 graf-after--li">📦 Finding and vetting npm packages</h3>
<ul class="postList">
<li name="9bc6" id="9bc6" class="graf graf--li graf-after--h3"><a href="https://www.pikapkg.com/"
data-href="https://www.pikapkg.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">pika</a>: A searchable catalog of modern “module” packages on npm</li>
<li name="10f9" id="10f9" class="graf graf--li graf-after--li"><a href="https://npms.io/"
data-href="https://npms.io/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">npms</a>: A better and open source search for node packages</li>
<li name="ecb9" id="ecb9" class="graf graf--li graf-after--li"><a
href="https://github.com/maticzav/emma-cli" data-href="https://github.com/maticzav/emma-cli"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">emma</a>: 📦 Terminal
assistant to find and install node packages</li>
<li name="e1df" id="e1df" class="graf graf--li graf-after--li"><a
href="https://github.com/harksys/npmvet" data-href="https://github.com/harksys/npmvet"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">npmvet</a>: A simple CLI
tool for vetting npm package versions</li>
<li name="e831" id="e831" class="graf graf--li graf-after--li"><a href="https://bundlephobia.com/"
data-href="https://bundlephobia.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Bundlephobia</a>: See the “cost” of any npm package</li>
<li name="28aa" id="28aa" class="graf graf--li graf-after--li"><a href="https://snyk.io"
data-href="https://snyk.io" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Snyk</a>: Find any security vulnerabilities for any npm package. Search their
database here: <code class="markup--code markup--li-code">https://snyk.io/vuln/npm:{package}</code>
e.g. <a href="https://snyk.io/vuln/npm:react" data-href="https://snyk.io/vuln/npm:react"
class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">https://snyk.io/vuln/npm:react</a></li>
<li name="b4da" id="b4da" class="graf graf--li graf-after--li"><a href="https://runpkg.com/"
data-href="https://runpkg.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">runpkg</a>: Explore, learn about and perform static analysis on npm packages in the
browser</li>
</ul>
<h3 name="c243" id="c243" class="graf graf--h3 graf-after--li">🎨 CSS</h3>
<ul class="postList">
<li name="dd16" id="dd16" class="graf graf--li graf-after--h3"><a
href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
data-href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">CSS Tricks “Complete Guide
to Flexbox”</a></li>
<li name="2333" id="2333" class="graf graf--li graf-after--li"><a
href="https://css-tricks.com/snippets/css/complete-guide-grid/"
data-href="https://css-tricks.com/snippets/css/complete-guide-grid/"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">CSS Tricks “Complete Guide
to Grid”</a></li>
<li name="dba6" id="dba6" class="graf graf--li graf-after--li"><a
href="http://cubic-bezier.com/#.17,.67,.83,.67" data-href="http://cubic-bezier.com/#.17,.67,.83,.67"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Cubic bezier curve
creator</a></li>
<li name="b920" id="b920" class="graf graf--li graf-after--li"><a href="http://matthewlein.com/ceaser/"
data-href="http://matthewlein.com/ceaser/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Ceaser</a>: Cubic bezier curve generator</li>
<li name="7f1c" id="7f1c" class="graf graf--li graf-after--li"><a href="https://csstriggers.com/"
data-href="https://csstriggers.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">CSS Triggers</a>: find out what CSS properties trigger Paint/Layout/Composite
renders</li>
<li name="840c" id="840c" class="graf graf--li graf-after--li"><a
href="https://websemantics.uk/tools/responsive-font-calculator/"
data-href="https://websemantics.uk/tools/responsive-font-calculator/"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Fluid-responsive font-size
calculator</a>: To scale typography smoothly across viewport widths.</li>
<li name="c480" id="c480" class="graf graf--li graf-after--li"><a href="http://browserhacks.com/"
data-href="http://browserhacks.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Browserhacks</a>: Browserhacks is an extensive list of browser specific CSS and
JavaScript hacks from all over the interwebs</li>
<li name="078f" id="078f" class="graf graf--li graf-after--li"><a
href="https://codepen.io/shshaw/full/gEiDt" data-href="https://codepen.io/shshaw/full/gEiDt"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Absolute centering</a>:
useful techniques for absolute centering in CSS</li>
<li name="1dfe" id="1dfe" class="graf graf--li graf-after--li"><a
href="https://github.com/hankchizljaw/modern-css-reset"
data-href="https://github.com/hankchizljaw/modern-css-reset"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">modern-css-reset</a>: A
bare-bones CSS reset for modern web development</li>
<li name="7cd3" id="7cd3" class="graf graf--li graf-after--li"><a href="https://cssfx.netlify.com/"
data-href="https://cssfx.netlify.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">CSSFX</a>: Beautifully simple click-to-copy CSS effects</li>
<li name="f802" id="f802" class="graf graf--li graf-after--li"><a href="https://www.shapedivider.app/"
data-href="https://www.shapedivider.app/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Shape Divider App</a></li>
</ul>
<h3 name="720f" id="720f" class="graf graf--h3 graf-after--li">CSS-in-JS</h3>
<ul class="postList">
<li name="c3a7" id="c3a7" class="graf graf--li graf-after--h3">CSS-in-JS libraries</li>
<li name="7ce0" id="7ce0" class="graf graf--li graf-after--li"><a href="https://styled-components.com"
data-href="https://styled-components.com" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Styled Components</a>: CSS-in-JS for React</li>
<li name="1381" id="1381" class="graf graf--li graf-after--li"><a href="http://emotion.sh/"
data-href="http://emotion.sh/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Emotion</a>: CSS-in-JS library</li>
<li name="eb36" id="eb36" class="graf graf--li graf-after--li"><a
href="https://github.com/callstack/linaria" data-href="https://github.com/callstack/linaria"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">linaria</a>: Zero-runtime
CSS in JS library</li>
<li name="96cd" id="96cd" class="graf graf--li graf-after--li"><a
href="https://github.com/mrmartineau/design-system-utils"
data-href="https://github.com/mrmartineau/design-system-utils"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Design System Utils</a>:
Design system framework for modern front-end projects (made by me!)</li>
<li name="2e6f" id="2e6f" class="graf graf--li graf-after--li"><a href="https://polished.js.org/"
data-href="https://polished.js.org/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Polished</a>: A lightweight toolset for writing styles in JavaScript</li>
<li name="71bb" id="71bb" class="graf graf--li graf-after--li"><a
href="https://github.com/brunobertolini/styled-by"
data-href="https://github.com/brunobertolini/styled-by" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">styled-by</a>: Simple and powerful lib to handle styled props in your
components</li>
<li name="1c73" id="1c73" class="graf graf--li graf-after--li"><a
href="https://github.com/smooth-code/xstyled" data-href="https://github.com/smooth-code/xstyled"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">xstyled</a>: Consistent
theme based CSS for styled-components 💅</li>
<li name="9bce" id="9bce" class="graf graf--li graf-after--li"><a href="https://theme-ui.com"
data-href="https://theme-ui.com" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Theme UI</a>: Build consistent, themeable React apps based on constraint-based
design principles</li>
</ul>
<h3 name="31da" id="31da" class="graf graf--h3 graf-after--li">JavaScript</h3>
<h3 name="daf1" id="daf1" class="graf graf--h3 graf-after--h3">Useful JS links</h3>
<ul class="postList">
<li name="47a7" id="47a7" class="graf graf--li graf-after--h3"><a
href="https://stackoverflow.com/a/34842087/91359"
data-href="https://stackoverflow.com/a/34842087/91359" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">JS module import/export syntax</a></li>
<li name="fae9" id="fae9" class="graf graf--li graf-after--li"><a href="http://keycode.info/"
data-href="http://keycode.info/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">JavaScript Event KeyCodes</a></li>
<li name="ad92" id="ad92" class="graf graf--li graf-after--li"><a
href="https://tylermcginnis.com/javascript-visualizer/"
data-href="https://tylermcginnis.com/javascript-visualizer/"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">JavaScript Visualizer</a>
</li>
<li name="c569" id="c569" class="graf graf--li graf-after--li"><a href="https://doesitmutate.xyz/"
data-href="https://doesitmutate.xyz/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Does it mutate?</a></li>
<li name="6cff" id="6cff" class="graf graf--li graf-after--li"><a href="https://jsperf.com/"
data-href="https://jsperf.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">jsPerf</a>: JavaScript performance playground</li>
<li name="f409" id="f409" class="graf graf--li graf-after--li"><a
href="https://github.com/mbeaudru/modern-js-cheatsheet"
data-href="https://github.com/mbeaudru/modern-js-cheatsheet"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">modern-js-cheatsheet</a>
</li>
<li name="3b43" id="3b43" class="graf graf--li graf-after--li"><a href="https://htmldom.dev/"
data-href="https://htmldom.dev/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">HTML DOM</a>: Common tasks of managing HTML DOM with vanilla JavaScript</li>
</ul>
<h3 name="c963" id="c963" class="graf graf--h3 graf-after--li">Framework agnostic packages</h3>
<h3 name="37b7" id="37b7" class="graf graf--h3 graf-after--h3">General utilities</h3>
<ul class="postList">
<li name="cb84" id="cb84" class="graf graf--li graf-after--h3"><a href="https://lodash.com"
data-href="https://lodash.com" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Lodash</a>: A modern JavaScript utility library delivering modularity, performance
& extras.</li>
<li name="ab11" id="ab11" class="graf graf--li graf-after--li"><a href="https://github.com/angus-c/just"
data-href="https://github.com/angus-c/just" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Just</a>: A library of dependency-free utilities that do just do one thing (like
Lodash but smaller)</li>
<li name="2d7b" id="2d7b" class="graf graf--li graf-after--li">Install each util independently</li>
<li name="56c9" id="56c9" class="graf graf--li graf-after--li">Read the <a
href="https://github.com/angus-c/just/blob/master/TRADEOFFS.md"
data-href="https://github.com/angus-c/just/blob/master/TRADEOFFS.md"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tradeoffs document</a> to
see if Lodash is better</li>
<li name="ab41" id="ab41" class="graf graf--li graf-after--li"><a
href="https://github.com/NickGard/tiny-get" data-href="https://github.com/NickGard/tiny-get"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tiny-get</a>: A
minimal-weight lodash.get equivalent utility</li>
<li name="ddc7" id="ddc7" class="graf graf--li graf-after--li"><a href="https://www.evt.land/"
data-href="https://www.evt.land/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">evt</a>: A type safe replacement for node’s EventEmitter</li>
<li name="423f" id="423f" class="graf graf--li graf-after--li"><a
href="https://github.com/nicbell/liteready" data-href="https://github.com/nicbell/liteready"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">liteready</a>: A lightweight
DOM ready.</li>
<li name="c9ff" id="c9ff" class="graf graf--li graf-after--li"><a
href="https://github.com/jaredhanson/passport" data-href="https://github.com/jaredhanson/passport"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">passport</a>: Simple,
unobtrusive authentication for Node.js</li>
<li name="88af" id="88af" class="graf graf--li graf-after--li"><a
href="https://github.com/desandro/get-size" data-href="https://github.com/desandro/get-size"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">get-size</a>: Get the size
of elements</li>
<li name="a646" id="a646" class="graf graf--li graf-after--li"><a
href="https://github.com/appalaszynski/length.js"
data-href="https://github.com/appalaszynski/length.js" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">length.js</a>: Library for length units conversion</li>
<li name="8289" id="8289" class="graf graf--li graf-after--li"><a
href="https://github.com/saschageyer/action-outside"
data-href="https://github.com/saschageyer/action-outside" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">action-outside</a>: Invoke a callback function when clicked or tabbed
outside one or multiple DOM elements</li>
<li name="2bda" id="2bda" class="graf graf--li graf-after--li"><a
href="https://github.com/bfred-it/select-dom" data-href="https://github.com/bfred-it/select-dom"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">select-dom</a>: Lightweight
<code class="markup--code markup--li-code">querySelector</code>/<code
class="markup--code markup--li-code">All</code> wrapper that outputs an Array</li>
<li name="c626" id="c626" class="graf graf--li graf-after--li"><a
href="https://github.com/medikoo/memoizee" data-href="https://github.com/medikoo/memoizee"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">memoizee</a>: Complete
memoize/cache solution for JavaScript</li>
<li name="db36" id="db36" class="graf graf--li graf-after--li"><a
href="https://github.com/alexreardon/memoize-one"
data-href="https://github.com/alexreardon/memoize-one" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">memoize-one</a>: A memoization library which only remembers the
latest invocation</li>
<li name="84f2" id="84f2" class="graf graf--li graf-after--li"><a
href="https://github.com/jonschlinkert/kind-of" data-href="https://github.com/jonschlinkert/kind-of"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">kind-of</a>: Get the native
JavaScript type of a value, fast.</li>
<li name="cd29" id="cd29" class="graf graf--li graf-after--li"><a
href="https://github.com/felixfbecker/iterare" data-href="https://github.com/felixfbecker/iterare"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">iterare</a>: Array methods +
ES6 Iterators =</li>
<li name="f438" id="f438" class="graf graf--li graf-after--li"><a
href="https://github.com/Rich-Harris/eases-jsnext"
data-href="https://github.com/Rich-Harris/eases-jsnext" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">eases-jsnext</a>: A grab-bag of modular easing equations</li>
<li name="1799" id="1799" class="graf graf--li graf-after--li"><a
href="https://github.com/paularmstrong/normalizr"
data-href="https://github.com/paularmstrong/normalizr" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">normalizr</a>: Normalizes nested JSON according to a schema</li>
<li name="5f57" id="5f57" class="graf graf--li graf-after--li"><a
href="https://github.com/sindresorhus/lazy-value"
data-href="https://github.com/sindresorhus/lazy-value" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">lazy-value</a>: Create a lazily evaluated value</li>
<li name="d14f" id="d14f" class="graf graf--li graf-after--li"><a
href="https://github.com/planttheidea/fast-equals"
data-href="https://github.com/planttheidea/fast-equals" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">fast-equals</a>: A blazing fast equality comparison, either shallow
or deep</li>
<li name="c771" id="c771" class="graf graf--li graf-after--li"><a
href="https://github.com/planttheidea/fast-copy"
data-href="https://github.com/planttheidea/fast-copy" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">fast-copy</a>: A blazing fast deep object copier</li>
<li name="4850" id="4850" class="graf graf--li graf-after--li"><a
href="https://github.com/stipsan/compute-scroll-into-view"
data-href="https://github.com/stipsan/compute-scroll-into-view"
class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">compute-scroll-into-view</a>: Utility for calculating what should be scrolled, how
it’s scrolled is up to you</li>
<li name="a7f4" id="a7f4" class="graf graf--li graf-after--li"><a href="https://github.com/lukeed/arr"
data-href="https://github.com/lukeed/arr" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">arr</a>: A collection of tiny, highly performant Array.prototype alternatives</li>
<li name="4622" id="4622" class="graf graf--li graf-after--li"><a
href="https://github.com/fuhton/timedstorage" data-href="https://github.com/fuhton/timedstorage"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">timedstorage</a>: A library
for storing and expiring objects in window.localstorage</li>
<li name="007a" id="007a" class="graf graf--li graf-after--li"><a
href="https://github.com/stevemao/left-pad" data-href="https://github.com/stevemao/left-pad"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">left-pad</a>: String left
pad</li>
<li name="ea51" id="ea51" class="graf graf--li graf-after--li"><a
href="https://github.com/tiaanduplessis/dont-go"
data-href="https://github.com/tiaanduplessis/dont-go" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">dont-go</a>: A small client-side library with zero dependencies to
change the title and/or favicon of the page when it is inactive</li>
<li name="57da" id="57da" class="graf graf--li graf-after--li"><a
href="https://github.com/hybridables/always-done"
data-href="https://github.com/hybridables/always-done" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">always-done</a>: Handle completion and errors with elegance! Support
for async/await, promises, callbacks, streams and observables. A drop-in replacement for
async-done — pass 100% of its tests plus more</li>
<li name="a7b3" id="a7b3" class="graf graf--li graf-after--li"><a href="https://github.com/words"
data-href="https://github.com/words" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">words</a>: Linguistic javascript modules</li>
<li name="0e04" id="0e04" class="graf graf--li graf-after--li"><a
href="https://github.com/davidtheclark/no-scroll"
data-href="https://github.com/davidtheclark/no-scroll" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">no-scroll</a>: Disable scrolling on an element that would otherwise
scroll</li>
<li name="cc78" id="cc78" class="graf graf--li graf-after--li"><a
href="https://github.com/catamphetamine/libphonenumber-js"
data-href="https://github.com/catamphetamine/libphonenumber-js"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">libphonenumber-js</a>: A
simpler (and smaller) rewrite of Google Android’s libphonenumber library</li>
<li name="4a91" id="4a91" class="graf graf--li graf-after--li"><a
href="https://github.com/text-mask/text-mask" data-href="https://github.com/text-mask/text-mask"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">text-mask</a>: Input mask
for React, Angular, Ember, Vue, & plain JavaScript</li>
<li name="8909" id="8909" class="graf graf--li graf-after--li"><a href="https://github.com/vtex/msk"
data-href="https://github.com/vtex/msk" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">msk</a>: Small library to mask strings</li>
<li name="f062" id="f062" class="graf graf--li graf-after--li"><a
href="https://github.com/davidtheclark/focus-trap"
data-href="https://github.com/davidtheclark/focus-trap" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">focus-trap</a>: Trap focus within a DOM node</li>
<li name="e6d4" id="e6d4" class="graf graf--li graf-after--li"><a
href="https://github.com/jamiebuilds/tinykeys" data-href="https://github.com/jamiebuilds/tinykeys"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tinykeys</a>: A tiny (~400
B) & modern library for keybindings</li>
<li name="9900" id="9900" class="graf graf--li graf-after--li"><a
href="https://github.com/reasonink/clack" data-href="https://github.com/reasonink/clack"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">clack</a>: A modern keyboard
shortcut library written in Typescript</li>
<li name="067c" id="067c" class="graf graf--li graf-after--li"><a
href="https://github.com/reasonink/clack-react" data-href="https://github.com/reasonink/clack-react"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">clack-react</a>: React
support for @reasonink/clack</li>
<li name="a03a" id="a03a" class="graf graf--li graf-after--li"><a
href="https://github.com/ollieglass/js-humanize"
data-href="https://github.com/ollieglass/js-humanize" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">js-humanize</a>: Humanize large numbers</li>
<li name="5332" id="5332" class="graf graf--li graf-after--li"><a
href="https://github.com/peterpme/sub-in" data-href="https://github.com/peterpme/sub-in"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">sub-in</a>: 🥙 A tiny (115B)
find-and-replace utility for strings in Javascript</li>
<li name="cc9c" id="cc9c" class="graf graf--li graf-after--li"><a
href="https://github.com/zenozeng/color-hash" data-href="https://github.com/zenozeng/color-hash"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">color-hash</a>: Generate
color based on the given string (using HSL color space and BKDRHash)</li>
<li name="f973" id="f973" class="graf graf--li graf-after--li"><a href="https://github.com/zeit/title"
data-href="https://github.com/zeit/title" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">title</a>: A service for capitalizing your title properly</li>
<li name="8f05" id="8f05" class="graf graf--li graf-after--li"><a
href="https://github.com/aceakash/string-similarity"
data-href="https://github.com/aceakash/string-similarity" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">string-similarity</a>: Finds degree of similarity between two
strings, based on Dice’s Coefficient, which is mostly better than Levenshtein distance</li>
<li name="c64d" id="c64d" class="graf graf--li graf-after--li"><a
href="https://github.com/ericelliott/cuid" data-href="https://github.com/ericelliott/cuid"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">cuid</a>:
Collision-resistant ids optimized for horizontal scaling and performance</li>
<li name="a404" id="a404" class="graf graf--li graf-after--li"><a
href="https://github.com/lukeed/obj-str" data-href="https://github.com/lukeed/obj-str"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">obj-str</a>: A tiny (96B)
library for serializing Object values to Strings. Also serves as a faster & smaller drop-in
replacement for the classnames module</li>
<li name="6cf1" id="6cf1" class="graf graf--li graf-after--li"><a href="https://github.com/lukeed/clsx"
data-href="https://github.com/lukeed/clsx" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">clsx</a>: A tiny (223B) utility for constructing className strings conditionally.
Also serves as a faster & smaller drop-in replacement for the classnames module</li>
<li name="d0cf" id="d0cf" class="graf graf--li graf-after--li"><a href="https://xstate.js.org/docs"
data-href="https://xstate.js.org/docs" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">xstate</a>: State machines and statecharts for the modern web</li>
<li name="1fa5" id="1fa5" class="graf graf--li graf-after--li"><a
href="https://github.com/onury/tasktimer" data-href="https://github.com/onury/tasktimer"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tasktimer</a>: An accurate
timer utility for running periodic tasks on the given interval ticks or dates. (Node and Browser)</li>
<li name="baad" id="baad" class="graf graf--li graf-after--li"><a
href="https://github.com/rough-stuff/rough-notation"
data-href="https://github.com/rough-stuff/rough-notation" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">rough-notation</a>: Create and animate hand-drawn annotations on a
web page</li>
</ul>
<h3 name="26af" id="26af" class="graf graf--h3 graf-after--li">Async</h3>
<ul class="postList">
<li name="b393" id="b393" class="graf graf--li graf-after--h3"><a href="https://github.com/axios/axios"
data-href="https://github.com/axios/axios" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">axios</a>: Promise based HTTP client for the browser and node.js</li>
<li name="142b" id="142b" class="graf graf--li graf-after--li"><a
href="https://github.com/softonic/axios-retry" data-href="https://github.com/softonic/axios-retry"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">axios-retry</a>: Axios
plugin that intercepts failed requests and retries them whenever possible</li>
<li name="6810" id="6810" class="graf graf--li graf-after--li"><a
href="https://github.com/developit/redaxios" data-href="https://github.com/developit/redaxios"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">redaxios</a>: The Axios API,
as an 800 byte Fetch wrapper</li>
<li name="7bf3" id="7bf3" class="graf graf--li graf-after--li"><a
href="https://github.com/lquixada/cross-fetch" data-href="https://github.com/lquixada/cross-fetch"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">cross-fetch</a>: Universal
WHATWG Fetch API for Node, Browsers and React Native</li>
<li name="c0ce" id="c0ce" class="graf graf--li graf-after--li"><a
href="https://github.com/asfktz/Awaity.js" data-href="https://github.com/asfktz/Awaity.js"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">awaity</a>: A functional,
lightweight alternative to bluebird.js, built with <code
class="markup--code markup--li-code">async</code> / <code
class="markup--code markup--li-code">await</code> in mind</li>
<li name="9147" id="9147" class="graf graf--li graf-after--li"><a
href="https://github.com/muicss/loadjs" data-href="https://github.com/muicss/loadjs"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">loadjs</a>: A tiny async
loader / dependency manager for modern browsers (789 bytes)</li>
<li name="2114" id="2114" class="graf graf--li graf-after--li"><a
href="https://github.com/scopsy/await-to-js" data-href="https://github.com/scopsy/await-to-js"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">await-to-js</a>: Async await
wrapper for easy error handling without try-catch</li>
</ul>
<h3 name="6806" id="6806" class="graf graf--h3 graf-after--li">Node</h3>
<ul class="postList">
<li name="9d02" id="9d02" class="graf graf--li graf-after--h3"><a href="https://www.fastify.io/"
data-href="https://www.fastify.io/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Fastify</a>: Fast and low overhead web framework, for Node.js</li>
<li name="4a0e" id="4a0e" class="graf graf--li graf-after--li"><a href="https://expressjs.com"
data-href="https://expressjs.com" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Express</a></li>
<li name="f082" id="f082" class="graf graf--li graf-after--li"><a
href="https://github.com/helmetjs/helmet" data-href="https://github.com/helmetjs/helmet"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">helmet</a>: Help secure
Express apps with various HTTP headers</li>
<li name="0b93" id="0b93" class="graf graf--li graf-after--li"><a
href="https://github.com/antongolub/reqresnext" data-href="https://github.com/antongolub/reqresnext"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">reqresnext</a>: Tiny helper
for express middleware testing</li>
<li name="b28a" id="b28a" class="graf graf--li graf-after--li"><a
href="https://github.com/krakenjs/lusca" data-href="https://github.com/krakenjs/lusca"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">lusca</a>: Application
security for express apps</li>
<li name="a078" id="a078" class="graf graf--li graf-after--li"><a
href="https://github.com/expressjs/cookie-session"
data-href="https://github.com/expressjs/cookie-session" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">cookie-session</a>: Simple cookie-based session middleware</li>
<li name="ef4f" id="ef4f" class="graf graf--li graf-after--li"><a
href="https://github.com/i0natan/nodebestpractices"
data-href="https://github.com/i0natan/nodebestpractices" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">nodebestpractices</a>: The largest Node.JS best practices list.
Curated from the top ranked articles and always updated</li>
<li name="02db" id="02db" class="graf graf--li graf-after--li"><a
href="https://github.com/zeeshanu/dumper.js" data-href="https://github.com/zeeshanu/dumper.js"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">dumper.js</a>: A better and
pretty variable inspector for your Node.js applications</li>
<li name="ba2e" id="ba2e" class="graf graf--li graf-after--li"><a
href="https://github.com/gajus/http-terminator" data-href="https://github.com/gajus/http-terminator"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">http-terminator</a>:
Gracefully terminates HTTP(S) server</li>
<li name="738b" id="738b" class="graf graf--li graf-after--li"><a href="https://github.com/uuidjs/uuid"
data-href="https://github.com/uuidjs/uuid" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">uuid</a>: Generate RFC-compliant UUIDs in JavaScript</li>
<li name="6310" id="6310" class="graf graf--li graf-after--li"><a
href="https://github.com/jshttp/http-errors" data-href="https://github.com/jshttp/http-errors"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">http-errors</a>: Create HTTP
Errors</li>
<li name="73b9" id="73b9" class="graf graf--li graf-after--li"><a href="https://github.com/hapijs/boom"
data-href="https://github.com/hapijs/boom" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">boom</a>: HTTP-friendly error objects</li>
<li name="560b" id="560b" class="graf graf--li graf-after--li"><a
href="https://github.com/denoland/deno" data-href="https://github.com/denoland/deno"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">deno</a>: A secure
JavaScript and TypeScript runtime</li>
<li name="32e7" id="32e7" class="graf graf--li graf-after--li"><a
href="https://github.com/micromatch/nanomatch" data-href="https://github.com/micromatch/nanomatch"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">nanomatch</a>: Fast, minimal
glob matcher for node.js. Similar to micromatch, minimatch and multimatch, but without support for
extended globs (extglobs), posix brackets or braces, and with complete Bash 4.3 wildcard support:
(“*”, “**”, and “?”)</li>
<li name="9286" id="9286" class="graf graf--li graf-after--li"><a
href="https://github.com/sindresorhus/yn" data-href="https://github.com/sindresorhus/yn"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">yn</a>: Parse yes/no like
values</li>
<li name="1238" id="1238" class="graf graf--li graf-after--li"><a href="https://github.com/AvianFlu/ncp"
data-href="https://github.com/AvianFlu/ncp" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">ncp</a>: Asynchronous recursive file copying with Node.js</li>
</ul>
<h4 name="3606" id="3606" class="graf graf--h4 graf-after--li">Logging</h4>
<ul class="postList">
<li name="b21b" id="b21b" class="graf graf--li graf-after--h4"><a href="https://github.com/pinojs/pino"
data-href="https://github.com/pinojs/pino" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">pino</a>: 🌲 super fast, all natural json logger 🌲</li>
<li name="dcee" id="dcee" class="graf graf--li graf-after--li"><a
href="https://github.com/bevry/caterpillar" data-href="https://github.com/bevry/caterpillar"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">caterpillar</a>: Caterpillar
is the ultimate logging system for Deno, Node.js, and Web Browsers</li>
<li name="eef2" id="eef2" class="graf graf--li graf-after--li"><a
href="https://github.com/cabinjs/cabin" data-href="https://github.com/cabinjs/cabin"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">cabin</a>: Cabin is the best
JavaScript and Node.js logging service and logging npm package</li>
</ul>
<h3 name="d0e2" id="d0e2" class="graf graf--h3 graf-after--li">Responsive</h3>
<ul class="postList">
<li name="e235" id="e235" class="graf graf--li graf-after--h3"><a
href="https://github.com/pauldijou/responsive-watch"
data-href="https://github.com/pauldijou/responsive-watch" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">responsive-watch</a>: Watch some media queries and react when they
change</li>
<li name="6720" id="6720" class="graf graf--li graf-after--li"><a
href="https://github.com/robb0wen/tornis" data-href="https://github.com/robb0wen/tornis"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tornis</a>: Tornis helps you
watch and respond to changes in your browser’s viewport 🌲</li>
<li name="fadc" id="fadc" class="graf graf--li graf-after--li"><a
href="https://github.com/ryanve/actual" data-href="https://github.com/ryanve/actual"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">actual</a>: Determine actual
CSS media query breakpoints via JavaScript</li>
</ul>
<h3 name="d148" id="d148" class="graf graf--h3 graf-after--li">Media and Images</h3>
<ul class="postList">
<li name="e520" id="e520" class="graf graf--li graf-after--h3"><a
href="https://github.com/awcross/images-loaded" data-href="https://github.com/awcross/images-loaded"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">images-loaded</a>: Wait for
images to load using promises. No dependencies.</li>
<li name="7bd6" id="7bd6" class="graf graf--li graf-after--li"><a
href="https://github.com/aFarkas/lazysizes" data-href="https://github.com/aFarkas/lazysizes"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">lazysizes</a>: High
performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that
detects any visibility changes triggered through user interaction, CSS or JavaScript without
configuration.</li>
</ul>
<h4 name="ed48" id="ed48" class="graf graf--h4 graf-after--li">Image services</h4>
<ul class="postList">
<li name="3e33" id="3e33" class="graf graf--li graf-after--h4"><a href="https://github.com/lovell/sharp"
data-href="https://github.com/lovell/sharp" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">sharp</a>: High performance Node.js image processing, the fastest module to resize
JPEG, PNG, WebP and TIFF images. Uses the libvips library.</li>
<li name="2751" id="2751" class="graf graf--li graf-after--li"><a href="https://www.imgix.com/"
data-href="https://www.imgix.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">IMGIX</a>: Real-time image processing and image CDN</li>
</ul>
<h3 name="3ff4" id="3ff4" class="graf graf--h3 graf-after--li">Date</h3>
<ul class="postList">
<li name="0dac" id="0dac" class="graf graf--li graf-after--h3"><a href="https://date-fns.org/"
data-href="https://date-fns.org/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">date-fns</a>: Modern JavaScript date utility library</li>
<li name="d431" id="d431" class="graf graf--li graf-after--li"><a
href="https://github.com/lukeed/tinydate" data-href="https://github.com/lukeed/tinydate"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tinydate</a>: A tiny (337B)
reusable date formatter. Extremely fast!</li>
<li name="7966" id="7966" class="graf graf--li graf-after--li"><a
href="https://github.com/aweary/tinytime" data-href="https://github.com/aweary/tinytime"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tinytime</a>: ⏰ A
straightforward date and time formatter in <1kb</li>
</ul>
<h3 name="030f" id="030f" class="graf graf--h3 graf-after--li">Scrolling</h3>
<ul class="postList">
<li name="fa73" id="fa73" class="graf graf--li graf-after--h3"><a
href="https://github.com/jonataswalker/scroll-watcher"
data-href="https://github.com/jonataswalker/scroll-watcher" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">scroll-watcher</a></li>
<li name="9680" id="9680" class="graf graf--li graf-after--li"><a
href="https://github.com/dollarshaveclub/scrolldir"
data-href="https://github.com/dollarshaveclub/scrolldir" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">scrolldir</a>: Leverage Vertical Scroll Direction with CSS</li>
</ul>
<h3 name="8b02" id="8b02" class="graf graf--h3 graf-after--li">Carousels</h3>
<ul class="postList">
<li name="eac9" id="eac9" class="graf graf--li graf-after--h3"><a href="https://flickity.metafizzy.co/"
data-href="https://flickity.metafizzy.co/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Flickity</a></li>
<li name="ae6b" id="ae6b" class="graf graf--li graf-after--li"><a href="http://idangero.us/swiper/"
data-href="http://idangero.us/swiper/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Swiper</a></li>
</ul>
<h3 name="739a" id="739a" class="graf graf--h3 graf-after--li">Animation</h3>
<ul class="postList">
<li name="afba" id="afba" class="graf graf--li graf-after--h3"><a
href="https://github.com/Rich-Harris/ramjet" data-href="https://github.com/Rich-Harris/ramjet"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">ramjet</a>: Morph DOM
elements from one state to another with smooth animations and transitions</li>
<li name="75dd" id="75dd" class="graf graf--li graf-after--li"><a
href="https://github.com/juliangarnier/anime" data-href="https://github.com/juliangarnier/anime"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">anime</a>: JavaScript
Animation Engine</li>
<li name="afb5" id="afb5" class="graf graf--li graf-after--li"><a href="https://greensock.com/"
data-href="https://greensock.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">GSAP</a>:the standard for JavaScript HTML5 animation | GreenSock</li>
<li name="afe9" id="afe9" class="graf graf--li graf-after--li"><a
href="https://micku7zu.github.io/vanilla-tilt.js/index.html"
data-href="https://micku7zu.github.io/vanilla-tilt.js/index.html"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Vanilla-tilt.js</a>: A
smooth 3D tilt javascript library forked from Tilt.js</li>
</ul>
<h3 name="466e" id="466e" class="graf graf--h3 graf-after--li">Web workers</h3>
<ul class="postList">
<li name="a0e3" id="a0e3" class="graf graf--li graf-after--h3"><a
href="https://github.com/developit/workerize" data-href="https://github.com/developit/workerize"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">workerize</a>: Run a module
in a Web Worker</li>
<li name="58de" id="58de" class="graf graf--li graf-after--li"><a
href="https://github.com/developit/greenlet" data-href="https://github.com/developit/greenlet"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">greenlet</a>: Move an async
function into its own thread. A simplified single-function version of workerize.</li>
</ul>
<h3 name="f7a9" id="f7a9" class="graf graf--h3 graf-after--li">Immutable</h3>
<ul class="postList">
<li name="ae2e" id="ae2e" class="graf graf--li graf-after--h3"><a
href="https://github.com/mweststrate/immer" data-href="https://github.com/mweststrate/immer"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">immer</a>: Create the next
immutable state tree by simply modifying the current tree</li>
<li name="0823" id="0823" class="graf graf--li graf-after--li"><a
href="https://github.com/immerjs/use-immer" data-href="https://github.com/immerjs/use-immer"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">use-immer</a>: Use immer to
drive state with a React hooks</li>
<li name="8bcb" id="8bcb" class="graf graf--li graf-after--li"><a
href="https://github.com/planttheidea/unchanged"
data-href="https://github.com/planttheidea/unchanged" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">unchanged</a>: A tiny, fast, unopinionated handler for updating JS
objects and arrays immutably</li>
<li name="668c" id="668c" class="graf graf--li graf-after--li"><a
href="https://github.com/rtfeldman/seamless-immutable"
data-href="https://github.com/rtfeldman/seamless-immutable" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">seamless-immutable</a>: Immutable data structures for JavaScript
which are backwards-compatible with normal JS Arrays and Objectsseamless-immutable`</li>
<li name="513e" id="513e" class="graf graf--li graf-after--li"><a
href="https://github.com/jaredpalmer/mutik" data-href="https://github.com/jaredpalmer/mutik"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">mutik</a>: A tiny (495B)
immutable state management library based on Immer</li>
</ul>
<h3 name="b36d" id="b36d" class="graf graf--h3 graf-after--li">Typography</h3>
<ul class="postList">
<li name="a2ed" id="a2ed" class="graf graf--li graf-after--h3"><a
href="https://github.com/rikschennink/fitty" data-href="https://github.com/rikschennink/fitty"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">fitty</a>: Makes text fit
perfectly</li>
</ul>
<h3 name="dfc9" id="dfc9" class="graf graf--h3 graf-after--li">Polyfills</h3>
<ul class="postList">
<li name="dfbc" id="dfbc" class="graf graf--li graf-after--h3"><a
href="https://github.com/que-etc/resize-observer-polyfill"
data-href="https://github.com/que-etc/resize-observer-polyfill"
class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">resize-observer-polyfill</a>:A polyfill for the Resize Observer API</li>
</ul>
<h3 name="efe8" id="efe8" class="graf graf--h3 graf-after--li">⚛️ React</h3>
<p name="b3f5" id="b3f5" class="graf graf--p graf-after--h3"><a href="https://reactjs.org"
data-href="https://reactjs.org" class="markup--anchor markup--p-anchor" rel="noopener"
target="_blank">reactjs.org</a></p>
<ul class="postList">
<li name="6981" id="6981" class="graf graf--li graf-after--p"><a
href="https://github.com/facebook/create-react-app"
data-href="https://github.com/facebook/create-react-app" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">create-react-app</a>: Create React apps with no build configuration
</li>
<li name="f4dc" id="f4dc" class="graf graf--li graf-after--li"><a
href="https://github.com/timarney/react-app-rewired"
data-href="https://github.com/timarney/react-app-rewired" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">react-app-rewired</a>: Override create-react-app webpack configs
without ejecting</li>
<li name="4438" id="4438" class="graf graf--li graf-after--li"><a
href="https://github.com/vasanthk/react-bits" data-href="https://github.com/vasanthk/react-bits"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-bits</a>: ✨ React
patterns, techniques, tips and tricks ✨</li>
</ul>
<h3 name="b1c8" id="b1c8" class="graf graf--h3 graf-after--li">React-specific libs:</h3>
<ul class="postList">
<li name="d42a" id="d42a" class="graf graf--li graf-after--h3"><a
href="https://github.com/renatorib/react-powerplug"
data-href="https://github.com/renatorib/react-powerplug" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">react-powerplug</a>: Renderless Containers</li>
<li name="2321" id="2321" class="graf graf--li graf-after--li"><a
href="https://github.com/jaredpalmer/formik" data-href="https://github.com/jaredpalmer/formik"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">formik</a>: Build forms in
React, without the tears 😭</li>
<li name="ce59" id="ce59" class="graf graf--li graf-after--li"><a
href="https://github.com/ReactTraining/react-router"
data-href="https://github.com/ReactTraining/react-router" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">react-router</a>: Declarative routing for React</li>
<li name="90e0" id="90e0" class="graf graf--li graf-after--li"><a href="https://reach.tech/router"
data-href="https://reach.tech/router" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Reach Router</a></li>
<li name="cd0c" id="cd0c" class="graf graf--li graf-after--li"><a href="https://react-fns.netlify.com/"
data-href="https://react-fns.netlify.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">react-fns</a>: React Components for common Web APIs</li>
<li name="692b" id="692b" class="graf graf--li graf-after--li"><a
href="https://github.com/tajo/react-portal" data-href="https://github.com/tajo/react-portal"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-portal</a>: React
component for transportation of modals, lightboxes, loading bars… to document.body</li>
<li name="c4f6" id="c4f6" class="graf graf--li graf-after--li"><a
href="https://github.com/stereobooster/react-ideal-image"
data-href="https://github.com/stereobooster/react-ideal-image"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-ideal-image</a>: 🖼️
An Almost Ideal React Image Component</li>
<li name="07a5" id="07a5" class="graf graf--li graf-after--li"><a
href="https://github.com/pedronauck/react-adopt"
data-href="https://github.com/pedronauck/react-adopt" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">react-adopt</a>: Compose render props components like a pro</li>
<li name="cceb" id="cceb" class="graf graf--li graf-after--li"><a
href="https://github.com/paypal/downshift" data-href="https://github.com/paypal/downshift"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">downshift</a></li>
<li name="e13b" id="e13b" class="graf graf--li graf-after--li"><a
href="https://github.com/jamiebuilds/react-loadable"
data-href="https://github.com/jamiebuilds/react-loadable" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">react-loadable</a>: A higher order component for loading components
with promises</li>
<li name="89ea" id="89ea" class="graf graf--li graf-after--li"><a
href="https://github.com/tajo/react-portal" data-href="https://github.com/tajo/react-portal"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-portal</a>: React
component for transportation of modals, lightboxes, loading bars… to document.body</li>
<li name="3592" id="3592" class="graf graf--li graf-after--li"><a
href="https://github.com/lingui/js-lingui" data-href="https://github.com/lingui/js-lingui"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">js-lingui: 🌍📖</a>: A
readable, automated, and optimized (5 kb) internationalization (Intl / i18n) for JavaScript</li>
<li name="f2c0" id="f2c0" class="graf graf--li graf-after--li"><a
href="https://github.com/u-wave/react-mq" data-href="https://github.com/u-wave/react-mq"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-mq</a>: Barebones CSS
media query component for React, ~560 bytes</li>
<li name="34ac" id="34ac" class="graf graf--li graf-after--li"><a
href="https://github.com/ReactTraining/react-media"
data-href="https://github.com/ReactTraining/react-media" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">react-media</a>: CSS media queries for React. This is SSR compatible
as well.</li>
<li name="d811" id="d811" class="graf graf--li graf-after--li"><a
href="https://github.com/andrewbranch/merge-props"
data-href="https://github.com/andrewbranch/merge-props" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">merge-props</a>: Merges className, style, and event handler props for
React elements</li>
<li name="0415" id="0415" class="graf graf--li graf-after--li"><a
href="https://github.com/thearnica/react-uid" data-href="https://github.com/thearnica/react-uid"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-uid</a>: Render-less
container for generating UID for a11y, consistent react key, and any other good reason 🦄</li>
<li name="2402" id="2402" class="graf graf--li graf-after--li"><a href="https://github.com/lukeed/clsx"
data-href="https://github.com/lukeed/clsx" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">clsx</a>: A tiny (229B) utility for constructing <code
class="markup--code markup--li-code">className</code> strings conditionally</li>
<li name="f336" id="f336" class="graf graf--li graf-after--li"><a href="https://www.framer.com/motion/"
data-href="https://www.framer.com/motion/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Framer Motion</a>: An open source React library to power production-ready
animations. Design fluid animations for the web, across desktop and mobile</li>
<li name="665d" id="665d" class="graf graf--li graf-after--li"><a
href="https://github.com/dequelabs/react-axe" data-href="https://github.com/dequelabs/react-axe"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-axe</a>: Accessibility
auditing for React.js applications</li>
<li name="a7bc" id="a7bc" class="graf graf--li graf-after--li"><a
href="https://github.com/geobde/use-click-away" data-href="https://github.com/geobde/use-click-away"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">use-click-away</a>: React
hook to detect click or touch events outside an element</li>
<li name="7220" id="7220" class="graf graf--li graf-after--li"><a
href="https://github.com/clauderic/react-tiny-virtual-list"
data-href="https://github.com/clauderic/react-tiny-virtual-list"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-tiny-virtual-list</a>:
A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable
heights/widths, sticky items, scrolling to index, and more!</li>
<li name="344f" id="344f" class="graf graf--li graf-after--li"><a
href="https://github.com/everweij/react-laag" data-href="https://github.com/everweij/react-laag"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-laag</a>: Primitives
to build things like tooltips, dropdown menu’s and popovers in React</li>
<li name="d70c" id="d70c" class="graf graf--li graf-after--li"><a
href="https://github.com/react-dnd/react-dnd" data-href="https://github.com/react-dnd/react-dnd"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-dnd</a>: Drag and Drop
for React</li>
</ul>
<h4 name="2a65" id="2a65" class="graf graf--h4 graf-after--li">React Hooks</h4>
<ul class="postList">
<li name="43d9" id="43d9" class="graf graf--li graf-after--h4"><a href="https://github.com/zeit/swr"
data-href="https://github.com/zeit/swr" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">swr</a>: React Hooks library for remote data fetching</li>
<li name="bfab" id="bfab" class="graf graf--li graf-after--li"><a href="https://www.hooks.guide/"
data-href="https://www.hooks.guide/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Hooks.Guide</a>: Collection of React hooks curated by the community</li>
<li name="c7e8" id="c7e8" class="graf graf--li graf-after--li"><a href="https://usehooks.com/"
data-href="https://usehooks.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">useHooks</a>: Easy to understand React Hook recipes</li>
<li name="2366" id="2366" class="graf graf--li graf-after--li"><a
href="https://github.com/beautifulinteractions/beautiful-react-hooks"
data-href="https://github.com/beautifulinteractions/beautiful-react-hooks"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">beautiful-react-hooks</a>:
🔥A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks
development 🔥</li>
<li name="f483" id="f483" class="graf graf--li graf-after--li"><a
href="https://github.com/GoogleChromeLabs/react-adaptive-hooks"
data-href="https://github.com/GoogleChromeLabs/react-adaptive-hooks"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">react-adaptive-hooks</a>:
Deliver experiences best suited to a user’s device and network constraints</li>
</ul>
<h3 name="67c5" id="67c5" class="graf graf--h3 graf-after--li">State management</h3>
<ul class="postList">
<li name="0040" id="0040" class="graf graf--li graf-after--h3"><a
href="https://github.com/react-spring/zustand" data-href="https://github.com/react-spring/zustand"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">zustand</a>: 🐻 Bear
necessities for state management in React</li>
<li name="9317" id="9317" class="graf graf--li graf-after--li"><a
href="https://github.com/reduxjs/redux" data-href="https://github.com/reduxjs/redux"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">redux</a>: Predictable state
container for JavaScript apps</li>
<li name="9942" id="9942" class="graf graf--li graf-after--li"><a
href="https://github.com/reduxjs/reselect" data-href="https://github.com/reduxjs/reselect"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">reselect</a>: Selector
library for Redux</li>
<li name="2631" id="2631" class="graf graf--li graf-after--li"><a
href="https://github.com/redux-saga/redux-saga" data-href="https://github.com/redux-saga/redux-saga"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">redux-saga</a>: An
alternative side effect model for Redux apps</li>
<li name="8f4f" id="8f4f" class="graf graf--li graf-after--li"><a
href="https://github.com/afitiskin/redux-saga-routines"
data-href="https://github.com/afitiskin/redux-saga-routines"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">redux-saga-routines</a>:
Routines for redux-saga</li>
<li name="22ea" id="22ea" class="graf graf--li graf-after--li"><a
href="https://github.com/reduxjs/redux-thunk" data-href="https://github.com/reduxjs/redux-thunk"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">redux-thunk</a>: Thunk
middleware for Redux</li>
<li name="37ce" id="37ce" class="graf graf--li graf-after--li"><a
href="https://github.com/brillout/awesome-redux"
data-href="https://github.com/brillout/awesome-redux" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">awesome-redux</a>: Catalog of Redux Libraries & Learning Material
</li>
<li name="bd0c" id="bd0c" class="graf graf--li graf-after--li"><a
href="https://github.com/ForsakenHarmony/parket"
data-href="https://github.com/ForsakenHarmony/parket" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">parket</a>: A library to manage application state, heavily inspired
by mobx-state-tree</li>
<li name="af19" id="af19" class="graf graf--li graf-after--li"><a
href="https://github.com/jamiebuilds/unstated" data-href="https://github.com/jamiebuilds/unstated"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">unstated</a>: State so
simple, it goes without saying</li>
<li name="a530" id="a530" class="graf graf--li graf-after--li"><a
href="https://github.com/zhujinxuan/mergeState" data-href="https://github.com/zhujinxuan/mergeState"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">mergeState</a>: How to Stop
Worrying and Use Nested Object/Array in React/Redux States</li>
<li name="aa4c" id="aa4c" class="graf graf--li graf-after--li"><a
href="https://github.com/zerobias/effector" data-href="https://github.com/zerobias/effector"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">effector</a>: The state
manager ☄️</li>
<li name="617c" id="617c" class="graf graf--li graf-after--li"><a
href="https://github.com/facebookexperimental/Recoil"
data-href="https://github.com/facebookexperimental/Recoil" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">Recoil</a>: Recoil is an experimental state management library for
React apps. It provides several capabilities that are difficult to achieve with React alone, while
being compatible with the newest features of React.</li>
</ul>
<h3 name="9866" id="9866" class="graf graf--h3 graf-after--li">Server-rendered React</h3>
<ul class="postList">
<li name="ea38" id="ea38" class="graf graf--li graf-after--h3"><a href="https://nextjs.org/"
data-href="https://nextjs.org/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Next.js</a> (<a href="https://github.com/zeit/next.js"
data-href="https://github.com/zeit/next.js" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">repo</a>): — Framework for server-rendered or statically-exported React apps</li>
<li name="50fe" id="50fe" class="graf graf--li graf-after--li"><a
href="https://github.com/zeit/next-plugins" data-href="https://github.com/zeit/next-plugins"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">next-plugins</a></li>
</ul>
<h3 name="55a2" id="55a2" class="graf graf--h3 graf-after--li">Static site generators</h3>
<ul class="postList">
<li name="4b57" id="4b57" class="graf graf--li graf-after--h3"><a href="https://www.gatsbyjs.org/"
data-href="https://www.gatsbyjs.org/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Gatsby</a>: Blazing fast static site generator for React</li>
</ul>
<h3 name="2e68" id="2e68" class="graf graf--h3 graf-after--li">Microservices/Serverless</h3>
<ul class="postList">
<li name="54d3" id="54d3" class="graf graf--li graf-after--h3"><a href="https://github.com/zeit/micro"
data-href="https://github.com/zeit/micro" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">micro</a></li>
<li name="e0f7" id="e0f7" class="graf graf--li graf-after--li"><a
href="https://github.com/amio/awesome-micro" data-href="https://github.com/amio/awesome-micro"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">awesome-micro</a></li>
</ul>
<h3 name="bbfa" id="bbfa" class="graf graf--h3 graf-after--li">TypeScript</h3>
<p name="63f8" id="63f8" class="graf graf--p graf-after--h3"><a href="https://www.typescriptlang.org/"
data-href="https://www.typescriptlang.org/" class="markup--anchor markup--p-anchor" rel="noopener"
target="_blank">typescriptlang.org</a></p>
<ul class="postList">
<li name="08dd" id="08dd" class="graf graf--li graf-after--p"><a
href="https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript"
data-href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">What’s new in
TypeScript</a>: Microsoft/TypeScript Wiki</li>
<li name="d932" id="d932" class="graf graf--li graf-after--li"><a
href="https://basarat.gitbooks.io/typescript/" data-href="https://basarat.gitbooks.io/typescript/"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">TypeScript Deep Dive</a>
</li>
<li name="5ca2" id="5ca2" class="graf graf--li graf-after--li"><a
href="https://blog.mariusschulz.com/series/typescript-evolution"
data-href="https://blog.mariusschulz.com/series/typescript-evolution"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">TypeScript Evolution</a>
</li>
<li name="d151" id="d151" class="graf graf--li graf-after--li"><a
href="https://transform.now.sh/json-to-ts-interface/"
data-href="https://transform.now.sh/json-to-ts-interface/" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">JSON to Typescript Interface</a></li>
<li name="ddb6" id="ddb6" class="graf graf--li graf-after--li"><a
href="https://github.com/sw-yx/react-typescript-cheatsheet"
data-href="https://github.com/sw-yx/react-typescript-cheatsheet"
class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">react-typescript-cheatsheet</a>: a cheatsheet for react users using typescript with
react for the first (or nth!) time</li>
<li name="92ad" id="92ad" class="graf graf--li graf-after--li"><a
href="https://github.com/labs42io/clean-code-typescript"
data-href="https://github.com/labs42io/clean-code-typescript"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">clean-code-typescript</a>:
Clean Code concepts adapted for TypeScript</li>
</ul>
<h3 name="4633" id="4633" class="graf graf--h3 graf-after--li">Command Line, Terminal and shells</h3>
<p name="554e" id="554e" class="graf graf--p graf-after--h3"><a href="https://fishshell.com/"
data-href="https://fishshell.com/" class="markup--anchor markup--p-anchor" rel="noopener"
target="_blank">Fish shell</a>: The user-friendly command line shell</p>
<ul class="postList">
<li name="ecab" id="ecab" class="graf graf--li graf-after--p"><a
href="https://github.com/mrmartineau/fish" data-href="https://github.com/mrmartineau/fish"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">My fish_config</a></li>
<li name="3997" id="3997" class="graf graf--li graf-after--li"><a
href="https://github.com/jorgebucaran/awesome-fish"
data-href="https://github.com/jorgebucaran/awesome-fish" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">awesome-fish</a>: A curated list of packages, prompts, and resources
for the amazing fish shell</li>
<li name="98c8" id="98c8" class="graf graf--li graf-after--li"><a href="https://starship.rs/"
data-href="https://starship.rs/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Starship</a>: Cross-Shell Prompt</li>
<li name="67fd" id="67fd" class="graf graf--li graf-after--li"><a
href="https://github.com/IlanCosman/tide" data-href="https://github.com/IlanCosman/tide"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">tide</a>: 🌊 A modern prompt
manager for the Fish shell</li>
</ul>
<h3 name="64ad" id="64ad" class="graf graf--h3 graf-after--li">Creating CLI apps</h3>
<ul class="postList">
<li name="01dc" id="01dc" class="graf graf--li graf-after--h3"><a
href="https://github.com/infinitered/gluegun" data-href="https://github.com/infinitered/gluegun"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">gluegun</a>: A delightful
toolkit for building Node-powered CLIs</li>
<li name="8688" id="8688" class="graf graf--li graf-after--li"><a
href="https://github.com/SBoudrias/Inquirer.js" data-href="https://github.com/SBoudrias/Inquirer.js"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">inquirer</a>: A collection
of common interactive command line user interfaces</li>
<li name="594a" id="594a" class="graf graf--li graf-after--li"><a
href="https://github.com/tj/commander.js" data-href="https://github.com/tj/commander.js"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">commander</a>: node.js
command-line interfaces made easy</li>
<li name="4371" id="4371" class="graf graf--li graf-after--li"><a href="https://github.com/lukeed/sade"
data-href="https://github.com/lukeed/sade" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">sade</a>: Sade is a small but powerful tool for building command-line interface
(CLI) applications for Node.js that are fast, responsive, and helpful!</li>
</ul>
<h3 name="ee7a" id="ee7a" class="graf graf--h3 graf-after--li">CLI apps</h3>
<ul class="postList">
<li name="3944" id="3944" class="graf graf--li graf-after--h3"><a href="https://hub.github.com/"
data-href="https://hub.github.com/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">hub</a>: hub is an extension to command-line git that helps you do everyday GitHub
tasks without ever leaving the terminal</li>
<li name="5d4e" id="5d4e" class="graf graf--li graf-after--li"><a href="https://github.com/zeit/serve"
data-href="https://github.com/zeit/serve" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">serve</a>: Static file serving and directory listing</li>
<li name="4548" id="4548" class="graf graf--li graf-after--li"><a
href="https://github.com/agarrharr/awesome-cli-apps"
data-href="https://github.com/agarrharr/awesome-cli-apps" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">awesome-cli-apps</a>: A curated list of command line apps</li>
<li name="6d80" id="6d80" class="graf graf--li graf-after--li"><a
href="https://github.com/SpaceVim/SpaceVim" data-href="https://github.com/SpaceVim/SpaceVim"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">SpaceVim</a>: A
community-driven modular vim distribution — The ultimate vim configuration</li>
</ul>
<h3 name="59e9" id="59e9" class="graf graf--h3 graf-after--li">Tooling</h3>
<h3 name="b871" id="b871" class="graf graf--h3 graf-after--h3">Code bundlers</h3>
<ul class="postList">
<li name="963c" id="963c" class="graf graf--li graf-after--h3"><a
href="https://github.com/preconstruct/preconstruct"
data-href="https://github.com/preconstruct/preconstruct" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">preconstruct</a>: 🎁 Dev and build your code painlessly in monorepos
</li>
<li name="8010" id="8010" class="graf graf--li graf-after--li"><a href="https://webpack.js.org/"
data-href="https://webpack.js.org/" class="markup--anchor markup--li-anchor" rel="noopener"
target="_blank">Webpack</a>: script/asset bundler</li>
<li name="a5c1" id="a5c1" class="graf graf--li graf-after--li"><a
href="https://github.com/mrmartineau/webpack-recipes"
data-href="https://github.com/mrmartineau/webpack-recipes" class="markup--anchor markup--li-anchor"
rel="noopener" target="_blank">Webpack recipes</a></li>
<li name="7894" id="7894" class="graf graf--li graf-after--li"><a
href="https://github.com/nippur72/ifdef-loader" data-href="https://github.com/nippur72/ifdef-loader"
class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">ifdef-loader</a>: Webpack
loader for JavaScript/TypeScript conditional compilation</li>
<li name="6107" id="6107" class="graf graf--li graf-after--li"><a href="https://parceljs.org/"
data-href="https://parceljs.org/" class="markup--anchor markup--li-anchor" rel="noopener"