Tech Talks with Simon
Tech Talks with Simon
  • 13
  • 71 429
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

КОМЕНТАРІ

  • @1777bond
    @1777bond 5 днів тому

    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)

  • @tcheikovski230
    @tcheikovski230 7 днів тому

    You could use the following : [K in Extract<keyof T, string> as ......] to avoid the intersections with string

  • @fabbro8747
    @fabbro8747 25 днів тому

    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!?

  • @illya_ike
    @illya_ike 29 днів тому

    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.

  • @RexGalilae
    @RexGalilae Місяць тому

    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

  • @jeetchheda8916
    @jeetchheda8916 Місяць тому

    i assume/hope things must have changed as of September 2024 🥲🥲

  • @loquek
    @loquek Місяць тому

    Really helpful, would love to hear you talk more about various TS/JS topics! Cheers 🙌

  • @avi12
    @avi12 Місяць тому

    This is a great explainer, though didn't explain what I was looking for Still, big thumbs up!

  • @solevow
    @solevow 2 місяці тому

    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; };

  • @biasforaction7860
    @biasforaction7860 2 місяці тому

    Very good video man

  • @chocolatebarcroissant
    @chocolatebarcroissant 2 місяці тому

    Sick vid man!

  • @DJ_Locks
    @DJ_Locks 2 місяці тому

    Oh hey, the thing I've spent the last 3 weekends trying to do...

  • @unnoticedspacegoat8537
    @unnoticedspacegoat8537 3 місяці тому

    I love that you incrementally build up the solution by solving each little problem.

  • @sammas3179
    @sammas3179 3 місяці тому

    Awesome! Do you think you have time to continue part 2 to explain the module more in depth?

  • @andrew_ray
    @andrew_ray 4 місяці тому

    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;

  • @tejparker1
    @tejparker1 5 місяців тому

    The worst tutorial i've ever seen

  • @rahul38474
    @rahul38474 5 місяців тому

    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.

  • @nestnik
    @nestnik 6 місяців тому

    That's amazing! What resources can I use to level up my type-level programming skills?

  • @coolemur976
    @coolemur976 6 місяців тому

    All of that just to have some intellisence on (string): string 😁

  • @maximemondello6174
    @maximemondello6174 7 місяців тому

    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!

  • @xokyle
    @xokyle 7 місяців тому

    use vscode terminal T_T

  • @EconomicsDomain
    @EconomicsDomain 8 місяців тому

    Great explanations, but personally would frown if I saw this in a project. Mental gymnastics and cognitive overload ;)

  • @TheTom265
    @TheTom265 10 місяців тому

    Brilliant. Thank you!!

  • @dawid_dahl
    @dawid_dahl 10 місяців тому

    This is starting to look like Haskell code, haha.

  • @Athet0s1s
    @Athet0s1s 10 місяців тому

    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 😂

  • @tezismith8795
    @tezismith8795 10 місяців тому

    great explanation! I didn't know about that `K & string` trick, very useful :) thanks

  • @weroro
    @weroro 11 місяців тому

    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.

  • @user-dz6il2bx5p70
    @user-dz6il2bx5p70 Рік тому

    That's some next level dogshit, ngl.

  • @blazed-space
    @blazed-space Рік тому

    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

  • @zak-kepler
    @zak-kepler Рік тому

    Very interesting, thanks

  • @Douwab
    @Douwab Рік тому

    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!!

  • @LewisCowles
    @LewisCowles Рік тому

    Why didn't OP just define types to lie about how EventEmitter works, to get the same benefits?

  • @EddieDan-s9d
    @EddieDan-s9d Рік тому

    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.

  • @enjay86
    @enjay86 Рік тому

    au, my brain!

  • @webbae
    @webbae Рік тому

    Great rundown thanks Simon.

  • @allmeadow1899
    @allmeadow1899 Рік тому

    Great 👏 thanks!

  • @voyager_ll
    @voyager_ll Рік тому

    Wow, that's crazy :D didn't know that was possible!

  • @disel920
    @disel920 Рік тому

    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";

  • @GabrielSoldani
    @GabrielSoldani Рік тому

    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.

    • @sstur
      @sstur Рік тому

      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.

  • @FrancoisBothaZA
    @FrancoisBothaZA Рік тому

    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.

  • @dimitrisqq
    @dimitrisqq Рік тому

    Finally. Thank you!

  • @confused_horse
    @confused_horse Рік тому

    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"

  • @trongvinhnguyen6366
    @trongvinhnguyen6366 Рік тому

    I have though about this many times and though it was impossible in TS. Now you've clear my mind. Thank you!

  • @Giffeln
    @Giffeln Рік тому

    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; };

  • @daniellynch3724
    @daniellynch3724 Рік тому

    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.

  • @LeshkaSaD
    @LeshkaSaD Рік тому

    very educational video 👍 would be great to see more videos about complex types in TS and you find a solution for them

  • @RedStone576
    @RedStone576 Рік тому

    neat!, now im gonna yoink this

  • @76Freeman
    @76Freeman Рік тому

    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.

  • @76Freeman
    @76Freeman Рік тому

    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?

    • @sstur
      @sstur Рік тому

      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

  • @76Freeman
    @76Freeman Рік тому

    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.