teleren/devto huggingface dataset:
Saving users’ preferences in SvelteKit
Tags: javascript, svelte, tutorial, ux
Published: 2022-03-30 12:19:00

This is a quick tutorial on saving users preferences in SvelteKit. 

There are 2 ways one might approach this. First is implementing an auth system. But, that might be overkill so another way is to save it locally. Let’s go with that.

So something like this... (I’ll be using [this](https://github.com/js-cookie/js-cookie) package to simplify the code)

```ts
let name : string

const saveName = () => {
	Cookie.set("name", name)
}
```

```html
<input bind:value={name}/>
<button on:click={saveName}>save</button>
```

Well, that was easy. 

But a small problem arises when we want to display it.

```ts
onMount(() => {
	name = Cookie.get("name")
})
```

```html
<p>{name}</p>
```

This works, but since we have to wait for `document` to load, we need to use `onMount()`. That means, there will be a split second after the page loads where `name = undefined`. This won’t be a big problem in this case, but if it were saving user’s light/dark theme preference, it’ll lead to a quite negative UX. This will also happen if we rely on something like Firebase auth, since it also has a dependency on `window`/`document`.

To solve this, we can read the cookie in the server before the page fully loads. 

First, let’s read the cookie with [hooks](https://kit.svelte.dev/docs/hooks). This `handle()` function runs every time SvelteKit receives a request. We’ll use the [cookie](https://github.com/jshttp/cookie) package to make cookie-parsing easier.

```ts
import * as cookie from 'cookie';

export const handle : Handle = async ({ event, resolve }) => {
	const { name } = cookie.parse(event.request.headers.get('cookie') || '') as Partial<{ name: string }>;
	if (name) {
		event.locals = { name };
	}
	return await resolve(event)
}
```

Next, we have to send this to the frontend. One way of doing it, is to use the [session](https://kit.svelte.dev/docs/hooks#getsession) object, which can be read in the [load](https://kit.svelte.dev/docs/loading) function. We can set the session object using [getSession()](https://kit.svelte.dev/docs/loading). Since `event` first passed the handle function, it includes `name` in `locals`.

```ts
export const getSession : GetSession = async (event) => {
	const { name } = event.locals as Partial<{ name: string }>;
	if (!name) return {};
	return { name };
}
```

Finally, we can get the `session` object in the load function like below. 

```ts
export const load : Load = async ({ session }) => {
	const { name } = session as Partial<{ name: string }>
	return {
		props: {
			name
		}
	}
}
```

Here’s a simple project of mine that implements this:

URL: [https://niagara.vercel.app](https://niagara.vercel.app/)

Github: [https://github.com/pilcrowOnPaper/niagara](https://github.com/pilcrowOnPaper/niagara)
How 20 years of blogging has influenced my career
Tags: career, programming, beginners
Published: 2022-03-30 16:49:25

When it comes to blogging, I'm no professional, but I've been able to leverage it professionally over the years to my benefit.  While my first LiveJournal blog in 2002 may have not been of a technical nature, it was the seed of a habit to write long form communications, one that I've refined over the course of 20 years.  Reflecting on how I was able to leverage blogging with my professional career, I came up with 4 themes: 

## It's made me good at documentation
Being able to solve a problem using code is great, but being able to thoroughly communicate that solution to the different audiences is how you stand apart from the crowd.  Writing blog posts gave me practice for writing other technical documents later on in my career used by my peers, executives, customers, and even students at a bootcamp.  

In fact, several posts I've authored on Dev.to are just reposts of internal documents I wrote, minus all the proprietary information ;) 

## It's a form of giving back
One of the main reasons I write posts is that I view it as a form of giving back to the community which helped foster my career growth.  The majority of the skills that led me on a successful career in engineering came from posts on the internet, whether that be the [MDN Web Docs](https://developer.mozilla.org/en-US/), A [stack overflow](https://stackoverflow.com/questions/40883613/how-to-resize-different-images-into-different-sizes-using-grunt/40921181#40921181) answer, or a WordPress blog post.  By contributing to the [Marketplace of Ideas](https://en.wikipedia.org/wiki/Marketplace_of_ideas), I'd like to think that I'm enabling others to advance their own growth as I have.  

## It establishes a narrative 
While one blog post can highlight knowledge on a singular topic, many blog posts can help create a narrative to describe your competencies and experience.  This is commonly used to as a means to build reputation towards becoming a thought leader, but the average person can also leverage it during the interview process.  Similar to portfolios, a candidate can share their authored posts with a hiring manager in order to demonstrate skill competency.  

From 2012 through 2013, my narrative was that I was an HTML 5 developer.  I wrote posts around HTML, CSS, and JavaScript. Today, I write about topics that describe me as an executive-level technology professional in the enterprise.  I have a director role today, but the job I'll eventually want is CTO, so I want the narrative to reflect that.    

## It creates opportunities
During the _fake it til you make it_ phase of my career, I authored many blog posts around programming topics that I was learning.  Within a year my persistent efforts began to pay off as I found emails in my inbox from companies looking for contractors, technical recruiters looking for full-time candidates, and even one publishing company asking me to author a technical book.  The additional exposure that the blog posts provided became the springboard that allowed me to transition from IT into Engineering.
#66 Days of Data
Tags: python, datascience, 100daysofcode, ankitgupta
Published: 2022-03-30 16:46:44

## **Learning Python**  👨‍💻

D 44 | 45 of #66daysofdata 📈

Today started with NumPy - Basics, NdArray, Datatypes, Array Attributes, Indexing & Slicing & Array Creation 👨‍💻

Checkout 👉 [My #66 Days of Data timeline on Github](https://github.com/mrankitgupta/66DaysOfData)

Say me Hi! 
I'll be glad to connect on 
👇

**Twitter** @ [Mr_AnkitGupta01](https://twitter.com/Mr_AnkitGupta01)

**Github** @ [MrAnkitGupta](https://github.com/mrankitgupta)

**LinkedIn** @ [MrAnkitGupta](https://www.linkedin.com/in/mrankitgupta)
Defining the Blockchain using Bitcoin as an example.
Tags: blockchain, crypto, tutorial, web3
Published: 2022-03-30 16:27:25

So you have been hearing a lot of noise about this blockchain thingy but haven't been able to understand or wrap your head around it, well you're not alone. I started hearing about the blockchain around August 2020 (I know pretty late right? ) and the curiosity in me did not let me rest until I got at least a basic understanding about this new technology.

In this post I would love to explain what the blockchain means using bitcoin as an example. I'm sure many of us have heard the term "Bitcoin", and some of us might even have loads of it haha...so I hope you would be able to relate.

## **Enough talk, let's dive in!**

Using Bitcion as an example, the blockchain is a public ledger of all bitcoin transactions that have ever taken place right back to the very first transaction. Hence the blockchain is an ever evolving piece of technology.

It's constantly growing as new blocks are added. The transaction which are being added unto the blockchain are being processed by computers (Nodes) connected to the network. These Nodes are located around the globe, hence being a decentralized technology. Also as each block is been added unto the chain, it's done so in a chronological order and anything that happens on the network happens as a whole.

## Features of the Blockchain:

**Decentralized**: The blockchain network is decentralized, meaning it doesn’t have any governing authority or a single person looking after the network. Rather a group of nodes maintains the network making it decentralized.

**Immutable**: This means that if you put something on the blockchain, it is really hard to change, it's pretty much there forever.

**Distributed**: This means that no one computer(Node) can decide. It's a network of computer(Nodes) around the world sharing that decision.

**Public Ledger**: It's just a table, like an excel table that contains a lot of information opened to everyone.

There are many other features and use cases of the blockchain. But I hope I've been able to at least give you an idea about what the blockchain is and why it's so interesting.

Keep building, catch you later!
Open-source .NET MAUI Workshop - Multi-platform apps with C#
Tags: dotnet, dotnetmaui, csharp, beginners
Published: 2022-03-30 16:25:00

The .NET Foundation helps organize "[Presentations in a Box](https://dotnetfoundation.org/community/resources)" including workshops, demos, presentations, eBooks, and a lot more from the .NET team and the .NET community. In recent months, the ASP.NET Core Beginners, Blazor, and C# workshops have been fully updated to .NET 6 and C# 10! If you are looking to learn or teach .NET and C#, these are great resources to start at.

Personally, I contributed the Xamarin.Forms workshop to the .NET Foundation resources, and with .NET MAUI around the corner, I thought it was time to update this workshop to the latest and greatest tech. So, today, I am pleased to announce the launch of the [.NET MAUI workshop](https://github.com/dotnet-presentations/dotnet-maui-workshop) available right now today! This full day workshop walks through everything .NET MAUI and has you building a full application from scratch that grabs and displays information from web API, navigates to details, and adds native platform features.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysrccfwffk3gmaasumyp.gif)
 

Here is a full outline of the workshop:
* Part 0 - 30 Min Session - Introduction to .NET MAUI Session & Setup Help
* Part 1 - Single Page List of Data
* Part 2 - MVVM & Data Binding
* Part 3 - Navigation
* Part 4 - Implementing Platform Features
* Part 5 - CollectionView & Beyond
* Part 6 - Theming the app 

There is a slide deck presentation for each part of the workshop alongside a full readme walkthrough of completing the exercise. I am super excited to release this and I am super open to feedback as well. I am presenting this at a few upcoming conferences and then plan to do a full recording on my [YouTube](https://youtube.com/jamesmontemagno)!
How to perform accessibility audit of your webpage without installing any tools
Tags: a11y, javascript, programming, webdev
Published: 2022-03-30 16:22:49

The easiest way to perform an accessibility audit on your webpage is just to use a tool already built-in into Chrome browser — Chrome DevTools. Just:
- Open the Chrome Browser
- Use `ctrl + shift + I` on Linux/Windows or `cmd + shift + I` on Mac to open the DevTools panel,
- go to the Lighthouse tab,
- tick Accessibility checkbox,
- decide which version (desktop or mobile) you want to test,
- click the `Generate Raport` button.


After some seconds you will receive the report (like in the picture below) with the most important data.

![Example report after performing accessibility audit in Chrome DevTools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i26zd4kokskmdts6iwfb.png)

OK, so what have we got here? First of all, our webpage is scored on a scale of 1–100. A score below 50 is considered bad, 51–89 medium and 90–100 is the score we want to achieve. **But the number is not all.** The most important thing in that audit is the list of failing audits — visible just below the main score. When you click on one of the audits and expend details, you will receive much more data — e.g. a link to an article where you can learn more about a given problem and a list of failing elements.

What’s more — when you click on the failing element you will be redirected to it in the `Source` tab where you can find more info about the element and where you can play with its CSS or attributes.

Each section should have also a `learn more` link with reference to article explaining why it's important and how to fix it. Definitely worth checking!

![Section with title "Contrast - these are opportunities to improve the legibility of your content", subtitle "Background and foreground colors do not have a sufficient contrast ratio" and text "Low-contrast text is difficult or impossible for many users to read. Learn more link". Below you can see 2 HTML buttons with theirs ids.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxixysxsamkfr6sqbh97.png)

Personally, I strongly recommend checking not only the section with failed audits but also the passed ones — thanks to that you can learn what is important and improve your skills.

**Note:** Unfortunately, automated tools are not perfect - they find only around 57% of problems connected with accessibility. Please, remember about manual tests on your webpage - especially after big refactors and changes in navigation. But the Lighthouse audit is a great starting point to improve your webpage. And trust me - you can learn from those reports a lot!

Happy coding!
Advantages of iPhone App Development for Your Business
Tags: ios, apps, programming, computerscience
Published: 2022-03-30 16:08:45

## 1. Better App Revenue
iPhone apps have a greater ROI than Android apps. A fact that adds on to the benefits of iOS App development, to a huge extent.

To get the best of the revenue generation opportunities from your iOS application development process, keeping an eye on the mistakes, tips and tricks, and other related information would be a big advantage. Refer to our mobile app development guide formulated from the experiences of our experts to get an idea of everything worth knowing

## 2. Security of Enterprise Data
Intrusion into a business’s sensitive enterprise data lodged in apps is a big risk with Android apps.  On the other hand, when you compare the iPhone vs Android on the basis of security, iPhone apps protect firmware and software through stringent security measures such as :

- Integrated data handling systems.
- Measures to prevent duplication of data.
- Measures against loss of security due to data encryption.

iPhone users are cushioned against hacking and malware and this again counts under the advantages of [iPhone App Development](https://appinventiv.com/iphone-application-development/) over Android.

## 3. Apps for all business needs
Brands of all scales and sizes have recognized the advantages of having mobile apps for business. Consumers expect mobility and responsiveness from any business they deal with – something that comes attached with the process of iPhone app development for business. Mobile applications are the perfect gateway to reach consumers on the go and remain connected with them every moment.

iPhone apps, custom-built or off-the-shelf, are available to suit all business needs. Despite the fact that the cost of iPhone app development is somewhat higher than other options available, iPhone apps are found to be more lucrative for businesses due to their assured market reach and better-paying clients.

## 4. Established Customer Base
The established user base is the one Apple USP which is also one of the prime benefits of iOS application development. Apple is a pioneer in technology and applications. Although 75% of app users are Android users, Apple has a well-established niche of clients that swear by Apple’s quality and performance. In fact, it is said that once a smartphone user experiences iOS, they will never be satisfied by any other OS. Android apps have to battle stiff competition as there are too many apps crowding this segment.
Fixing external display issues on my M1 MacBook Pro
Tags: macos
Published: 2022-03-30 16:03:14

Connecting peripherals to a laptop should be painless in 2022, right? In this short article I show you what obstacles I encountered when I wanted to connect an external display to my new M1 MacBook Pro. And how I solved the issues.

I have two machines, a Surface Pro 8 for personal use, and a MacBook Pro for the job. To easily re-use peripherals, the external display, webcam, mic, and mouse are connected to a Thunderbolt Dock (Dell WD19TB). Until recently, the MacBook was an i9. With the job, I changed it to an M1 Pro. The 16" MacBook Pro has three Thunderbolt 4 ports. *Anker* has at nice [summary of changes between Thunderbolt 3 and 4](https://us.anker.com/blogs/hubs_edu/what-is-the-difference-between-thunderbolt-3-and-4).

So, connecting a *single* external display to one of the Dock ports should work, right?

[According to Dell, right](https://www.dell.com/support/kbdoc/en-us/000124312/dell-thunderbolt-dock-wd19tb-and-apple-usb-c-hosts).

Like I said, the setup worked like a charm with the i9.

So, what was the issue?

When I connected the M1 MacBook Pro, the external display showed the screen for a few seconds, then went dark. And turned on, showing the screen for a few seconds. And went dark...

Unfortunately, the web is full of stories with external display woes on M1 machines The suggested fixes include tips like

- unplugging the cable connected to the external display and plugging it in again
- rebooting the Mac
- setting the display timeout to *never*

Certainly, I tried them all. None worked.

The HDMI port of the MacBook worked perfectly, and an old USB C-HDMI dongle by Apple worked, too. Consequently, the display shouldn't be the cause for the trouble. And the Dock worked with two other machines. Therefore, it must have something to do with the new Mac.

But, what to do? Buy another Dock?

The Dell Dock supports not only HDMI, but also DisplayPort. So, I decided to hook up my external display to the Dock using a DisplayPort cable. Guess what? On the surface Pro 8, things worked out of the box. On the Mac, though, the screen remained dark.

*belkin* has a very nice support document regarding the compatibility of their Docks with [M1 hardware](https://www.belkin.com/en/support-article/?articleNum=317939). To enable *two* external displays, they suggest installing the Synaptics [DisplayLink Manager](https://www.synaptics.com/products/displaylink-graphics/downloads/macos). While I would have been more than happy to just use *one* external display, I decided to give it a try.

Guess what? It worked.

# TL;DR

If you want to use an external display connected to a Thunderbolt Dock with an M1 Mac and you face issues, try installing the DisplayLink Manager. Although there certainly is no guarantee that it'll work for you, it has, at least, for me.

https://www.synaptics.com/products/displaylink-graphics/small-office/how
Empleos en Data y Analytics LATAM — Mar 2022 - III
Published: 2022-03-30 13:56:46

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻.

✅[Data Analyst- Willis Towers Watson (Perú, Lima)]
(https://pe.indeed.com/viewjob?jk=2e15fc2edaf45b80&tk=1fvdh2jo2pkjq801&from=serp&vjs=3)
✅[Data Engineer- Rappi (Colombia, Bogotá)]
(https://co.indeed.com/viewjob?jk=139cac34a941de95&tk=1fvdh4gr2q06p800&from=serp&vjs=3)
✅[Data Scientist - Cargill (Ecuador, Provincia de Manabí)]
(https://ec.indeed.com/viewjob?jk=2ec55c2fda45be8e&tk=1fvdh6i48pvua800&from=serp&vjs=3)
✅[Machine Learning Analyst - McKinsey & Company (Chile, Valparaíso)]
(https://cl.indeed.com/viewjob?jk=1b045ff2cb481a41&tk=1fvdhcqcg3ode001&from=serp&vjs=3)
✅[Data Analyst - Citi (Mexico, Ciudad de México)]
(https://mx.indeed.com/viewjob?jk=45b20454e0378d94&tk=1fvdhjplqt4u0800&from=serp&vjs=3)
✅[Data Engineer- Virtualmind (Bolivia, Santa Cruz)]
(https://www.linkedin.com/jobs/view/2988970132/?eBP=NotAvailableFromMidTier&recommendedFlavor=ACTIVELY_HIRING_COMPANY&refId=tQ8c6NhkYStnQs9S7gcYTA%3D%3D&trackingId=IQEbT695h5oPJAu%2BcuXeGQ%3D%3D&trk=flagship3_search_srp_jobs)
✅[Data Scientist - Connempathy (Argentina, Buenos Aires)]
(https://ar.indeed.com/viewjob?jk=758f7639ccfd645c&q=Data+Scientist&tk=1fvdhn7lrkf16802&from=web&advn=8231789329374842&adid=386364234&ad=-6NYlbfkN0BfxBmpovY88bKJmGH6RMHLGUJy8rXf8a9ugtjvrfgnHsQvkMLSIvyz8gtADruk4XxfjQsCHOUli5Ncbv050Iv5jKKz-rnIGFGu8qoogbPGf81RVn-jLkjbxYE5jEbljlHWSKBKCb3cIwNf1lrrTnOJZMFLFCHzwgCtPjQpQsbUBruWqeuEiQ99eZ0XXbwiXK4VpKVHmzzm_SybZ1rHaomJpoSscyLdRLvmfsXviOhU4AaV0O1WcxoGqhpxodZx9FuJhqwTU-1IdfYjcoO2tN9h9fc6Xvq13XQJFgyVpRa9BTNRWaR7T7YXfWUZClGMy3gC3bN_K3Oqsso_WqDccG6WFNX8FW4o__vabB2XkbIVlHDluV_Vr7b4&pub=4a1b367933fd867b19b072952f68dceb&vjs=3)
✅[Machine Learning Analyst - FullStack Labs (Venezuela, Caracas)]
(https://ve.indeed.com/viewjob?jk=565116ddcf9bb974&tk=1fvdhomgsu32j800&from=serp&vjs=3)


Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la
Software Dev Weekly Update #9: Back to code
Tags: beginners, webdev, javascript
Published: 2022-03-30 15:39:49

![Computer Code](https://i.imgur.com/DpE5GKO.jpg)

It's hard to believe how quickly the weeks and months flew by. Life can take sudden turns you aren't expecting and I needed to set aside coding for a time to focus on family. But things have settled down and I'm ready to continue the journey!

This past week I stepped back into the world of code and decided to start by refreshing my JavaScript skills. The topics I studied included:

- JavaScript basics ([primitive types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures), [methods](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods), [arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments))

- [Conditionals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

- Logical Operators ([AND &&](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND), [OR ||](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR), [NOT !](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT)

- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)

- Loops ([for loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement), [while loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement), [for...of loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement), [for...in loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement))

If you are a fellow JavaScript beginner then I recommend checking out the [MDN's JavaScript basics guide](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) for a guided learning experience. Their documentation is VERY helpful and I reference it often.

##Week In Review
Though these past few months were a step back in my coding journey, perseverance remains to be the key to accomplishing my goal and I am looking forward to reviewing concepts I've learned so as to get a deeper understanding and come out a stronger developer on the other end.

I couldn't be more excited. Here we go!


![Boat Sailing](https://i.imgur.com/D2nwDhs.png)

---
I hope you enjoyed the read!

Feel free to follow me on [GitHub](https://github.com/RealNerdEthan), [LinkedIn](https://www.linkedin.com/in/ethan-goddard-a4376952/) and [DEV](https://dev.to/realnerdethan) for more!