Tomek Sułkowski
@sulco
Followers
21,852
Following
455
Media
831
Statuses
5,059
Founding engineer & DevRel @StackBlitz . Geeks out over tools and education, on a regular basis.
Gdynia, Poland
Joined December 2008
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
NuNew 3rd Showcase
• 373606 Tweets
Cohen
• 114019 Tweets
$GME
• 89563 Tweets
#LovelyRunnerEp11
• 77426 Tweets
#キュウゴー
• 53012 Tweets
MY LOVE IS LIKE
• 44436 Tweets
GameStop
• 39150 Tweets
#CBÖğretmeneMülakatıKaldır
• 36604 Tweets
TREASURE COMEBACK
• 33124 Tweets
Aziz Yıldırım
• 28685 Tweets
LINEの新機能
• 27718 Tweets
Roaring Kitty
• 24524 Tweets
Hot Sale
• 21003 Tweets
Square Enix
• 20912 Tweets
Childish Gambino
• 19938 Tweets
Ravens
• 17538 Tweets
GET WELL SOON GYUVIN
• 16667 Tweets
Deco
• 15403 Tweets
$AMC
• 15336 Tweets
ACEITA ANITTA
• 14135 Tweets
Atiku
• 12885 Tweets
McDavid
• 12331 Tweets
Stevie Wonder
• 12015 Tweets
Qちゃん
• 10234 Tweets
That feeling when you first discovered `document.designMode`
407
11K
35K
Ever tried debugging an element that keeps disappearing when it loses focus once you start using devtools?
Well dang me to heck there is an "Emulate a focused page" option in
@ChromeDevTools
just for that 🤯
(you can get it from the [⌘]+[P] Command Menu, or Global Preferences)
63
1K
4K
#JavaScript
tip for today:
When "console-logging" several variables, you can wrap them in curly brackets to better see which value belongs to which variable.
A small thing, but hey.
85
920
3K
With `window.showOpenFilePicker()` you can now make a text editor that reads and writes to a local(!) file in 12 lines of JavaScript. That is insane.
(+ a couple lines for handling shortcuts)
32
732
3K
Ok, I'm seriously so excited by
#TypeScript
4.1!
(released today!)
I mean come on: you can now e.g. type all 80 color variations from
@TailwindCSS
in like.. no time:
27
503
3K
#JavaScript
tip for today:
You can use `console.table` in your node scripts too!
(+ pass an array of properties to define which columns to show)
31
756
3K
#JavaScript
tip for today:
"npkill" is a nifty little tool that shows all `node_modules` in your system - and allows to remove the selected ones.
You can quickly free up some serious gigs by taking care of the old/demo projects!
36
981
2K
#CSS
tip for today:
If your content doesn't fit,
@FirefoxDevTools
will show you which element is the one with scrollable overflow - super useful for CSS debugging! 🤩
16
539
2K
#JavaScript
/
#HTML
tip for today:
You know these native html validation messages that are set by browsers? Well, you CAN actually customize them with aptly named `setCustomValidity`!
Super useful for working with pattern validation, or even just to say "Name is required" ;)
19
520
2K
#JavaScript
tip for today:
When destructuring, you can set a default value for one variable to be the value of another one from the same assignment.
38
372
2K
JavaScript tip for today:
If you want to spot your console.logs, add some flair to them!
Just add `%c` to specify places where your styles will be applied, and define the CSS rules as additional parameters.
You can set more than one style per message! 🎨
28
321
2K
#JavaScript
tip for today:
Logical OR assignment only assigns to a falsy value, so it's great for implementing a "default value" logic.
30
358
2K
🤯 Mindblown by this collection of
@JavaScript
patterns created by
@lydiahallie
:
(They also include examples of React and server vs client rendering patterns – super practical stuff!)
20
260
1K
#JavaScript
tip for today:
You can conditionally spread an object - because `{...false}` (and undefined/null/etc) is just `{}`.
28
384
1K
#JavaScript
tip for today:
`some` & `every` are one of the most underutilized array methods.
So don't just `filter` everything. Recognize when what you are asking is a "yes/no" question and often these will be the methods you need for a more elegant solution.
22
330
1K
The `gap` CSS property is a convenient way to set the spacing between not only the grid but also flex items!
And now, with the just-released Safari 14.1, you can use it in every major browser! 🥳
19
252
1K
Just tried the `<dark-mode-toggle>` custom element and dang, implementing a dark/light theme has never been easier.
1⃣ - add a script tag
2⃣ - and the element to the page
3⃣ - create the dark stylesheet
I mean... that's it 😲
12
285
1K
#JavaScript
tip for today:
If you haven't yet migrated to TypeScript, you can still use it in your JS codebase to help hunt some low-level bugs.
17
358
1K
#TypeScript
tip for today:
`as const` assertion marks a literal expression as immutable.
Nested! 🤩
11
305
1K
#CSS
tip for today:
`currentColor` is a powerful keyword that allows you to reduce a lot of boilerplate in your styles.
It represents the value of an element's `color` – and works great for adjusting colors of things that are "inside", like SVGs, pseudo-elements etc.
16
272
1K
#JavaScript
tip for today:
When you have an array of objects use `console.table` to log them as a (sortable!) table.
If there are too many properties (columns), you can also specify which one to display - it simply is the second parameter. Useful when showing DOM nodes.
24
442
1K
#JavaScript
tip for today:
`valueAsDate` is a helpful little property that makes switching between `Date` object and date input value ("YYYY-MM-DD " string) easier.
Note: we can both read AND write to it!
13
282
947
#DevTools
tip for today:
In
@FirefoxDevTools
you can now add a breakpoint for when... a property is being _updated_ or _read_! 🤯
8
252
934
#JavaScript
tip for today:
Ever struggled with some forgotten processes taking over a port you're trying to use?
Just run `npx kill-port [port-number]`
26
278
903
#JavaScript
tip for today:
When trying out selectors in the console:
😒 instead of a lengthy `document.querySelectorAll`
😎 use `$$`
(will work in both Chrome and Firefox btw)
18
267
913
#JavaScript
tip for today:
`JSON.parse` takes an optional second argument – a function that defines transformation on the resulting object before it's returned.
8
259
869
#HTML
/
#JavaScript
tip for today:
Checkboxes, radio inputs, and progress elements have an `indeterminate` state - just set the property with JavaScript.
8
209
859
#JavaScript
tip for today:
Here are some brief ways to generate a couple of useful arrays.
11
268
841
#JavaScript
tip for today:
You can put console.log/time/etc. in your code... without actually adding it to the source code - use conditional breakpoints for that.
Added benefit: once you are done with your debugging you can just remove all of them with a single click.
17
359
843
#HTML
tip for today is:
#useThePlatform
❤️
Did you know you can use the `<datalist>` element to provide suggestions for inputs?
And not only for `[type=text]` ones:
🧮number,
📏range,
✉️email,
🟩color even, work too!
demo:
10
236
820
#JavaScript
tip for today:
You can use form controls' `.validationMessage` property to get the native validation message, and display it in the UI the way you like it.
May save you a lot of manually implemented logic too :)
#useThePlatform
9
211
807
#JavaScript
tip for today:
Knowing falsy values is essential - for conditions, map methods (.filter, .some, .find, ...) and more.
There are just 7️⃣ falsy values in JavaScript so if you are not sure, remember these - everything else is TRUTHY!
13
233
799
#JavaScript
tip for today:
When implementing the common:
"when x is foo then y is bar,
and if it's baz, then y is…",
we tend to use a bunch of `ifs` or a `switch-case` statement.
Look for these pieces of logic - they are a great place to finally start using the `Map` object!
30
236
752
#JavaScript
tip for today:
`replaceAll` is a new string method that replaces all occurrences of a given substring (or pattern).
No need for using regexp for simple string replacements anymore!
10
193
707
#React
Create App now officially supports
#TypeScript
!
I'm so happy this will make it much easier for devs to start with, well, both of these great pieces of tech! 🤩
15
210
701
#JavaScript
tip for today:
`Promise.race` is usually not good for much...
but with a timed-out promise and a fetch's `AbortController` you can use it to make a nice, cancelable requests:
11
175
704
#TypeScript
tip for today:
When having an object that you use to define keys for a later reference (e.g. translations), use `keyof typeof` to extract those keys into a type.
This way you will know in the rest of the code what your options are, and references will be typesafe.
14
214
699
Btw, since several people asked, here's the browser support. Surprisingly decent ;)
4
82
647
#DevTools
tip for today:
You can "Edit and Resend" a request in
@FirefoxDevTools
.
(I don't care if it's available since last Monday or has been there for ages, this is seriously awesome and needs more acclaim!)
10
187
637
Using Icônes and thinking about people who don't know that such a magnificent resource exists.
Be kind to yourself, install Icônes PWA and never google for an icon again.
8
87
632
Optional chaining and nullish coalescing operator work in Chrome now.
Ladies and gentlemen, I believe we live in the future.
4
177
579
#JavaScript
tip for today:
You can conditionally spread an object - because `{...undefined}` (and false/null/etc) is just `{}`.
10
114
563
If you're a FE developer who is good at CSS, don't forget to emphasize it in your resume.
Between component libs, state management, and other "heavy" programming topics, styling is often played down. In reality, if you really are good at it, this might be your big advantage!
22
63
571
#JavaScript
tip for today:
`console.assert` prints a message in the console if the given assertion is false
6
197
561
#TypeScript
tip for today:
`ReadonlyArray` will make an array only permit immutable operations.
8
162
546
#Typescript
tip for today:
If you want to make sure your array won't be mutated make it a ReadonlyArray.
It's built-in type in TypeScript that has only non-mutating array methods!
Useful e.g. when working with
#Redux
,
#ngrx
or OnPush strategy in
#Angular
.
8
218
538
Still installing fonts by downloading zip files?
I mean, it might be fun, I guess...
4
89
533
#HTML
tip for today:
1️⃣ If you need a paragraph of random "lorem ipsum" filler text, type `lorem`, and press [tab].
2️⃣ If you only need a couple of words, type e.g. `lorem3` + [tab].
Which editor will that work with? Well: VSCode, StackBlitz, WebStorm.. you name it:)
16
111
497
#npm
/
#javascript
tip for today:
Use `npm-check` tool to find out which of your dependencies have a new major/minor/patch versions – and then do the update, all in just a couple of seconds.
4
192
500
Let's improve our visual selection-fu.
The built-in OSX screenshotter has several awesome adjustments features, so just press alt, space or shift and see what happens – or just watch this short educational video!😁
[
#DevAdventCalendar
day 4]
2
168
495
Honest question: do you find minimap useful?
I always turn it off to have one less distraction (+more screen real estate) and I'm baffled it is on by default.
But maybe I'm in a minority here?🤔
233
12
491
Developer tooling tip for today:
Ever needed to transform SVG into a React component?
Or JSON to TypeScript interfaces?
Or to a mobx-state-tree definition?
Or ...
Well, allows you to do just that!
(and with some options too⚙️)
Pretty darn useful!
6
184
488
#TypeScript
tip for today:
When you return an array, TypeScript infers the type as an Array of included types (see attached code)
If you want this value to be inferred as a Tuple instead, add `as const` to the return statement.
6
148
486
#JavaScript
tip for today:
If you don't make use of exception identifier (the "error" / "err" / "e" in a try...catch statement), you can omit the catch binding.
9
90
477
#TypeScript
tip for today:
`keyof` gets a union type of all properties of the given object – useful for defining params for sorting, filtering, etc.
9
133
464
#JavaScript
tip for today:
The `console` is fun - and there is much more to it than just the `log`.
5
201
444
Here's the simplest "toggle password visibility" implementation ever.
Don't make your users type in blind.
8
80
437
#JavaScript
/
#DevTools
tip for today:
Do you know console.log's less popular brother - console.dir?
It's very similar, but logs the actual objects, that would otherwise be rendered by the console in a special way:
4
134
424
Not many people seem to realize
@StackBlitz
works offline too.
So here's the related
#JavaScript
tip for today:
You can use `online` and `offline` events on the window object. Oh, and the browser support is solid 💪
6
114
420
#CSS
/
#HTML
tip for today:
You can style an HTML progress bar. Here's how to do it, using
@StackBlitz
to preview it in Chrome, Firefox, Safari, and Edge at the same time ⚡️
4
86
412
#JavaScript
/
#DevTools
tip for today:
You can use `await` in the Console without needing to wrap it in an async function.
5
131
417
Just tried
@sarah_edo
's `js-explorer` (a CLI wizard for finding the best array & object method for a given task) in
@StackBlitz
and, well, it works flawlessly! ❤️
💻 You can try it too:
3
60
418
Wanna get through a video quickly, but youtube only goes to 2x speed? Pop up the devtools, find the video element and set `playbackRate` to whatever you can handle.
(This protip was given with love and wishes for future videos one can actually enjoy watching on 1x)
3
76
407
#TypeScript
tip for today:
The latest TypeScript ver 3.7 introduced optional chaining.
Which is the best thing since TypeScript.
Here's how you can use it.
14
138
388
#JavaScript
tip for today:
We often use `v => console.log(v)` to figure out what comes in a callback. You can instead use `console.log` as a callback directly.
It's less typing + logs ALL the params, not just the first one.
10
109
388
#JavaScript
tip for today:
Using `Intl.PluralRules` you can get ordinal numbers ("1st", "2nd", etc.) in just a couple of lines.
Don't need a library for that 💪
#useThePlatform
3
127
391
#JavaScript
/
#HTML
tip for today:
...is just a friendly reminder that setting `id` on an html element creates a global variable.
Might be useful for quick demos (a la `document.getElementById`), may also cause a bug and headache (name clash)
So... just be aware of this, ok?🙂
12
152
387
@TechSquidTV
I'm not the author of this thing here, but of the original. I'm the slightly frustrated author of the original.🙄
13
39
381
#JavaScript
tip for today:
You can assign default values when destructuring objects, arrays and other iterables.
4
137
374
#DevTools
tip for today:
@ChromeDevTools
has added a lot of crazy good stuff recently. My favourites:
- eager evaluation
- argument hints
- better function autocompletion
Take this 30 sec & see what it means and why it's one of the best things in
#JavaScript
, like, this year!
6
170
365
#React
tip for today:
Codemods are scripts that help with refactoring. With the latest React 16.9 release, you can conveniently use the official `react-codemod` with `npx` command!
Let's see how to refactor class component into a functional one, and change `.bind` to `() =>`:
4
136
366
Teaching, learning, testing or just playing with
@GraphQL
?
`json-graphql-server` by
@francoisz
is a useful tool that gives you an instant server from your JSON data!
📘 GitHub:
💻 Editable
@StackBlitz
demo:
4
72
363
#React
#Typescript
tip for today:
You don't have to export component's prop type/interface - when you need it you can extract it from a component using the handy `ComponentProps` generic.
5
116
346
@jaredpalmer
These days? Inline Fold
Because Tailwind
🔧 Code Tip (2):
Using Tailwind? "Inline Fold" extension is a true gem!
Because as much as we appreciate utility classes, we don't need to look at all of them all of the time 😅
4
10
106
11
10
354
@kentcdodds
@destroytoday
But wait, there's more 🔥
Let's improve our visual selection-fu.
The built-in OSX screenshotter has several awesome adjustments features, so just press alt, space or shift and see what happens – or just watch this short educational video!😁
[
#DevAdventCalendar
day 4]
2
168
495
3
50
346
#JavaScript
tip for today:
Some small pieces of logic are often repeated unnecessarily.
Learn to notice these & see if it can be improved.
Look for places when you're adding code similar to what's already been written with just a slight change.
(more examples next week🙂)
8
100
345
`monitor` is a DevTools’ function that lets you "spy" on any function calls.
Whenever a "spied" function runs, the console will log that fact, including the name of the function and arguments with which it was called!
[
#DevAdventCalendar
day 15]
3
112
339