Using the LocalStorage Object in Angular with Dany Paredes - AiA 358

In Angular apps, remembering user-preferred settings is an excellent way to provide a good experience for the users; you can save data in the user’s browser using the localStorage object, which provides methods for working the key-value data. Today on the show, GDE Angular expert Dany Paredes shares his insights about localStorage, how to learn about this API, and knowledge to build in Angular to save background color preferences.

Special Guests: Dany Paredes

Show Notes

In Angular apps, remembering user-preferred settings is an excellent way to provide a good experience for the users; you can save data in the user’s browser using the localStorage object, which provides methods for working the key-value data.  Today on the show, GDE Angular expert Dany Paredes shares his insights about localStorage, how to learn about this API, and knowledge to build in Angular to save background color preferences.  


In this episode…


  • How localStorage works and limitations
  • API examples and use cases
  • Possible performance issues
  • Trusting the localStorage and API mock values
  • Complicated use cases
  • Angular content in Spanish

Sponsors


Links


Picks

Transcript


Charles Max_Wood:
Hey everybody and welcome back to another episode of Adventures in Angular. This week we're talking to Donnie Paredes. Did I get anywhere close on your name?
 
Dany_Paredes:
Danny Paredes? Some people call me Danny Walls because it is translation for the Paredes in Spanish.
 
Charles Max_Wood:
Oh, interesting. Okay. Yeah. When I lived in Italy, I had people call me Bosco or Lenio because my last name is Wood.
 
Dany_Paredes:
Ah yeah.
 
Charles Max_Wood:
So yeah, I get that. But yeah, we're going to be talking about local storage today in our Angular apps. Do you want to just introduce yourself real quick though, before we get too far into this thing?
 
Dany_Paredes:
Perfect. So I am Dani Paredes and GDE in Angular. I'm working right now writing article for Kendo, a technology company. Focus 100% in Angular. Also, I am a huge fan of the MBA. I love the MBA. Write articles in my blog. That's it.
 
Charles Max_Wood:
Good deal. So the Jazz is your favorite NBA team, right? Utah
 
Dany_Paredes:
Hmm. Ah,
 
Charles Max_Wood:
Jazz?
 
Dany_Paredes:
nnn... Ah, you're in for a jazz, I'm sure you're sad right now.
 
Charles Max_Wood:
Yeah, I live in Utah, so.
 
Dany_Paredes:
No, no, you are sad because now you
 
Charles Max_Wood:
Yeah,
 
Dany_Paredes:
lost                                                                                                                  
 
Charles Max_Wood:
we're not
 
Dany_Paredes:
the...
 
Charles Max_Wood:
gonna talk about, no, no, no, no.
 
Dany_Paredes:
This is a nice
 
Charles Max_Wood:
Yeah,
 
Dany_Paredes:
topic.
 
Charles Max_Wood:
just give away all of the, you know, let me finish
 
Dany_Paredes:
Okay.
 
Charles Max_Wood:
the job, just decimate the whole, any, anyway.
 
Dany_Paredes:
But the future is good. The future is good.
 
Charles Max_Wood:
Yeah, we'll see.
 
Dany_Paredes:
Yeah,
 
Charles Max_Wood:
All right,
 
Dany_Paredes:
sure.
 
Charles Max_Wood:
well, yeah, let's talk about local storage and not the jazz, because then I'll be
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
sad.
 
Dany_Paredes:
Okay.
 
Charles Max_Wood:
But yeah, you wrote this article about using local storage with your Angular app. And to be perfectly honest, I think for the most part, if I've done anything with local storage, it's mostly been through some other library, right? So you've got all of the different state management systems that you can use. You know, kind of back on to local storage one way or the other. There's some caching stuff that goes into some form of local storage. But here you're actually just straight up. using the local storage, like you just local storage dot set item get item. And I thought
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
that, oh, wow, this is interesting. So, um, I, I kind of wanted to dive in before we got too far into like kind of the logistics of using local storage with Angular and just talk briefly about what local storage is, because I know that we have some listeners that are fairly new and may not be aware of. Yeah, what local storage offers as far as like the API and the browser and what you can do with it. So can you give people kind of that 10,000 foot view, that high level view of how local storage works and what it provides, and then we can dive into how
 
Dany_Paredes:
Okay.
 
Charles Max_Wood:
you use it with Angular and why you would wanna do that.
 
Dany_Paredes:
Yeah, so local storage is a part of the API, Web API to store data in the browser. Maybe
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
a few years ago, most of the people are using cookies. You remember? I don't know. But of course, we have a lot of people who use cookies. So we have a lot of people
 
Charles Max_Wood:
Oh,
 
Dany_Paredes:
who use
 
Charles Max_Wood:
the good
 
Dany_Paredes:
cookies.
 
Charles Max_Wood:
old, no, I still use cookies.
 
Dany_Paredes:
Yeah, the people see it and go, yes.
 
Charles Max_Wood:
Well, I usually write stuff in Ruby on Rails and
 
Dany_Paredes:
Yeah
 
Charles Max_Wood:
it defaults to a lot of the storage in cookies.
 
Dany_Paredes:
Yeah, so the cookies have a limitation. They have some power because, for example, one great point that the cookies have is you can store also in the client and also in the server. That
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
is something that you don't have when you're working with the local storage. But the local storage support hits start to use more in HTML5. It increased the size of the storage, the data in the client side. This is... The only thing that I don't know how we can face it, but the only limitation that I found in the user-local storage is the only work in the browser. But the great point they have is more security, and also they permit or allow to store a huge amount of information in the client side.
 
Charles Max_Wood:
So are there any limitations to what you can store there? Or is, I mean, are you limited to text? Can you store like binary data in there? How does that all work?
 
Dany_Paredes:
One of the things that the limitation, I say at the beginning, is the size of the data. Because if I know wrong right now, is the local storage support 10 megabytes, and the session only five. I don't know the specific number right now. But you can store the data, but also you can transform to JSON the data,
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
and you have keepers values to get the data. Another good point is that local storage has two main points, that the session and the local storage. But they are sharing the same API, that this is the easy thing that I feel when you start to play with the local storage.
 
Charles Max_Wood:
Okay, makes sense. So, I mean, a lot of the other systems that are using local storage, as we said before, they kind of paper over a lot of the low level stuff and effectively then it's, I've got a reducer or something that actually will transform data and stick it in or pull it out or make sure that it's up to date when I make API calls and stuff like that. but you went straight for the low-level API. So when would you do that? When would you actually decide, OK, I'm going to go and I'm going to stick data into the local storage API, and why would you do that instead of maybe using some of these other systems or libraries?
 
Dany_Paredes:
Well, I prefer to use the API directly because it's easy. It's
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
the same for the local and off of the session. So if you learn one, you can use both. But one of the key points that, for example, the local storage help a lot for you to cache in the client side. For example, I don't know if you want to cache some HTTP response. you can use the local storage or the session store to keep the data and you speed up a lot your application.
 
Charles Max_Wood:
Right. So
 
Dany_Paredes:
So
 
Charles Max_Wood:
effectively
 
Dany_Paredes:
I'm also.
 
Charles Max_Wood:
what you're saying is, is if I make a request to the backend, I get some data, I store it in the local storage, and then instead of having to go out over the network and
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
get the data again, I can just pull it out of local storage.
 
Dany_Paredes:
For example, the common, when you are as a filter, or you know that you will get the same response. So you store some of the data for the search. So you have a search, you know that
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
you are getting data with some filter like, give me all the teams that are from the S, the response will be the same. So I store this data in the local storage, or the session storage, whatever you want. when the user again try to do the same request, you instead back to the server, you read from the local storage.
 
Charles Max_Wood:
Right, but doesn't NGRX and other systems like that, doesn't that kind of do a lot of that for you?
 
Dany_Paredes:
Yeah, the RxJS helps a lot for this kind of stuff. But of course, when I did an example using the local storage, I highly focused to trying to explain to the people what's worked behind or how you can maybe don't need to add RxJS in your application, or start to plan with that.
 
Charles Max_Wood:
Mm-hmm. Okay. So, yeah. So then, and there was a lot in that article. It was interesting to me too, I'm just curious, because I've talked to and worked with a bunch of people from Telerik in the past,
 
Dany_Paredes:
Yeah,
 
Charles Max_Wood:
and
 
Dany_Paredes:
I
 
Charles Max_Wood:
I
 
Dany_Paredes:
know.
 
Charles Max_Wood:
saw that this blog post was on Telerik's blog. Do you work for them or do you work for someone else?
 
Dany_Paredes:
No, I work as a freelancer for them.
 
Charles Max_Wood:
Oh, okay.
 
Dany_Paredes:
So yeah, I write some articles when I have time. But
 
Charles Max_Wood:
Gotcha.
 
Dany_Paredes:
I'll be focusing
 
Charles Max_Wood:
Yeah,
 
Dany_Paredes:
on Angular. Yeah. Easy, I
 
Charles Max_Wood:
cool.
 
Dany_Paredes:
play every day.
 
Charles Max_Wood:
So one of the examples that you gave, and I thought this was kind of cool, was that you effectively allowed the user to set the background image. And since the local storage doesn't, I mean, unless you clear the data in your browser, it'll persist between sessions. And so, you know, I could set it to be a really, really heinous.
 
Dany_Paredes:
Yeah,
 
Charles Max_Wood:
shade
 
Dany_Paredes:
you need
 
Charles Max_Wood:
of
 
Dany_Paredes:
to
 
Charles Max_Wood:
yellow
 
Dany_Paredes:
be clear.
 
Charles Max_Wood:
or green.
 
Dany_Paredes:
Yeah, the example was very basic because I say, okay, for example, you want to keep the preference on some page, for example. You want, okay,
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
I want to keep these filters in my application. But you need to be careful if you use all session storage or local storage, because the local storage, you for expiring the... the content or the information in the browser, only can happen if you do that using the writing your code or the user, go and clean the cache and the
 
Charles Max_Wood:
Right.
 
Dany_Paredes:
data in the browser. But with the session storage, you only have, for example, when the tab close, the information is gone. So this is important to keep this difference when you start to play with one or other. In my example, I saved information in the local storage because I want the user have the same behavior and experience in the application every time he comes to that.
 
Charles Max_Wood:
Yeah, that makes sense. So if I wanted to store something in the session storage, do I just call sessionStorage.setItem instead of localStorage.setItem? Is that the difference as far as the API goes?
 
Dany_Paredes:
Yeah, they have the same method for every...
 
Charles Max_Wood:
Okay.
 
Dany_Paredes:
You have the same API in don't care if it's session, store or local storage.
 
Charles Max_Wood:
Gotcha. And then yeah,
 
Dany_Paredes:
بادعال
 
Charles Max_Wood:
the other thing you... Oh, go ahead.
 
Dany_Paredes:
ستنغل نانا غالغو
 
Charles Max_Wood:
The other thing you pointed out was that if I wanted to store something a little more complicated than say a string that represents the background color, right? I have an object that,
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
you know, sets a
 
Dany_Paredes:
So,
 
Charles Max_Wood:
whole
 
Dany_Paredes:
what-
 
Charles Max_Wood:
bunch of stuff, then I convert that to JSON and stick it in, right?
 
Dany_Paredes:
You need to play with JSON stringify to convert the data and play with that and parse the data when you get the data from the local storage. So this is the, when you, because by default, you only can store string values. But for example, you say, I have an object with all the user preference, the color, the name, the, for example,
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
some element checket. So you need to convert, stringify your object and... parts when you want to return to play with that in JavaScript.
 
Charles Max_Wood:
I gotcha. So what you're telling me is that it's not some kind of native data structure. It's just a string. So if I want to jam user preferences in there, I can do that, but it's going to store a string that's formatted as JSON. And then if I want to change any of those, I'll have to pull it back out, parse it from
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
JSON back into an object, modify the object, and then parse it back to JSON and stick it back in.
 
Dany_Paredes:
Yeah, it's true.
 
Charles Max_Wood:
Okay.
 
Dany_Paredes:
So
 
Charles Max_Wood:
I mean,
 
Dany_Paredes:
that, I'm sorry, sorry.
 
Charles Max_Wood:
JavaScript's good at that stuff, so I'm not that concerned by it, but it's good to know.
 
Dany_Paredes:
Yeah, so I think that if you want to give a good user experience in terms of the remember stuff that you want to do that fast, use the local store API. It's easy. So let's see.
 
Charles Max_Wood:
So, yeah, so we've kind of gotten into this a little bit and talked a little
 
Dany_Paredes:
Mm-hmm.
 
Charles Max_Wood:
bit about local storage and how that all works. Are there any performance or other concerns with using this? Or is it pretty fast and pretty easy to do? Because it looks like it's pretty simple.
 
Dany_Paredes:
Yeah, this is the point I said at the beginning. The API is the same. The only thing that, as you say, is when you want to play with complex objects that you want to, hey, I need to stringify and convert everything else. But if you want to just remove one single item, it's very easy because you can find by keys, you can clear all the stuff with a single method. So the API is very, very powerful. and easy for new people that want to play with that.
 
Charles Max_Wood:
Very cool. So then how do you start doing this with Angular? You kind of give some, you have an example here, but yeah, do you wanna just kind of walk through how you start loading this into Angular so that, yeah, when stuff happens, you're good to go.
 
Dany_Paredes:
Well, for example, you can call the local storage object in whatever place that you want. For example, if you have a single component that the user start the logging and you want to keep the name or some stuff, you can call the local storage API in whatever moment that you want in the component.
 
Charles Max_Wood:
Right, so for example, You've got, in your example, you've got the ng on init that
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
basically loads in.
 
Dany_Paredes:
In the NGO in it, for example,
 
Charles Max_Wood:
You set
 
Dany_Paredes:
I
 
Charles Max_Wood:
the defaults.
 
Dany_Paredes:
set the default values only to have experience from the beginning. But when the user, for example, clicks in some place in the application to change the color... Let me open right now because I did this a few months ago. In the color picker, you change the color... I update the background, but at the same time, I update my local storage value. And also in the example, I give an option to the user remove the preference to restart and just clean up everything in the local storage.
 
Charles Max_Wood:
Yeah, it makes sense. So yeah, so effectively, yeah, whenever you have those events that occur, right, and they call back into the programming in the component, then it goes into the component and yeah, it either pulls the, and when you set it up, it's interesting, because I said that it sets the default, but what it actually does when I'm looking at the code is it checks the local storage to see if it has a key for that background color.
 
Dany_Paredes:
Mm-hmm.
 
Charles Max_Wood:
And if it
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
does, it loads that. And then if it doesn't, then it goes to the default. And so, yeah, as Angular sets up that component, it'll automatically pull out the stuff that was remembered in your browser, which is pretty cool.
 
Dany_Paredes:
Yeah, maybe we can refactor a little bit. Maybe you can create a service that only provides this functionality and you leave your component more clean or
 
Charles Max_Wood:
Yeah.
 
Dany_Paredes:
with too much responsibility. But for the example, I'll show you how you can play with the local storage and session storage is okay.
 
Charles Max_Wood:
Yeah, you could definitely set up a service, right? That, yeah, went to the back end and said, what background color do they like? And yeah, that
 
Dany_Paredes:
Yeah,
 
Charles Max_Wood:
makes sense.
 
Dany_Paredes:
or you can load the initial callers from the API and the service state is a responsibility.
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
So your component don't need to take care about every single stuff only with the behavior of the user.
 
Charles Max_Wood:
Right.
 
Dany_Paredes:
Yeah, this is maybe
 
Charles Max_Wood:
Cool.
 
Dany_Paredes:
a good three factor to do.
 
Charles Max_Wood:
Yeah, well, I mean, I think that's something that I would leave to the user, right? It's like, hey, try this, right? I am a little bit interested. Are you actually doing this anywhere on the apps that you build?
 
Dany_Paredes:
Yeah, the main reason comes because my kid sometimes opens the browser. I have some page, but you know the white background that's happened. But
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
I have a small application for him for the math, for learning the math-based stuff.
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
But of course, when I did the application, the background is white by default. I live to hate, okay, you can change the background. And when you are doing your homework at without too much light, you can put a color without burn your eyes. And when the application
 
Charles Max_Wood:
Oh, okay.
 
Dany_Paredes:
will start again, he remember the color. But also in the company, we did something for the users want to set up some landing page that they want to create a... good behavior when the people remember the preference.
 
Charles Max_Wood:
Yep, that makes sense. And it is nice when you go into an app and it, you know, whatever you've set up, it remembers what it's supposed to do.
 
Dany_Paredes:
Yeah, for example, the only other weakness is, for example, it's only in your machine if tomorrow I go to use other machine, the experience is not the same because it's only stored in the browser. So this is the limitation that I feel that you give the same experience but only if you continue using the same machine.
 
Charles Max_Wood:
Right, that makes sense. And that's where that service comes in, right? Where you have some backend setting that it can access, right? And so it might go to the default for a second while it uses that service to grab the data, but then it can cache it on the new machine.
 
Dany_Paredes:
Yeah, yeah, this is... But if I want to do that with a server, of course you will store the configuration of the user and when the application starts up, you load the preference of the user.
 
Charles Max_Wood:
Right, that makes sense.
 
Dany_Paredes:
better than use the local storage. Yep.
 
Charles Max_Wood:
Yep. So yeah, I mean, this is cool. Is there a good way to test it? Do you have to do end to end testing on it because it uses the browser functionality?
 
Dany_Paredes:
Yeah, this is something we can test because we can read some value from the browser storage. And that's it.
 
Charles Max_Wood:
Is there a way, I've always, I guess I haven't really done a whole lot with it, but yeah, is there a way to kind of mock out the local storage if you're just running tests in like
 
Dany_Paredes:
Yeah,
 
Charles Max_Wood:
Jest without a front end?
 
Dany_Paredes:
when I play with the testing, of course, now I'm more focused in the... I use an Angular testing library that I don't test too much stuff in the real browser. You know, that's only how the user plays with the component, in my case. But of course, I need to trust that the local storage works. If not,
 
Charles Max_Wood:
Right.
 
Dany_Paredes:
we are in problem.
 
Charles Max_Wood:
No, that makes sense as far as, yeah, just assuming that the local storage works. But my, I guess my question would be, you know, just you mock out the storage and then you mock out the DOM and then you
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
could conceivably test your app component as far as like, and, and with these it's rather simple, right? In your blog posts, it's simple enough to where I don't know. I mean, it feels like overkill to do all that work, but If it was really involved in pulling multiple values and then updating multiple other values and the use case got a little bit hairier, I could see it where it's, okay, if these are all the settings in the local storage, then these are all the transformations that it should ask for in the DOM.
 
Dany_Paredes:
Yeah, this is something that I know I don't, because I told you I trust that the local store API need
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
to work, so we need to mock everything. Maybe with yes, we create a mock for all the local store API methods and just return some mock values.
 
Charles Max_Wood:
Cool. So are there more complicated use cases that you're using this for or?
 
Dany_Paredes:
Well, before maybe when we don't have full support in all the browsers, but now that's maybe a few years ago when Safari do some things that don't work as expected. But now if you go to the website, I don't remember the name to check if some feature is ready, all the browser support it. I think the only browser that doesn't support Locaistora is Opera Mini. It's the only one. But of course, the amount of the user is very small.
 
Charles Max_Wood:
Very cool. So yeah, I mean, I think we've pretty well covered this. I'm a little curious to get to know you a little bit before we wrap up. So what's your story? How did you get into Angular and become a GDE?
 
Dany_Paredes:
Oof, this is no large story, but something that I didn't expect. I'm starting writing articles about Angular, like a place for put my mistake first and also my learning process. But more focused because I am, you remember Dory in the movie that forget everything?
 
Charles Max_Wood:
Uh-huh.
 
Dany_Paredes:
Yeah, this is OK. This is who I am. So I start to use the blog as my play for OK, I need to do that. But I started to write articles with all the steps like explained for me in the future. One friend invited me to, I think it was when he was part in the Angular Adventures, invited maybe a
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
few months ago. Lars from
 
Charles Max_Wood:
Uh
 
Dany_Paredes:
This
 
Charles Max_Wood:
huh.
 
Dany_Paredes:
is Angular
 
Charles Max_Wood:
Yep.
 
Dany_Paredes:
community, he invited
 
Charles Max_Wood:
Yep.
 
Dany_Paredes:
me, hey, you want to publish some content here? I get a surprise because he said, oh. Really? You think my content has real value? It's just my experience. He started to invite me to continue writing for them. I continued writing everything that I was learning and playing with that when I was doing my job. This year, I get the invitation to... I was nominated to GDE. I didn't expect that. I said, you think I can be GDE? But
 
Charles Max_Wood:
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
 
Dany_Paredes:
yeah, oh my god. I know Lars is a very smart guy. All the people that I know at GDE are machine, but that's it. And they say, no, no. The work that you are doing writing content focusing Angular, and also I have another blog, ngcontent.com, is
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
article for community leaders, Angular community leaders translated from English to Spanish. because, for example, good content like micro-frontend content, you have a lot of good content in English, but not in Spanish. For example,
 
Charles Max_Wood:
Oh cool.
 
Dany_Paredes:
the people from Angular Architects, I don't know if you know who is, they are doing a great job explaining everything about micro-frontend stuff and testing or the power of the directive. very good advanced content in Angular
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
is not translated yet in Spanish. Also, the official documentation don't have too much content in Spanish.
 
Charles Max_Wood:
That
 
Dany_Paredes:
So
 
Charles Max_Wood:
makes sense.
 
Dany_Paredes:
and this is a reason that I started to create ng-content.com and content, for example, some, I don't know, LARS or other GDs that for me say, OK, this content helped me to solve my job. I need to provide them to Spanish people. And this is one of the main reasons that on my journey to become GD.
 
Charles Max_Wood:
That is cool. I've talked to a number of people in various communities that have this same problem, right? And yeah, I tend to talk to people that speak fluent English, right? And not, you know, so, cause I mean, I speak two languages, I speak English and I speak Italian.
 
Dany_Paredes:
Oh!
 
Charles Max_Wood:
And so, you know, the fluency with some of these other languages, I mean, I can kind of get the gist of what people are saying in Spanish. But
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
I've talked to a lot of people, they're like, yeah, well, me and two other guys I work with, we're fluent enough in English to where we can look at a blog post or listen to a podcast and understand what they're talking about. But a lot of our other coworkers, friends in the community and stuff who are doing this work, yeah, they don't have content in their native language, be it French
 
Dany_Paredes:
Yeah.
 
Charles Max_Wood:
or Spanish or. whatever. And so yeah, I love the idea of, you know, doing some kind of, yeah, language translation and stuff like that.
 
Dany_Paredes:
Yeah,
 
Charles Max_Wood:
So.
 
Dany_Paredes:
and the key of that is not to translate content because we have a lot of people in Spain create content of Angular for most of the basic stuff, like how you're
 
Charles Max_Wood:
Right.
 
Dany_Paredes:
playing with ng4, how you can, for example, create a component, how you learn state management, but for example, the power of the directive, how you can do with the directive in Angular or advanced concepts about testing, for example, testing library don't have too much content. in
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
Spanish. I spent time to translate content for testing library for Angular specific in Spanish. Yeah, but one of the main reasons also for translating to Spanish is because five years ago I can't talk in anything in English. I improved my English, create content, talking with the people and don't be shy to talk.
 
Charles Max_Wood:
Yeah, we've run into that too with the podcast as well where we'll have somebody who wrote a terrific article, but they're not confident enough in their ability to actually talk about it in English to come on the podcast. So yeah, I mean, anything we can do to kind of open up these doors and give people opportunities to share what they're doing, share what they know, be it to a community that doesn't speak English. or to come and share what they're doing here so that we can raise their profile among people they can make a difference for. I love all that stuff. So, yeah.
 
Dany_Paredes:
I don't know. Thank you. Because you have opened this podcast because I saw that other, the Fatou was here a few months ago. I get the surprise.
 
Charles Max_Wood:
Mm-hmm.
 
Dany_Paredes:
Oh, Fatou wasn't here. I need to be there.
 
Charles Max_Wood:
Yep. So
 
Dany_Paredes:
So.
 
Charles Max_Wood:
yeah. I had a friend in college, by the way, whose name was Pato. It was Patricio,
 
Dany_Paredes:
Yeah, Patricio Vargas. Pato.
 
Charles Max_Wood:
but it was Pato.
 
Dany_Paredes:
Yeah, duck.
 
Charles Max_Wood:
Yeah, well, we called him Duck, because I guess Pato is the Spanish word for Duck. Anyway.
 
Dany_Paredes:
Yeah, duck. Patricio Pato.
 
Charles Max_Wood:
Yeah, yeah. Very cool. Well, let's go ahead and start wrapping up here. Before we do that, though, yeah, where do people find you? So you have the, was it angularcontent.com? Is that what you said?
 
Dany_Paredes:
Yeah, the Spanish content is ngcontent.com
 
Charles Max_Wood:
and you
 
Dany_Paredes:
Also,
 
Charles Max_Wood:
can't do
 
Dany_Paredes:
dannywals.com
 
Charles Max_Wood:
that.
 
Dany_Paredes:
is in English
 
Charles Max_Wood:
Uh huh.
 
Dany_Paredes:
Most of my content is in English And also in Twitter, dannywals That's it
 
Charles Max_Wood:
Awesome. All right. Well, let's go ahead and do picks and then we'll wrap up. You sound like you've listened to the show, so you get the gist of picks. And if you don't, then you'll figure it out as I kind of do mine. So lately I have been picking board games. I'm kind of a nut for board games. I really, really enjoy them playing with my friends. The problem is, is that I don't always know off the top of my head. which board games I've already picked. So I'm gonna go to an old standby that I'm pretty sure I haven't picked on this show. It's relatively simple game, but it gets kind of complicated as you go. It's called Quirkl, and it's spelled with a Q-W, Quirkl. Q-W-I-R-K-L-E. And you have wooden tiles and what you do is you line them up either by color or shape. And you can't have two of the exact same tile or shape in the same set, basically. Which is either a row or a column that are all connected, they're all set next to each other. So, anyway, if you get... So there are six different colors and six different shapes. And so if you get all six in a row, then you get a Quirkl. Quirkls are worth 12 points. Otherwise, you get points according to their placement and how many new rows or columns you made, right? So if there were four tiles that all went together and you added the fifth, you would get five points. But if you could add two tiles, that sit next to those, right? So that they're both in a row and a column, you know, with the other tiles and with each other, then you count all of the new rows and columns so you would count some of those tiles twice. And so you get more points by lining up more shapes or colors. On Board Game Geek, it's weighted at a 1.61.
 
Dany_Paredes:
I'm going to go to bed.
 
Charles Max_Wood:
So what that means is out of five, five is like super complex, lots of pieces, uh, you know, all kinds of stuff. Um, this is a relatively simple game to play. I mean, this is a game my six year old knows her colors and shapes she has for years. And so she could learn how to play this game. Right. Pretty quickly. Um, that that's kind of how I rate them in my head. Right. So 1.61 is one that I can play with my youngest child. The 2s are kind of pushing it for her, but like my 10 year old can play them. And then the 3s, it's my teenagers and up. But yeah, this is a fun one. We've played it, my family has played it like my mom and sisters and brothers. We'll play it together and it's fun. You can play up to 4 players. puzzling out what they can do or want to do. But yeah, it's a fun game. So I'm gonna pick Quirkl. And yeah, then I've been attending an online conference called Funnel Hacking Live Encore. And the encore is just, they're replaying all the talks from the in-person conference they held in Orlando. And
 
Dany_Paredes:
Okay.
 
Charles Max_Wood:
it's been amazing. It's a marketing conference. So if you're listening to this and you're like, oh, it's a conference you like, it's not a tech conference, it's a marketing conference. But I'm really, really enjoying it. It's giving me all kinds of ideas of things that I can put together for folks out there in the community to help you all with your careers, because that's what I'm about. And yeah, that's pretty much it. We're gonna do an Angular conference in December. And
 
Dany_Paredes:
All
 
Charles Max_Wood:
so
 
Dany_Paredes:
right.
 
Charles Max_Wood:
if you're interested, I will drop the link to the conference and the CFP. And then, yeah, we're putting together some other stuff like book clubs and stuff. So if you want, if you want more information, just go to topendevs.com. Just check it out periodically. I am working on adding things in so that you'll either, you can get notifications in different ways, email or browser pop-up notifications or whatever. So yeah, so keep an eye out for that as well. And yeah, those are my picks. Danny, what are your picks?
 
Dany_Paredes:
Well, I get surprised about the game. But no, I told you in my free time for example, I play with my friends because I told you I am a huge fan of NBA and I
 
Charles Max_Wood:
Uh
 
Dany_Paredes:
start
 
Charles Max_Wood:
huh.
 
Dany_Paredes:
to compare the people or the developers with the NBA players.
 
Charles Max_Wood:
Oh, I gotcha.
 
Dany_Paredes:
Yeah, it's like, okay, this guy is like Iverson. He's Iverson programmer because
 
Charles Max_Wood:
Uh-huh.
 
Dany_Paredes:
he take the problem along and don't say any tasks to nobody because he want to do all the stuff by himself. And we start to, this is something I do with my friends when we started to play like, okay, today, let's check the team and put the NBA player for. Each of them for example say oh no, this guy is like team don't come This is guys come his work He don't expect to be the guy that with more proof requests is you want to the things is done So that this is something I do with my with my friend in in bored time
 
Charles Max_Wood:
Yep, makes sense.
 
Dany_Paredes:
Hehehe
 
Charles Max_Wood:
I don't dare ask who the LeBron James or Michael Jordan of Angular are.
 
Dany_Paredes:
Ah... Ah... AHHHHH! Y- HAHAHA Well, I don't know, this is a good topic for here but
 
Charles Max_Wood:
Right,
 
Dany_Paredes:
because
 
Charles Max_Wood:
right. Who are you gonna leave out, right?
 
Dany_Paredes:
I live both because I watched NBA from 90s so I live
 
Charles Max_Wood:
Uh-huh.
 
Dany_Paredes:
some good moment of Jordan but also I live the full time of the
 
Charles Max_Wood:
Right? Yeah, maybe Mischko is Michael Jordan because Michael Jordan retired from basketball and went and played baseball and Mischko is now working on Quick. But anyway.
 
Dany_Paredes:
Yeah, yeah, yeah, in Misco it's like Jordan because he now
 
Charles Max_Wood:
Right?
 
Dany_Paredes:
is, yeah, he back to play but with quick.
 
Charles Max_Wood:
Yep.
 
Dany_Paredes:
Yeah,
 
Charles Max_Wood:
Anyway.
 
Dany_Paredes:
no, but we have good people in the in the Angular community that sometimes
 
Charles Max_Wood:
Oh, we
 
Dany_Paredes:
I compare
 
Charles Max_Wood:
sure do.
 
Dany_Paredes:
with
 
Charles Max_Wood:
Yeah. Yeah, we got a lot of good people. All right, good deal. Well, I'm gonna go ahead and wrap this up. This was really fun.
 
Dany_Paredes:
Hmm?
 
Charles Max_Wood:
But yeah, well, thank you for coming.
 
Dany_Paredes:
Thank you,
 
Charles Max_Wood:
And
 
Dany_Paredes:
Charan, for the opportunity.
 
Charles Max_Wood:
yeah, until next time folks, Max out.
 
Dany_Paredes:
Perfect.
 
Album Art
Using the LocalStorage Object in Angular with Dany Paredes - AiA 358
0:00
34:18
Playback Speed: