- 13
- 71 429
Tech Talks with Simon
United States
Приєднався 6 вер 2009
This is where I upload my conference talks, other tech talks and various training or workshop material. Here you'll find videos related to software development, web and technology in general.
TypeScript: tsconfig demystified!
tsconfig.json is a black box; bajillions of permutations of opaque, confusing options. Let's sift through the madness and see if we can decipher the ones that matter!
Переглядів: 14 045
Відео
TypeScript Wizardry: Recursive Template Literals
Переглядів 39 тис.Рік тому
In this one, I'll show you some template literal magic for accessing deeply nested objects in TypeScript. If you like pushing the boundaries of type-level programming, this video is for you!
TypeScript: Building a better EventEmitter
Переглядів 11 тис.Рік тому
The built-in types for EventEmitter are totally broken. I'll show you how to build a 100% type-safe EventEmitter in TypeScript and it's not as hard as it sounds. This should be easy enough to follow if you're comfortable with intermediate TypeScript, specifically Generics and Mapped Types (link to docs below). Let me know if you're into this kind of TypeScript content because I've got a few oth...
Custom domain with Gmail - The free way
Переглядів 2,4 тис.Рік тому
Setup Gmail with your own custom domain using only free tools. This allows you to send and receive from an email address of your choice such as you@yourdomain.com. We're using Cloudflare to route incoming email and Mailgun for outgoing mail using their free plan. So in the end we're using 100% free services, your only cost is whatever you paid to register your domain. NOTE: It was unclear in t...
10 Things You Didn't Know You Could Do with Expo - React Native Bay Area Meetup
Переглядів 5984 роки тому
This is a talk I gave on Sep 24, 2020 at React Native Bay Area. Event page: www.meetup.com/React-Native-Bay-Area/events/273040331/
React Native - The Future of Front-end Engineering - GeekCamp 2017
Переглядів 1264 роки тому
This talk was originally presented on July 15, 2017 at GeekCamp in Jakarta. Slide deck at: speakerdeck.com/sstur/the-future-of-front-end-engineering
The 4 Pillars to Building a Great Mobile App
Переглядів 1334 роки тому
This is an online tech talk I did in collaboration with Embrace.io in May 2020 about building scalable and well-architected mobile apps.
Learning from React Native and Flutter
Переглядів 854 роки тому
This is from a talk I did at React Native San Francisco in November 2019. The original topic for this talk was "What React Native can learn from Flutter" but ended up incorporating learnings from both platforms with more broad coverage. This talk is loosely based on a talk I did at Kansas City Developer Conference in July 2019.
React: 5 Years Later
Переглядів 884 роки тому
This is a talk I gave for Santa Cruz JS on 14 May 2020, almost exactly 5 years after I delivered my first talk on React in May 2015 at the same meetup. Here we discuss what's happened in the JS ecosystem over the past few years as well as what makes React still exciting and still innovative.
Rapid Mobile Development with React Native - DevC Malang F8 Meetup - April 2017
Переглядів 1637 років тому
This is the presentation I gave at F8 meetup, Malang on 19th April, 2017.
Async/Await - Modern Concurrency in JavaScript
Переглядів 2,9 тис.7 років тому
This talk was presented at BandungJS on 27th March, 2017. Slides can be found here: speakerdeck.com/sstur/async-and-await-bandungjs-mar-2017
React Walk Thru - Santa Cruz - May 2015
Переглядів 1517 років тому
This is my talk on React at Santa Cruz JS on May 8th 2015. The slides from the talk are at j.mp/1InnU0x
React Fundamentals - April 2016
Переглядів 8048 років тому
This is a talk I gave at Jakarta JS in 2016 about React. It was geared towards those starting a new front-end project or thinking about rewriting an existing frontend application. Slides here: speakerdeck.com/sstur/react-fundamentals-jakarta-js-apr-2016
type PathInto<T> = T extends Record<string, any> ? { [K in keyof T]: T[K] extends string ? K & string : T[K] extends Record<string, any> ? `${K & string}.${PathInto<T[K]>}` : never; }[keyof T] : never; (chatgpt 4o1-preview)
You could use the following : [K in Extract<keyof T, string> as ......] to avoid the intersections with string
The question is why? This is the type gymnastics that puts people off. If it's developer help you're after, put an example in a JSDoc, if it's some sort of forcing an error, use a validator. How much time did you spend hovering around and not solving the actual problem at hand!?
I think to avoid this hard to read black magic - TS syntax should allow writing functions to define types - I.e. you could write simple recursive function that traverses tree of the keys, which would look much more readable.
I think TS, at a conceptual level, must've been built on top of works in set theory published by pure mathematicians This thing seems to come straight out of a college level math textbook lmao
i assume/hope things must have changed as of September 2024 🥲🥲
Really helpful, would love to hear you talk more about various TS/JS topics! Cheers 🙌
This is a great explainer, though didn't explain what I was looking for Still, big thumbs up!
my brain explode when it comes to how to dynamic extract key or value from a nested object, espcially when you use [K in keyof T as (...)], really weired syntax, hard to understand why this works , and I found this less code also works, but not quite sure why it works type PathTo<T extends Record<string, unknown>> = keyof { [K in keyof T as T[K] extends Record<string, unknown> ? `${K & string}.${PathTo<T[K]>}` : K]: unknown; };
Very good video man
Sick vid man!
Oh hey, the thing I've spent the last 3 weekends trying to do...
I love that you incrementally build up the solution by solving each little problem.
Awesome! Do you think you have time to continue part 2 to explain the module more in depth?
I don't really like taking the keyof a mapped type. I think it's nicer to take a helper instead: type PathInto<T extends Record<string, any>, K = keyof T> = K extends string ? T[K] extends string ? K : `${K}.${PathInto<T[K]>}` : never; Or without the helper: type PathInto<T extends Record<string, any>> = keyof T extends infer K ? K extends string ? T[K] extends string ? K : `${K}.${PathInto<T[K]>}` : never : never;
The worst tutorial i've ever seen
I did something similar for another project, I made K extends string the outermost ternary operation so that in the true branch I didn’t need to do K & string, as in that branch K is narrowed to some string type. I used this type (I called it dot path) to map keys of one type to keys of another type based on a suffix in each key. Type level programming is my favorite feature of TypeScript (also probably the only feature I like tbh) because it feels like doing a proof, and also because the literal types make for a really good developer experience since the LSP can suggest strings from that type.
That's amazing! What resources can I use to level up my type-level programming skills?
All of that just to have some intellisence on (string): string 😁
This video is Amazing ! I needed a lite translation hook for my project and didn't want to fiddle with libraries for it. This is just perfect! I adapted it to be able to loop trough several files of translate keys and it works wonderfully ! Thank you for that!
use vscode terminal T_T
Great explanations, but personally would frown if I saw this in a project. Mental gymnastics and cognitive overload ;)
Brilliant. Thank you!!
This is starting to look like Haskell code, haha.
I actually used this in our company to name the fields in the api responses as we get Keys that are in objects or arrays, and we use them parsed in a specific way (with __ instead of .) and It was so difficult for me to manage to do this. I think this is greatly explained and would've been so Happy to find this video when I did this 😂
great explanation! I didn't know about that `K & string` trick, very useful :) thanks
7:37 It only works on Unix systems (Linux, Mac OS) and it doesn't work on Windows. The universal solution is to use the rimraf library.
That's some next level dogshit, ngl.
Please more content like this, I am engaged in building libraries for my websites and client sites, always running into brick walls over design patterns as it is hard to track down quality lessons for this kind of stuff
Very interesting, thanks
Excellent video! This is simple and clear, exactly what i was looking for. I just subbed to your channel and i am waiting for more videos like this one!!
Why didn't OP just define types to lie about how EventEmitter works, to get the same benefits?
Yeah, ok this is really bad. You need to pick up event patterns from different languages rather than what you are doing. this is simply just bad code created from a very corky js community. Define your events as classes and stop separating the event type from the payload. This is just bad.
au, my brain!
Great rundown thanks Simon.
Great 👏 thanks!
Wow, that's crazy :D didn't know that was possible!
Cool, my version without `& string` const data = { env: { name: "", payload: { price: 0, size: 0, }, }, }; type DataType = typeof data; type PathsInRecord<OBJ extends Record<string, any>> = keyof { [KEY in keyof OBJ as OBJ[KEY] extends object ? KEY extends string | number ? PathsInRecord<OBJ[KEY]> extends string ? KEY | `${KEY}.${PathsInRecord<OBJ[KEY]>}` : never : never : KEY]: never; }; type res = PathsInRecord<DataType>; const a: res = "env"; const a0: res = "env.name"; const a1: res = "env.payload"; const a2: res = "env.payload.price";
I tried this with SendGrid instead of Mailgun, and the main problem with it was that my messages would always end up classified as Promotions on Gmail users’ accounts. It was enough to convince me that, to guarantee mail delivery and correct classification, it’s probably not a good idea to use SMTP servers aimed at promotional or automated use for my personal messages.
Yes, this is particularly a problem with Sendgrid, because a lot of their users send marketing and spam using that service. Mailgun is somewhat better, and Mandrill is the best in my experience, about getting through to people's inbox. These services are supposed to be used only for transactional email and not marketing or newsletters, but it doesn't always work out that way.
So glad to have discovered this channel. I'm fairly new to Typescript and I'm just overwhelmed with all the options and module types and and and... Thanks for helping with this concise explanation. More on modules would be great.
Finally. Thank you!
I was casually watching this in the living room and was really excited because it's just extraordinarily good content. But as soon as I was done I turned around to see my girl friend judging me. She called me a nerd and now I am happy in two ways. :> Thank you for sharing this and "yolo"
I have though about this many times and though it was impossible in TS. Now you've clear my mind. Thank you!
Great video! My version for this case would be type PathTo<T extends Record<string, unknown>> = keyof { [K in keyof T as T[K] extends Record<string, unknown> ? `${K & string}.${PathTo<T[K]> & string}` : K & string]: any; };
This is amazing black magic and I’m glad I watched the video. If I ever saw anyone submit anything remotely similar to this in a PR it would get a Deny so fast my left click would break the sound barrier.
very educational video 👍 would be great to see more videos about complex types in TS and you find a solution for them
neat!, now im gonna yoink this
Man, I've just discovered your channel, this is the 3rd video I've watched and all your videos are little gold nuggets :D I love your content.
Once again, great video. One question though, you've mentioned that the two most important options are "strict": true; and "noUncheckedIndexedAccess": true,. How about option "strictNullChecks"? This one should be pretty important too no?
Right. Turning on `strict: true` will enable "all of the strict mode family options" which includes strictNullChecks and a bunch more. Details here: www.typescriptlang.org/tsconfig#strict
Wow great stuff. You've just gained a new subscriber :). I've been getting more and more into Typescript and I often struggle with recursion. I think the "variables" name in types aren't always the best :) things like K and T aren't very descriptive and it makes it really hard to understand what is going on :). I think one nice thing would be to comment the most challenging parts so you know what is going on. But I loved your process though, thank you very much the great video.