teleren/devto huggingface dataset:
New Video: Pinia for Vue 3: A Better Vuex?
Tags: vue, pinia, javascript, typescript
Published: 2022-07-17 22:48:19

---
title: New Video: Pinia for Vue 3: A Better Vuex?
published: true
date: 2022-03-13 00:00:00 UTC
tags: 
  - vue
  - pinia
  - javascript
  - typescript
canonical_url: https://wildermuth.com/2022/03/13/pinia-for-vue-3-video/
cover_image: https://wilderminds.blob.core.windows.net/img/2022/03/13/cover.jpg
---

As I’ve been using Vue 3 for quite a while, I’ve somewhat shunned Vuex for it’s complexity. The Vuex 4 that shipped with Vue 3 is nearly identical to the Vuex 3 before it. While there were some promised changes in 5, I’m happy to see that instead, they’ve adopted Pinia as an alternative. I am not in love with Pinia (as I use reactive objects more often) but for complex scenarios it reminds me of something closer to the Composition API. Take a look at the video I made about it:

> [Watch](https://www.youtube.com/watch?izQ9mYLuTOM)

[Subscribe to my YouTube Channel](https://www.youtube.com/c/swildermuth)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
Creating QR Code in React
Tags: react, reactnative, qrcode, beginners
Published: 2022-03-12 22:50:07

**QR Code stands for “quick response” code**. It is capable of storing lots of data. It is basically a barcode on steroids. While the barcode holds information horizontally, the QR code does so both horizontally and vertically. When we scans the QR code we can access the information immediately. Here we will see how to create QR Code in react websites or react native apps, the approach will be same for both React JS website and React Native by using the node package.

## Create QR Code in React
Here we will use [react-qr-code](https://www.npmjs.com/package/react-qr-code) node package. It is basically a component for creating QR Code. This library works with React and React Native. You can read about this [package here](https://www.npmjs.com/package/react-qr-code).

## Installation – QR Code Package in React
```ssh
yarn add react-qr-code
```
When using this library with React Native, you will also need to have [react-native-svg](https://github.com/react-native-svg/react-native-svg#installation) installed.

## Using QRCode Component in React
Now, we have Component. We can use this easily by importing and passing some props. Here below is an example usage.

```typescript
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
```
We have also some **props like bgColor, fgColor, level, size, title and value**, read in [detail here](https://www.npmjs.com/package/react-qr-code). And After Implementation you will get result like the image showing below.

![QR Code in React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib2hjvlfokgjnko482fg.png)
---

Please like share and give positive feedback to motivate me to write more for you.

For more tutorials please [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)
React-native new Architecture, what to expect ?
Tags: reactnative, react, javascript, android
Published: 2022-03-12 22:05:04

react-native team has announce that 2022 will be the new architecture release
2022 is going to be the year of the New Architecture in open source.
but why a new architecture? to understand why to take a look at the current react-native architecture
let’s recap the current architecture components
Bridge: handle the communication between JavaScript thread and native/UI thread
JavaScriptCore: engine in android to run JavaScript code in your android and it bundled with your app
Yoga: layout engine takes all flex-box based styles and converts them to native layout width, height, spacing.

## Welcome to the new react-native architecture
react native new architecture


![react native new architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9wuwum4aydqjon7iplq.png)
as we can see the bridge will be replaced with a module called JSI (JavaScript Interface)

## so what is JSI (JavaScript interface) ?

> A lightweight API to embed a JavaScript engine in a C++ application. Fabric uses it to communicate between Fabric’s C++ core and React.

since the JSI is written with C++ that allows JS to invoke the native methods directly which means Less serialization of data between JS and Native/UI thread, with the power of C++ react-native, will expand new systems like smartwatches, TVs.
In another case bridge is only compatible with the JavaScriptCore engine which is not like the JSI, the JSI enables the use of other JavaScript Engines like Chakra, v8, Hermes, etc. that will reduce the app size in android.

## Turbo Modules

at the start-up, The current architecture need to initialize all native modules (e.g. File Storage, Bluetooth ..etc) even if they are not used that making the user stuck in the splash screen for a while, slow load time
So what’s turbo module does is hold only the references for those native modules which mean to call them only when they are required, which will improve the start-up time

## CodeGen
CodeGen will be the type checker, JSI as we discuses above the JSI is written with C++, C++ is a Statically Typed Language, and the react-native apps written with JavaScript which is a Dynamically typed language, so CodeGen will ensure the communication between them
NB: the difference between Statically Typed Language and Dynamically typed language is that in statically typed programming languages, type checking occurs at compile time Conversely, in dynamically typed languages, type checking takes place at runtime or execution time

![statically typed programming & dynamically typed languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puvk4rpjbwrtzcwjxmym.png)

## Fabric

> another big enhancement in the new architecture is Fabric
> Fabric is React Native’s new rendering system, a conceptual evolution of the legacy render system.
we will discuss Fabric in the next article .
Paracetamol.js💊| #77: Explica este código JavaScript
Tags: spanish, javascript, beginners, webdev
Published: 2022-03-12 21:57:39

## **Explica este código JavaScript**

```js
console.log(typeof null == 'object'); // ?
```

A. `true`
B. `false`
C. `TypeError`
D. `undefined`

Respuesta en el primer comentario.

---
Generating and Uploading an iOS Symbol File Using Crash
Tags: huawei, ios, crash, appgallery
Published: 2022-03-12 21:53:05

With the Crash service, you can symbolicate a crash report based on the iOS symbol file to obtain a readable report, when classes, fields, and methods in code are overridden with unreadable code during compilation. This article describes how to generate and upload an iOS symbol file.

####Automatically Uploading the iOS Symbol File

1) Download the [script](https://appfile1.hicloud.com/FileServer/getFile/app/011/111/111/0000000000011111111.20210209092523.34910175183564543772200303094023:20471231000000:0001:B23FB30E45653EFE85008C313B14476B0A7A557FA6553FC17E8CBB6FB0752C90.zip?needInitFileName=true) used for automatically uploading the iOS symbol file.

2) Build the script in Xcode.

a) Double-click the Xcode project and click **New Run Script Phase** under **Build Phases** for the target.

![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t59a7tka83vxubr53qw9.png)

b) Open **dsymUploader.sh** in the script package, copy all content, and paste it to **Run Script Phase**.

![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xrjyo4yjf8838rprw4x.png)

c) Enter your project information in the run script.
Find the following parameters and their values in the configuration file: **\<your_app_id\>**: app ID; **\<your_client_id\>**: client ID of your project; **\<your_agcgw_url\>**: URL of AppGallery Connect; **\<your_collector_url\>**: URL of HUAWEI Analytics; **\<your_client_secret\>**: client secret of your project, which can be obtained under **Project settings > General information** in AppGallery Connect.
d) By default, the symbol file is not uploaded in debug mode or when compiled using a simulator. To modify this, set the values of the following parameters to 1:
UPLOAD_DEBUG_SYMBOLS=1
UPLOAD_SIMULATOR_SYMBOLS=1

3) The symbol file is then automatically uploaded to AppGallery Connect each time the Xcode project is compiled. The log information is as follows:

![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k90fg5sxcojnvxjn6brs.png)


####Manually Uploading the iOS Symbol File

1) First, locate the **dSYM** file. Go to **Products** in Xcode, right-click **xxx.app**, choose **Show in Finder**, and locate the generated **xxx.app.dSYM** file.

![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljoxyaqff5xwt5njuam7.png)

2) Right-click the **xxx.app.dSYM** file and choose **Show Package Contents**. In the **Contents/Resources/DWARF/** directory, find the file with the same name as your app, and compress the file into a ZIP package. Then sign in to AppGallery Connect, click **My projects**, click your project card, and select your app. Go to **Quality > Crash > Mapping file > iOS symbol files**, and click **Upload file**.

![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hafrf45dui33i5fzy9ka.png)

3) You can click **View upload records** to view upload records or delete a specific file.

![Image descriptio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t68xo0nu1wovb3g8zxhd.png)
TaskForce Week Four
Tags: codeofafrica, awesomitylab, bootcamp, productivity
Published: 2022-03-12 21:44:33

Critical Thinking is a term that gets thrown around a lot,
you've probably heard it being used often throughout the years, whether it was in school, at work or in everyday conversation.

When you stop to think about it, just what exactly is critical thinking and how do you do?. it's simply put it's the act of deliberately analyzing information so that you can make better judgments and decisions. 
It involves using things like logic reasoning, and creativity to draw conclusions and generally understand things better, this may sound like a pretty broad definition and that's because critical thinking is a broad skill that can be apply to so many different situations. 

![Critical Thinking pros](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygn0azme9yfrg2aw2hyf.png)
 
You can use it; `to prepare for a job interview, manage your time better, make decisions about purchasing things and so much more`. As humans we are constantly thinking it's something we can turn off but not all of it is critical thinking, no one thinks critically 100% of the time that would be pretty exhausting, instead it's an intentional process something that we consciously use when were presented with difficult problems or important decisions.

In order to become a better critical thinker it's important to ask questions when you're presented with a problem or a decision before jumping to any conclusions you can start with simple ones like what do I currently know and how do I know this, another thing you can use is `5 whys Method` this is a proccess of asking why repetitively until you get to the bottom of the issue (and YES the whys can be more than 5).
This can help to give you a better idea of what you're working with and in some cases simplify more complex issues.

![Critical Thinking Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj8eu3801uhiz4odpwij.jpeg)
 
Let's take a look at how we can use critical thinking to evaluate online information, say a friend of yours posts a news article on social media and you're drawn to its headline. If you were to use your everyday automatic thinking you might accept it as fact and move on but if you were thinking critically you would first analyze the available information and ask some questions what's the source of this article, Is the headline potentially misleading what are my friends General beliefs and do they inform why they might have shared this. 
After analyzing all of this information you can draw a conclusion about whether you think the article is trustworthy.
Run java in windows 10
Tags: java, windows10
Published: 2022-03-12 21:28:17

Windows 10 was the last version developed by Microsoft as part of the Windows NT.5 family, the company released it in 2014 and released it publicly in July 2015, the only difference being that Microsoft offers this app for free users with original copies of Windows 7 and Windows 8.1 updates. . Windows 10 is a complete version of the entire Microsoft product family such as: laptops, tablets, smartphones, Xbox One, among others. This is because of its almost identical code that allows it to have such consistency.

Windows 10 has an interface dedicated to each of the tools the company has, directed at one mouse and another to touch devices. The two integrations have an original menu that is exactly the same as Windows 7, in addition, the desktop operating system, the Microsoft Edge browser and functionality are included, among other new and updated applications. Another innovation is that when you sign in you can be fingerprint or face recognition, also known as Windows Hello.

This app has received high praise from experts in the field, thanks to the development of Windows 10 advertising software over 8.1, Xbox Live integration, as well as Cortana's performance and capabilities as well as changes to Internet Explorer by Microsoft.

One of the most important things is that the menu is built from scratch ´, with a series of apps and options that allow the user to resize and expand the entire screen, this option prefers touch devices.

In addition, a new virtual desktop called Task View has been used. Clicking this button from the task bar or swipe to the left of the screen shows all open windows and allows users to switch between them or switch between multiple work spaces.

Open Java control panel from Windows ten management Panel
Step 1

For this methodology we have to open the electrical device and within the "View by" field we have a tendency to set "small icons"

Step 2

Then we tend to click on the "Java" line to open its electrical device

Open Java control panel from CMD Windows 10
We access the command prompt console and there we have a tendency to execute. Pressing Enter can open the control board.

Open Java control panel from Power Shell Windows 10
The modern Power Shell console is another choice to access this Java panel, for this we have a tendency to open Power Shell and run. Pressing Enter can open the Java control panel.

Step 1

To open Run it's possible:

Step 2

In Execute we tend to enter. we tend to click okay to visit the Java Panel.

Open Java electrical device from Windows ten Finder

Step 1

We visit the beginning computer program and enter "configure", choose "Configure Java"

Step 2

We click and also the panel can open

With these choices you've got the simplest alternatives to access the Java control panel in Windows ten.

Hope it will help.
Read text file in java
Tags: java, textfile, tex
Published: 2022-03-12 21:25:29

There are methods to simply retrieve lines from a file. It is also possible to do more advanced processing depending on the data it contains.

Java
The Java language contains several possibilities for reading a text file. There are methods to simply retrieve the lines from the file. It is also possible to do more advanced processing depending on the data contained in a file. If the file contains numbers, it is possible to transfer them to an integer array.

The Files class is used in the Java language to manage files. It contains the ReadAllLines () method which reads all the lines from the file and transfers them to a string array. If your file contains only integers separated by spaces, you must then use a regular expression to decompose each line into a list of numbers.

Split () method
The split () method splits a character string following a regular expression. We are going to use the \ s character class, which indicates a space character (space, line feed, tabulation) and the + quantifier, to indicate that there can be one or more between the integers. The split () method returns strings. The Integer.valueOf () method converts each string to an integer.

List <Integer> numbers = new ArrayList <> (); for (String line: Files.readAllLines (Paths.get (/path/to/myFile.txt))) { for (String string: line.split (\\ s +)) { Integer integer = Integer.valueOf (string); numbers.add (integer); } }
The Java 8 language provides streams, which allow collections of objects to be transferred directly from one method to another without storing them in memory. The map () method will transfer the contents as an array to the next method. The flatMap () method is used between the method that separates rows into multiple strings and the method that turns strings into integers. Before this method, we have an array (the rows) that contains arrays of strings (the strings separated by the regular expression). This method will transform this two-dimensional array into a one-dimensional array containing all the strings to be transformed into an integer. Finally, the collect () method stores the result of transforming entire strings in the integer list.

List <Integer> numbers = Files.lines (Paths.get (/path/to/myFile.txt))
 .map (line -> line.split (\\ s +)). flatMap (Arrays :: stream)
 .map (Integer :: valueOf)
 .collect (Collectors.toList ());
Conclusion
Published: 2022-03-12 21:17:56

The Odin Project is around to help you succeed. The people who wrote the project are professionals and have very successful careers. Among the team are ex-teachers, Red Hat employees, large bank employees, and startup employees. The skills and expertise the team brings together for everyone to learn from is immense. There’s good reason to trust The Odin Project and the team behind it. Now, with that being said, get out there and become a success story.
Thoughts on the Past Year and my Career Path Moving Forward
Tags: devops, jobsearch, career, workfromhome
Published: 2022-03-12 20:18:26

---
title: Thoughts on the Past Year and my Career Path Moving Forward
published: true
description: A retrospective on what I've learn and how I've grown in the past year.
series: The Pandemic and Working From Home, What I've Learned and What I can Share.
tags: devops, jobsearch, careers, workfromhome
---

## Working From Home
From a coding bootcamp through a year and a half of working at a great company, I've been working from home. This has been a blessing, I moved from a tiny apartment to a lovely home where I feel safe and my family has room to thrive.

My most natural self needs to interact with people (the extrovert in me) so working from home I've had to figure out new ways of staying focused and "full brained" on the task(s) at hand. My most recent experience has shown me I have space to learn more techniques to up my game and I am using this time between jobs to lean into learning these.

## DevOps
Where does DevOps fit in this? For me it ties in with the last year and half. I was given an internal project at my previous company to build out CI/CD pipelines. Cool; at the time I didn't even know what that was; little did I know how large of a world was just stepping into. Fast forward roughly 8 months and what I had built had matured into a stable, powerful and adaptable pipeline for website development and deployment. I also feel head over heals this work, it clicked with me like no other work I've done in 15 to 20 years.

In just the 2 weeks I've been job searching I have had the time to dig deeper into the DevOps universe. I really like and excited about the fact that it's not a highly established, formalized or well-defined practice yet. It's fluid and little different for each company. The overall methodology / philosophy of a collaborative team of different skill sets coming together to work across walls (get rid of them really) to build automated, scalable, testable and adaptable IT solutions is right up my alley. 

This collaborative, cross-functional way of working speaks to me, it calls back to the days that I was in theatre as a performer and as a technician and director. DevOps, to put it simply, is how I've always wanted to work in IT. 

## Let's do This!
So I'm back on the market, looking hard at the roles that focus or want a focus in DevOps processes.
Strategically building your portfolio
Published: 2022-03-12 21:17:34

There is no degree or certification for finishing The Odin Project, but it does leave you with the potential for a killer portfolio. There are times when you should spend extra time on a project, and times when you shouldn’t. Not every project should be a portfolio piece.

# Foundations isn’t a strong portfolio generator

People tend to spend a lot of time on the first few projects expecting them to be portfolio pieces; the problem with this approach is that you will be building more impressive projects very soon after Foundations. Save your time and energy for those projects. The capstone project for Foundations, however, *is* worth spending extra time on to ensure you are demonstrating the best of your abilities at that time.

# Pick projects you like and use them as portfolio fodder

You will like some projects more than others. Building a portfolio can be a lot more effective if you spend the time on projects you are enjoying. Pick a few projects past Foundations that you really enjoy, go the extra mile, and make them your own.

# Always spend extra time on capstone projects

Spend the most time on the final projects for each course. This will ensure you have strong portfolio pieces and will help you understand if you need to go back into the course and refresh.

# Use git properly

Git is **very** underrated among budding developers. Don’t be afraid to experiment on your code; if you’re properly using git, you can easily go back to a working state (which helps immensely with refactoring). Use branches for experiments; if they’re successful, merge them with your main branch, otherwise, toss them out! Writing good commit messages means you will know what you were doing when you come back to the project in 2 weeks. This is a great resource on commit messages: https://cbea.ms/git-commit/