teleren/devto huggingface dataset:
Best Youtube Channels To Learn React Native
Published: 2023-01-01 19:46:15

Are you a JavaScript developer looking to build a mobile app but do not know where to start? Hurray!!! Allow me to introduce you to what you can use.

React Native is a cross-platform mobile development technology that is used to create mobile apps. It is one of the most demanding mobile technology with good salaries across the globe.

Want to get started? Here is a list of youtube channels to learn react-native from beginner to advance:

- Programming Knowledge
- Programming with Mash
- MissCoding
- Born To Code
- Bug Ninza
- Notjustdev
- Efficient Programming
- Cryce Truly
- Adul Wahab

> Fun fact: React Native was initially designed for iOS development
Pages with Nuxt 3
Tags: webdev, javascript, beginners, programming
Published: 2023-01-01 19:36:54

{% embed https://www.youtube.com/watch?v=tdgUDuD3fS4 %}

Routing in Nuxt.js is based on the Vue Router library, and allows you to define routes for your application that map to the different pages in your application.

In Nuxt.js, routes are automatically generated based on the file structure in the pages directory. Each subdirectory in the pages directory becomes a nested route, with the filename defining the name of the route. For example, if you have a file at pages/users/index.vue, this would create a route at /users. You can also create dynamic routes by using the _ character in the filename. For example, a file at pages/users/_id.vue would create a dynamic route at /users/:id, with the id parameter available in the component.

You can also define routes manually in the nuxt.config.js file using the router object. This is useful if you want to define custom routes or if you want to define routes that do not follow the default naming convention. You can define routes using the routes property of the router object. Each route is an object with a path and a component property. The path property is the URL of the route, and the component property is the Vue component that should be rendered when the route is accessed.

In addition to defining routes, Nuxt.js also provides several other routing features, such as middleware, async data, and navigation guards. Middleware allows you to define custom logic that should be run before rendering a route. Async data allows you to fetch data asynchronously before rendering a route. Navigation guards allow you to define custom logic that should be run before navigating to a new route. These features can all be used to create powerful and flexible routing in your Nuxt.js application.
Don't Forgo the 'Basics' When Learning Shiny New Things ✨
Tags: webdev, javascript, css, codenewbie
Published: 2023-01-01 19:34:10

We've all done it... Discovered a brand spanking new (to us anyway 😜) technology, which gets us all riled up. Maybe you follow a tutorial and come up with _this awesome thing_ or _that creative use_ and can't wait to implement them. You forge ahead only to lose momentum as you hit a _I can't believe I forgot how to do this_ wall.

This happened to me after learning a bit about **Firebase**. The deeper in I got, the more ideas💡I had. I was going to have my first full-stack app and it was going to be amazing!🤸‍♀️

Hold up!✋Before I could dive into the **backend**, there was the whole **frontend** to create. I wanted **modals** to pop up to sign up, and log in and out...

But I'd forgotten how to do that! 🤦‍♀️ I had done it once or twice in the past, but it was definitely not _routine_ for me. 

So, my full charge ahead was halted, but it was still a great learning experience. I had to _uncheck_ ☑️ that item on my _'I got this down pat'_ list.   

It did give me experience coding modals and overlays. And the way I see it 👀, there were two added bonuses:

- My impatience to get to the shiny new thing 🎁 motivated me to deal with this task, and

- It was a better memory 🧠 test, when I finally got back to Firebase!   

Remember there is so much to learn and new knowledge only gives you more chances to practice your skills!
How to use caching to improve JavaScript performance
Tags: javascript, webdev, programming, tutorial
Published: 2023-01-01 19:34:02

Caching the results of expensive operations can improve the performance of JavaScript code by reducing the need to recalculate the same value multiple times. Here are a few tips for implementing caching in JavaScript:

1. **Use a cache object**: To implement caching in JavaScript, you can create a cache object that stores the results of expensive operations as key-value pairs. When you need to perform an operation, you can check the cache object to see if the result has already been calculated. If it has, you can return the cached result, which is faster than recalculating the result.

2. **Use a cache eviction policy**: A cache eviction policy determines how long to keep the results of an operation in the cache. There are several strategies you can use, such as a fixed size cache that removes the least recently used (LRU) item when it reaches capacity, or a time-based cache that removes items after a certain amount of time has passed.

3. **Use a hash function to generate cache keys**: To store the results of an operation in the cache, you'll need to use a unique key to identify the result. One option is to use a hash function to generate a unique key based on the input to the operation. This can help ensure that the same operation is not stored multiple times in the cache.

4. **Invalidate the cache when necessary**: There may be times when the results of an operation are no longer valid and need to be recalculated. In these cases, you'll need to invalidate the cache so that the result is recalculated the next time the operation is performed.

---

## Conclusion

By following these tips, you can implement caching in your JavaScript code and improve its performance. It's important to note that caching is not always the best solution, and you should consider the specific needs of your application before implementing it.
External sites Loading in wordpress (Google map/ api) dsgvo/gdpr- relevance
Published: 2023-01-01 19:20:11




I have a wordpress site 


That fetches external sites content  (5 URLs)



fetch: https://maps.googleapis.com/maps/api...anguage=en&ver =6.1.1

script: https://maps.googleapis.com/maps/api...anguage=en&ver =6.1.1

stylesheet: https://fonts.googleapis.com/css2?fa...00;0,200;0,300 ;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1 ,300;1,400;1,500;1,60...

xhr_ https://maps.googleapis.com/maps/api...?csp_test=true
image
https://maps.gstatic.com/intl/en_us/...s/iw_close.gif
​

 Theme Jobify by Astoundify - GoogleMap 

 Demo: https://jobify-demos.astoundify.com/classic/
What motivation?
Tags: beginners
Published: 2023-01-01 19:14:13

I want the trappings of a successful developer career. A nice home in a country of my choice, lavish lifestyle, full-time assistant, loving spouse...

That vision does nothing to drive me when I'm over a year away from graduation and I need to develop a portfolio from scratch before treating my job hunt like a full-time obsession. 

I have so many distractions within arm's reach. I have bills to pay. I have depression to fend off. 

Yesterday I worked on an assignment that sparked my curiosity. I'm going to try to do that every day, even if it's only for a few minutes.
Register a Linux user to the nginx group
Tags: webdev, beginners, programming, cloud
Published: 2023-01-01 18:10:30

## Case

Upon completing the setup of the GCP instance, NGINX, and cloning the repository, I was unable to pull the repository and received the following error message:

```bash
[username@instance-1 landing-page]$ git pull

fatal: detected dubious ownership in repository at '/var /www/landing-page'
To add an exception for this directory, call:
git config --global --add safe.directory /var /www/landing-page
```

## Solution

I then realized that I had forgotten to add my user to the NGINX group and change the ownership of the directory, which have caused the issue.

To register a Linux user to the nginx group, follow these steps:

- Check the current groups that the user belongs to by running the following command:

```bash
groups username
```

- If the user does not belong to the nginx group, add the user to the group using the usermod command:

```bash
sudo usermod -a -G nginx username
```

- To verify that the user has been added to the nginx group, run the groups command again:

```bash
groups username
```

The output should show the user as a member of the nginx group.


To change the ownership of the directory, run the following command:

```bash
[username@instance-1 www]$ chown -R username:nginx landing-page/
```

Note: The above steps assume that the nginx group already exists on your system. If it does not, you can create the group using the following command:

```bash
sudo groupadd nginx
```
Mastering JSX: The key to unlocking the power of react
Tags: javascript, webdev, jsx, react
Published: 2023-01-01 17:34:53

ReactJS uses the JSX syntax. Here is what you need to know about it:

JavaScript XML, or JSX, is an acronym. You may create code that resembles HTML in JavaScript files thanks to this syntactic extension. A React component's structure is specified using JSX in the React framework.

**Some of its advantages are:**

Because JSX code resembles HTML, which many developers are already acquainted with, it is simpler to understand and create.

Instead of dispersing information throughout your JavaScript code, it enables you to specify a component's structure in a single location.

Because a component's structure may be defined just once and then reused several times, it facilitates component reuse.

Those are its advantages. However, because JSX uses a syntax that is not native to JavaScript, one drawback of writing it is that it might make your code more difficult.

A straightforward JSX component in React may be seen here as an example:

```
const Hello = () => {
  return <div>Hello, World!</div>;
}

```
As seen above, this component will render a div element with the text "Hello, World!" when it is rendered in a React application.

Hence a typical component in react is rendered like:

```
import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>My Component</h1>
      <p>This is a simple component</p>
    </div>
  );
}

```
In this example, the MyComponent function returns a JSX element that defines a div element with a heading (My Component) and a paragraph (This is a simple component).


JSX elements are transformed into plain JavaScript objects by JSX transformers such as Babel. This transformation is necessary because JSX is not natively supported by JavaScript as mentioned earlier.
These objects can then be passed to the React.createElement function, which creates a corresponding tree of elements.

Here is how it takes place:

```
const element = <h1>Hello, world!</h1>;

// Transformed JSX:
const element = React.createElement('h1', null, 'Hello, world!');

```
The "('h1', null, 'Hello, world!')" is then the corresponding tree of transformed elements.

Yep!
That's the basic understanding you should have about JSX.
Please feel free to ask questions in the comment section below.

Thanks.
Typescript event types for React
Tags: typescript, react
Published: 2023-01-01 17:13:46

When you migrate your React applications from Javascript to Typescript you want everything to be typed right! and If you start having the type **any** it means that you are in the wrong direction 😞

Ok cool, you have to create your own types, interfaces... but what about React types, for instance React Events types.
For instance you have a submit event 

```
 const handleSubmit = (event) => {
    event.preventDefault()
    const data = new FormData(event.currentTarget)
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    })
  }
```

Typescript is complaining and you need to provide a type for your event

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

You need to know what type is your **event** here, but how? 🤔
All what you have to do is to write an inline event handler and hover over the event parameter to know that it's of type  `React.FormEvent<HTMLFormElement> ` 👍


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

Great! Here is your new code and Typescript is happy

```
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
 ...
```

Till now everything is good but can't you see that it's a long ugly type 😫 You can make it shorter and nicer.

Let us create a new types file **types.ts** where we can create new types or in our case only renaming existing ugly ones. Examples bellow

```
type FormEvent = React.FormEvent<HTMLFormElement>
type MouseEvent = React.MouseEvent<HTMLButtonElement>
type ChangeEvent = React.ChangeEvent<HTMLInputElement>
...

export { FormEvent, MouseEvent, ChangeEvent };
```
Now our `React.FormEvent<HTMLFormElement>` type became _**FormEvent**_ 😎

Again here is how our code will look like now

```
import { FormEvent } from './types'

const handleSubmit = (event: FormEvent) => {
 ...
```

Short, Clean and Correct.

Thanks for reading and hope it was helpful
Adding Framer motion to your react websites!
Tags: webdev, beginners, react, javascript
Published: 2023-01-01 16:56:45

You can take your React Websites and take them to the next level by using Framer Motion.

**To add Framer motion to your React website, follow these steps:**

1. Install the Framer motion package by running the following command in your terminal:

```javascript
npm install framer-motion

```
2. Import the motion component and the AnimatePresence component from the framer-motion library in your React component:

```javascript
import { motion, AnimatePresence } from 'framer-motion'

```
3. Use the motion component to wrap the elements you want to animate. You can specify animation props such as initial, animate, and exit to define the different states of your animation. For example:

```javascript
<motion.div initial={{ x: -100 }} animate={{ x: 0 }} exit={{ x: 100 }}>
  This element will animate from -100px to 0px when it appears, and from 0px to 100px when it exits.
</motion.div>

```javascript
4. If you want to animate the appearance or disappearance of a component, you can use the AnimatePresence component to wrap the component and its children. This will ensure that any animation defined in the initial, animate, and exit props of the children components will be properly executed when the component appears or disappears.

5. You can also define more complex animations using the variants prop. A variant is a way to specify different states of your animation, and you can switch between them using the animate prop or the useAnimation hook. For example:

```javascript
const containerVariants = {
  hidden: {
    opacity: 0,
    x: '100vw'
  },
  visible: {
    opacity: 1,
    x: 0,
    transition: {
      type: 'tween',
      duration: 1
    }
  }
}

<motion.div variants={containerVariants} initial="hidden" animate="visible">
  This element will animate from offscreen to its original position when it appears.
</motion.div>

```
I hope this helps!
Transform Audio Files Bit Rate
Tags: go, programming
Published: 2023-01-01 15:25:55

I download music for car stereo but it’s not support 160k bit rate files. And this audio files little big (like ~700MB).

So i decided write a program for this. In short project link is [here](https://drive.google.com/file/d/1MEAtasBC69bKA5qSFFHpc26g-DlgoWI2/view?usp=sharing). You must add your files to “input” and double-click main. Your transformed files saved in “out”.

For long let’s code some go code and run it.

First we need ffmpeg library in Windows. You can install from here. Extract it and go bin folder. Copy “ffmpeg.exe” to project folder. And open input and out folders. Then open the main.go file. I use baisic way for this. OS/Exec is used in here.

```go
package main

import (
	"fmt"
	"os"
	"os/exec"
	"path/filepath"
)

func main() {
	err := filepath.Walk("./input", func(path string, info os.FileInfo, err error) error {
		name := info.Name()
		cmd := exec.Command("powershell", "./ffmpeg.exe", "-i", "'./input/"+name+"'", "-b", "128k", "'./out/"+name+"'")
		if err := cmd.Run(); err != nil {
			fmt.Println("Error: ", err)
		}
		return nil
	})
	if err != nil {
		panic(err)
	}

}
```

And build it with go build . Now we can publish it as a folder. Zip it and upload Google Drive.
React Native HTML to PDF NPM Package, File download Wrong filePath problem
Tags: reactnative, filedownload, hmtltopdf, android
Published: 2023-01-01 16:51:56




Go directly to the source code in your node module

`
react-native-html-pdf -> android -> com -> christopherdro -> htmltopdf -> RNHTMLtoPDFModule.java
In the convert() function change this code block


`


```
File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
          new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
          new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));

```

**Replace With** 


```
File path =  new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));


```
290. Word Pattern Leetcode Problem of The Day- 01 Jan 2023
Tags: leetcode, tutorial, discuss, java
Published: 2023-01-01 16:49:21

Hello everyone! It is New year's first day and I have decided to document the questions I solve on Leetcode. This is to keep a record of my thought process of approaching questions and also to document my solutions in an organised manner. 
If you are reading this, hope the blog helps you as well. So here is how I approached the first question of Leetcode daily challenge.


## [Question link:](https://leetcode.com/problems/word-pattern/)
Given a pattern and a string s, find if s follows the same pattern.

Here follow means a full match, such that there is a bijection between a letter in pattern and a non-empty word in s.

**Example 1:**
Input: pattern = "abba", s = "dog cat cat dog"
Output: true

---
# Intuition
<!-- Describe your first thoughts on how to solve this problem. -->
The problem states there are 2 strings and all I have to do is compare them such that every character of 'pattern' corresponds to the 'word' of String 's'.

eg:
  a -> dog 
    b -> cat
    b -> cat
    a -> dog 
(And vice versa)
This statements brings us to the idea that we can use a hashmap to store word and character as key and value.

## Approach
<!-- Describe your approach to solving the problem. -->
All we need to do is map the word of s to the char of pattern and vice versa. Check if they correspond to the same thing using .equals()
Base case: the length of pattern and number of words in s should be same.

**Now code this!**

*How will I get the word?* By using .split(" ")

## Complexity
- Time complexity:
<!-- Add your time complexity here, e.g. $$O(n)$$ -->
O(n)

- Space complexity:
<!-- Add your space complexity here, e.g. $$O(n)$$ -->
O(n)

## Code

```
class Solution {
    public boolean wordPattern(String pattern, String s) {
        String[] word = s.split(" ");
        if(word.length != pattern.length()) return false;
        HashMap<Character, String> map1 = new HashMap<>();
        HashMap<String, Character> map2 = new HashMap<>();
        for(int i=0; i<pattern.length(); i++) {
            char c = pattern.charAt(i);
            String w = word[i];
            if(!map1.containsKey(c)){
                map1.put(c, w);
            }
            if(!map2.containsKey(w)) {
                map2.put(w, c);
            }
            if( (!map1.get(c).equals(w)) || (!map2.get(w).equals(c)) )
                return false;
        }
        return true;
    }
}
```
How to stop Feeling overwhelmed when everyone around you are getting better jobs?
Tags: job, motivation, beginners
Published: 2023-01-01 16:48:18

It's completely normal to feel overwhelmed when you see others around you achieving success, especially if you're working hard and not seeing the same level of progress. However, it's important to remember that everyone's path is different and it's not productive to compare yourself to others. Instead, try to focus on your own goals and what you can do to work towards them. Here are a few things that might help:

1. Set small, achievable goals for yourself. This can help you feel a sense of accomplishment and progress, which can boost your confidence and motivation.

2. Practice self-care. Make sure to take breaks, get enough sleep, and engage in activities that help you relax and recharge.

3. Seek support. Talk to a friend, family member, or therapist about how you're feeling. Sometimes just having someone to listen and offer guidance can make a big difference.

4. Remember that success is not a straight line. There will be ups and downs in any career, and it's important to stay resilient and keep trying.

5. Find ways to stay motivated and engaged in your work. This might involve learning new skills, networking, or finding ways to make your job more enjoyable.

Remember, it's okay to feel overwhelmed at times, but it's important to take care of yourself and keep working towards your goals.
A CMS to solve the Stress of Students
Tags: webdev, career, beginners, opensource
Published: 2023-01-01 16:10:49

On this new year occasion, I started a new project called SemScape. A learning portal made by students for students. As a measure for Learning and Building in Public


#Motto of SemScape
The main goal of SemScape is to reduce the friction experienced by students while learning and preparing for semester exams. The name "Sem-Scape" reflects this goal - to provide an escape from the pain of semesters. Many institutions have their own syllabi and patterns for their semesters, making it difficult for students to find relevant materials online. SemScape aims to solve this problem by providing a personalized and centralized place for institutions to manage study materials.

## How does SemScape achieve this?
One of the key benefits of open source projects is that anyone can fork the code and use it for their own needs. Since SemScape is open source, anyone from any institution can fork the code and host it themselves, as it will be published under the GPL (GNU General Public License).


## How does SemScape work?
SemScape is primarily focused on serving colleges and universities. Students will be able to view or download a list of courses and subjects from the site. Behind the scenes, a selected group of contributors from the institution (either faculty members or students) will upload materials and resources for public use.

## Technical details for tech-savvy users
SemScape is an open source project that I am building primarily for the purpose of learning and having fun. It will be built using Svelte (a front-end framework) and Supabase (an open source Firebase alternative). As mentioned earlier, SemScape will be published under the GPL.

## A Mock-Up of current UI design (WIP)

![UI Mock-up (at least better than my institution's UI/UX)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1v5prprsa0rshzjpkba.png)

## Conclusion
This project is currently focused on helping me learn new things by building and solving a problem that exists in my own institution. I hope to improve and potentially scale SemScape in the future. Feel free to drop your Suggestions