Tech Talks with Simon
Tech Talks with Simon
  • Видео 13
  • Просмотров 71 139
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!
Просмотров: 13 932

Видео

TypeScript Wizardry: Recursive Template Literals
Просмотров 38 тыс.Год назад
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

Комментарии

  • @tcheikovski230
    @tcheikovski230 12 часов назад

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

  • @fabbro8747
    @fabbro8747 18 дней назад

    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 22 дня назад

    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 2 месяца назад

    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 9 месяцев назад

    Brilliant. Thank you!!

  • @dawid_dahl
    @dawid_dahl 9 месяцев назад

    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 11 месяцев назад

    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.

  • @dokkenrox
    @dokkenrox Год назад

    Man, that's rough! LOL It's an elegant solution but it's not very legible. It seems like once we get to the level of complexity where we need to invoke the term "type-level programming" that Typescript's terse syntax doesn't always let you express things in a way that's suitable for maintainability. You see the same kind of shortcomings with complex regular expressions. It starts to feel like you would almost want an extended syntax to deal with that sort of thing. Some languages actually do have alternative ways to build regexes that are more verbose but easier to read. Maybe MS will do something similar for Typescript in the future.