teleren/devto huggingface dataset:
Client-Side Authentication is Easy with AuthBee!!!
Tags: javascript, webdev, opensource, npm
Published: 2021-12-21 17:00:41

Hello Everyone! I hope you are doing well. So today I'm going to introduce you AuthBee, a JavaScript library that you can use to implement client-side authentication without much pain.

## Why you need to choose AuthBee?

When I started coding, I felt really difficult in implementing client-side token authentication with JWT because of some complex concepts such as Automatic log out, etc... So, in AuthBee all those concepts are concatenated to simple functions which are exported from [authbee](https://www.npmjs.com/package/authbee) package and you will only need to import them from the package and call them in your program with respective parameters.

## Main features of AuthBee

* Login
* Logout
* Get authentication data provided when login (token)
* Validate token and automatically logout when necessary

## How to use AuthBee

You can simply call the function exported from the package and call them in your JavaScript code. For more details, you can refer to [documentation](https://github.com/shakyapeiris/AuthBee/blob/main/README.md#how-to-use-authbee) and the [example](https://github.com/shakyapeiris/AuthBee/tree/main/example) in GitHub [repo](https://github.com/shakyapeiris/AuthBee.git).

## Want to contribute to AuthBee?

I always highly appreciate your contribution to this project and, the reason for the development of these types of projects is people like you. So no matter whether you are a beginner or an expert, you are welcome to contribute and make sure you have already read [contribution guidelines](https://github.com/shakyapeiris/AuthBee/blob/main/CONTRIBUTING.MD) of the project.

## Future of AuthBee

For now, I'm planning to add the following features to the project. If you have any idea on a new feature or found a bug then please report it to the issue section of the [github repo](https://github.com/shakyapeiris/AuthBee).

* Add typescript definitions
* Make package compatible for SSR

**So that's about the AuthBee and hope this package will be useful to you in your future projects. Thank You!!!**
Styled Components for React Native the way they should have been
Tags: reactnative, typescript, css
Published: 2021-12-21 17:00:00


To be honest, I've always felt that using 💅🏼`styled-components` to style `View`, `Text`, `TouchableOpacity` and other native components was very cumbersome. 

React Native does not really work with DOM, so *there is no real css engine* underneath. This means that a lot of css functionality is simply not available and 90% of the time you will be using very basic css attributes: flex layout, colors, fonts, etc..

Then there is an issue with template strings - it is NOT easy to use them! Sometimes you end up creating nested template strings and needing to have special VS Code extensions to write `css`, and remember to put `;` at the end of each line, etc.. 

And after you've managed all that, `styled-components` will generate the React Native styles from your template string and will pass them to the component. Yeah, cool...

So I thought to my self - why not use the native styles in the first place and avoid all the template string mess?

I googled a bit and found this [this article](https://dev.to/lenilsondc/writing-a-styled-hoc-for-react-native-using-typescript-3i25), which inspired me to create an alternative to styled-components for React Native.

And thus the 💄`styled-rn` package was born :)

Why it better than 💅🏼`styled-components/native`?

Well, first of all, using styled components in React Native should be fun, but as I already mentioned, template strings are not fun.

Also:

- `styled-rn` gives you access to ALL React Native style props
- `styled-rn` is faster because it does not do tedious string template processing
- `styled-rn` is easier to use (again, no messy string templates)
- `styled-rn` is fully typed and has a nice API
- `styled-rn` supports component attributes, custom props, theme via `ThemeProvider`, multiple style objects and more..
- `styled-rn` has a shorter name ;)


## Usage:

```
npm i styled-rn
```

The `styled-rn` API is almost one-to-one with the `styled-components` API, but everything happens in Javascript with full Typescript support:

```ts
import { styled } from "styled-rn";

export const Container = styled.View({
  flexDirection: "row",
  backgroundColor: "cyan",
});
```

Of course you can style any other component as well:

```ts 
// Use with any component
export const CoolAndBoldComponent = styled(CoolComponent, {
  fontWeight: "bold",
});
```

You can also pass props to your components via the `attrs` key:

```ts
// Pass props to the styled component (attrs)
export const NonWrappingText = styled.Text({
  color: "blue",
}, {
  attrs: {
    numberOfLines: 1,
    ellipsizeMode: 'tail',
  }
});

```

I hope it is obvious to see how much cleaner and nicer the code looks compared to the template string approach.

💄`styled-rn` is a very small library, but it provides robust functionality and smart typings for all the styles, props and attributes.

You can find more examples and docs on the project's [github](https://github.com/velsa/styled-rn)

Thanks and Enjoy 💄`styled-rn`! :)
Consuming 3rd Party REST APIs Golang {GET method}
Tags: beginners, go, restapis, webdev
Published: 2021-12-21 16:53:42

Hello World!, 

This is my first internet post. So there may be mistakes, please ignore it, thank you.

Today, I am going to write small and simple tutorial about consuming 3rd party API in Golang.


```golang
package main

import (
	"encoding/json"
	"fmt"
	"io/ioutil"
	"log"
	"net/http"
)

func main() {
	// To consume 3rd party API, we need to build request object.
	// This can be anything you want to consume, just paste the URL,
	// usually, we test the URL in API clients such as Postman or through cURL, then
	// we can proceed for consumption.
	req, err := http.NewRequest(http.MethodGet, "https://jsonplaceholder.typicode.com/todos/2", nil)
	if err != nil {
		log.Fatalf("Failed to create request object for /GET endpoint: %v", err)
	}

	// Now add all the required request headers, mostly APIs secured with access tokens
	// req.Header.Add("Authorization", "Bearer "+token)
	// And today's application development, most of wire format is JSON.
	// if the wire format we wanted to be different, we could request but server has to support it.
	req.Header.Add("Content-type", "application/json; charset=utf-8")

	// we can build our custom http clients but here we are using deafult http client
	// when we use custom http client, we can send context object, timeouts etc..
	client := &http.Client{}
	resp, err := client.Do(req)
	if err != nil {
		log.Fatalf("Failed to send HTTP request: %v", err)
	}

	// here we are reading the response body from the server
	body, err := ioutil.ReadAll(resp.Body)
	if err != nil {
		log.Fatalf("Failed to read response body: %v", err)
	}

	// Always close the response body
	defer resp.Body.Close()

	// now we need to read this to our native Golang type
	// as the map data structure is close to JSON, we could use it
	// in fact we could this for most of the wire formats.
	data := make(map[string]interface{})

	// this step de-serializes JSON data to our native Golang data
	json.Unmarshal(body, &data)

	// let's print the map data by iterating over it
	for key, value := range data {
		fmt.Printf("%s: %v\n", key, value)
	}
}

```
Thank you.
What is Try Catch in JavaScript?
Published: 2021-12-21 16:52:43

What is Try Catch in JavaScript?
The latest version of JavaScript has added exception handling. JavaScript implements the try-catch structure and the throw operator to handle exceptions. You can find exceptions created by the developer and runtime, but you can not get JavaScript syntax errors.

The try command is used to define a block of code to test for errors during execution. While the catch command is used to define a block of code that must be executed in the event of an error in the try block.

**JavaScript Array**

An array is a data structure that contains a list of elements that store multiple values ​​in a variable.

The purpose of using an array is to store multiple values ​​in a single entity of a declared variable. Arrays are used when we want to regularly access elements via a variable. Strings, Boolean values, and numbers can be stored in a single array.

Different methods of JavaScript array to perform various tasks such as:

push () - Easy to delete elements and add new elements while working with arrays. The push () method adds a new element to the end of an array. The return value is the length of the new array




Push () does not return the value added to the array. Returns the new length of the array only.

pop () - The pop () method is used to remove the last element from the array. Returns the returned value.


Pop () returns the deleted value, not the length of the array like Push ().

shift () - Shifting is similar to popping and works on the first element instead of the last element. The shift () method is used to remove the first element of the array and move the other elements to a lower index. Returns the transferred string to you.

Shift () works like pop (), but returns the first element of the array instead of the last element.

unshift () - The unshift () method adds a new element to the beginning of an array and deletes older elements. It's similar to Push () and returns the length of the new array.
What does the “this” keyword indicate in JavaScript?
Published: 2021-12-21 16:48:09

The JavaScript this keyword indicates to the object it belongs to. Depending on whether it is used, it has several values. Such, 

- This keyword indicates to the owner object when it is used in a method.
- This keyword indicates the global object when it is used alone or in a function.
- ‘this’ is undefined when it is used in a function and in a strict mode.
টেকনাফ উপজেলা ছাত্রদলের বিজয় র্্যালী।
Published: 2021-12-21 16:36:21

স্বাধীনতা সুবর্ণ জয়ন্তী ৫০ বছর উদযাপন উপলক্ষে টেকনাফ উপজেলা ছাত্রদলের বর্ণাঢ্য শোভাযাত্রা ও বিজয় র্্যালী।
How to build a full stack application with Supabase & ReactJS
Tags: tutorial, react, supabase, fullstack
Published: 2021-12-21 16:35:36

---
title: How to build a full stack application with Supabase & ReactJS
published: true
description: Introduction to new YouTube Video how to build a full stack application with Supabase & React.
tags: tutorial, react, supabase, fullstack,
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shb05c7k23ti3ju6pl75.jpg
---

React JS is one of the most (if not the most) popular frontend libraries nowadays. It helps you to build super fast user interfaces.


Supabase is an easy to use tool that helps you to create your applications backend.

With both tools combined you can create your own full stack application. Include different kinds of Sign Ups, persist data with a PostgreSql database as well as file uploads with their storage service.

I made a series for my YouTube Channel, where i build "Movie Tinder" App. The first video of this series contains the "Magic Link" Sign In method. For that I am using React Router v6 as well as custom hooks and React Context to create protected Routes.

If you have any questions [hit me up von Twitter](https://twitter.com/Dom_TheDev)

**Update**

In video number two of this series, we fetch videos from themoviedb API using axios for our http requests. To create a users watchlist we persist data in the database using the supabase client.

**Update** **Update**

In video number three, we create an profile page where users can update their profile. For that we create a storage bucket in our supabase project. Check out video #3.

You can watch the videos on [My YouTube Channel](https://www.youtube.com/channel/UCAa2t4QIxlaUuPO2FKq5TDw) or here below: 

Part 1:
{% youtube -5UJjJZzznw %}

Part 2:
{% youtube LbnTvfLOcDs %}

Part 3:
{% youtube o1A_7B5T-Qs %}
Como crear un blog en django 4 - 2022
Tags: python, javascript, django, blog
Published: 2021-12-21 16:34:41

Hola, ¿qué tal,
en esta ocasión les mostraré como realizar un pequeño blog en django 4 con Ckeditor.
Pueden encontrar el código en el siguiente enlace
https://github.com/rodrigolazo/blog

{% youtube https://www.youtube.com/watch?v=_C1NlYXNMIo&t=622s %}

**Comandos de ayuda**

```
pip install virtualenv

virtualenv env
.\env\Scripts\activate 

django-admin startproject myblog
py manage.py startapp  blog

python manage.py makemigrations
python manage.py migrate

python manage.py runserver
py manage.py collectstatic

pip install -r requirements.txt

```
We no longer support global installation of Create React App
Tags: react, javascript, programming, tutorial
Published: 2021-12-21 16:30:01


Whenever i was creating react app using 
```
$ npx create-react-app app-name
```

It was showing error something like this 

```
We are running `create-react-app` 4.0.3, 
which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

```
I have got two solutions for this for that go through through this video in details : 

{% youtube Q7i8kDJGyHE %}
CSS Animation
Tags: css, tutorial, beginners, discuss
Published: 2021-12-21 14:33:05



CSS animation is a useful and powerful tool. It makes a website interesting and creatively exciting, In this article, we round up some of the coolest CSS animations. The animation property in CSS can be used to animate many other CSS properties such as color height width. Each animation needs to be defined with the @keyframes.CSS animations are initiated by specifying keyframes for the animation these keyframes contain the styles that the element will have. Now we discuss some CSS animation properties.

1.@keyframes: It is used to specify the animation.
 Syntax:
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
2.animation: This is a property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
 Syntax:
animation
[ name duration timing-function delay iteration-count direction fill-mode play-state ]

3.animation-delay: It specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.

4.animation-direction: This property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

5.animation-duration: It specifies the time duration taken by the animation to complete one cycle.

6.animation-timing-function: establishes preset acceleration curves such as ease or linear. A keyframe's timing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property. 

7.animation-iteration-count: the number of times the animation should be performed. This property is specified as one or more comma-separated values.
6.animation-fill-mode: This property sets which values are applied before/after the animation.
animation-play-state: It specifies if the animation is running or paused.
9.animation-name: It specifies the name of @keyframes animation.

we can comma-separate the values to declare multiple animations on a selector as well. Animating most properties is a performance concern. So, there are certain combinations that can be animated safely:
transform: translate()
transform: scale()
transform: rotate()
opacity
SSC Result 2021 to be published by 27th December 2021 in Bangladesh
Tags: news, results, education, beginners
Published: 2021-12-21 16:12:24

Education board of Bangladesh has announced SSC result 2021 will be published by 23-27th December 2021. In this year so 11 education board has participated in the SSC and equivalent examination. The examination started on 14th November and finished on 23rd November 2021. Within 30 days after the examination results are going to publish in this month after couple of days. 
**Important links:** 

- [SSC Result 2021 Check Online](https://bestbdjob.com/ssc-result/)

- [SSC Exam Result 2021 Full Marksheet](https://resultmama.com/ssc-result-2021/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fravvpn713z0v9uqjldu.jpeg)
API and CRUD system
Published: 2021-12-21 15:44:51

API stands for application programming interface, which is a set of definitions and protocols for building and integrating application software.

REST API stands for Representational State Transfer and is an architectural pattern for creating web services. It was developed by Roy Fielding in 2000 and has led to a growing collection of RESTful web services that follow the REST principles.

Rest API Data sharing clients and servers. Its easy design style is used creating HTTP or other. REST applications use methods **GET, POST, DELETE** and **PUT.**

**GET Methods**

> Stored data call from the server to client-side using GET method. The GET method works as a data read system.

**POST Method**

> POST Method used to create new data to save server.

**DELETE Method** 

> Delete method used for data delete to server.

**PUT Method** 

> This method is used when any data information changes or updates then used put method.
Media Query (CSS)
Tags: css, tutorial
Published: 2021-12-21 15:20:29

### What is Media Query
**Media Query** is introduced on CSS3. Media Query is a very useful tool. Media Query in CSS is used to make responsive designs for various platforms. We use the `@media` rule to include a block of CSS properties only if a particular condition is true. You have to mention `breakpoint`'s, it defines where certain parts of the design will behave differently. Media queries can be used to check many things, such as:
- Width and height of the viewport
- Width and height of the device
- Orientation (Landscape/Portrait)
- Resolution

You can also use media queries to specify that specific styles are only for printed documents or for screen readers (media-type: print, screen, or speech). Media queries can also be used to change the layout of a page depending on the orientation of the browser.

#### Structure:
![Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gjm1y5v6frpkq204wwj.png)

#### Demo:
![Code Screenshot 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dk9cm0bcrtyin0fpz8zz.png)
 

#### Meaning of and, only & not:
And	: For using two or more media query breakpoints or media types. 
Only	: For using media query on an Older version of browsers.
Not	: For inverting the meaning of an entire media query.

You can use external CSS for different media to keep CSS file's more clean and organized.

![Code Screenshot 03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tf0givs3z8wpw9eeqwi.png)


### Typical Device Breakpoints
There are tons of screens and devices of different sizes, so it is tough to create an exact breakpoint for each device. To keep things simple you could target five groups:

![Code Screenshot 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/087amm7obo4l2ge0mlr8.png)


### Browser Support 
The table data define the first version of the browser support the Media Query -

![Browser  Support Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wn81661gnt8zvre8rjft.jpg)
TIL: Croc - Securely transfer files via CLI
Published: 2021-12-21 15:09:31

### Introduction


[croc](https://github.com/schollz/croc) is a tool that allows any two computers to simply and securely transfer files and folders.

### Install


- macOS
```
brew install croc
```

- Ubuntu
```
curl https://getcroc.schollz.com | bash
```

- Window
```
scoop install croc
```

### Usage


1. Send file or folder
```
croc send [file(s)-or-folder]
```

2. Receive the file

```
croc [code from output]
```

More feature, please visit to https://github.com/schollz/croc
What about Programmable Architecture ?
Tags: programmable, architecture, pattern
Published: 2021-12-21 15:02:08

---
title: What about Programmable Architecture ?
published: true
description: What's Programmable Architecture ?
tags: programmable , architecture, pattern 
---

## What's programmable architecture?

I am not sure if "Programmable Architecture" is an original concept from me but here I use this phase as a architecture pattern firstly. Programmable architecture is ... next generation architecture ? The future of architecture ? Maybe both but my point is everything will be programmable , not only IT infrastructure but also the whole world ,include your gene (you should heard that scientist can edit genome sequence by changing ATCG into ATGC )!

Internet connected people while IoT connected things .So there are many connections between people and people, people and service , people and things, things and things . For example, intelligent building, auto-driven cars, family robots ... Why these connections can work correctly ? My answer is they are all programmable .



## Next generation architecture ? 

From C/S, B/S, SOA to Microservice, Service Mesh ...  software system architecture will continue to evolve . What's next ? Is there a final or the last state ? I do not know. 

Let's review things about software design & architecture pattern before discover software architecture further .

Software design evolution:
1969 Structured
1983 Object Oriented 
1995 Design Pattern
2002 Design Principle , Monolithic 
2004 DDD ，Layered Architecture
2009 DCI 
2010 DSL 
2012 Microservice 
2010 Service Mesh , Cloud Native
... 


And also let's review cloud tech. stack :
IaaS
PaaS
SaaS
BaaS/FaaS with serverless 
XaaS ... 


Find what ? Developer hope to use system, subsystem, module , library more and more freely , and also hope to update freely . The limitation of "free" is programmable . Cloud lets server(CPU cores, MEM, Network ...) can be using freely . In essence cloud lets server be programmable. So maybe next generation or the final architecture is everything can be programmable , we can name it "Programmable Architecuture", and the hot word "Metaverse" actually is programmable world ! What do you think ? Let me know.
Meet 9 New ODBC Drivers for Cloud Services
Tags: odbc
Published: 2021-12-21 14:34:16

---
title: Meet 9 New ODBC Drivers for Cloud Services 
published: true
description: Devart rolled out new ODBC drivers that enable fast access to live data from anywhere.
tags: odbc
//cover_image: https://direct_url_to_image.jpg
---
Devart, a recognized vendor of world-class data connectivity solutions for various data connection technologies and frameworks, announced the release of new [ODBC Drivers](https://www.devart.com/odbc/?utm_source=devto&utm_medium=referral&utm_campaign=pr_odbc_21.12.2021) for cloud resources with standard ODBC API functions and data types support. Now, with these drivers, the users have fast access to live data from anywhere. 

The new ODBC drivers provide direct access to the cloud services through HTTPS from different analytics, BI, ETL, reporting, database management, and IDE tools and programming languages on both 32-bit and 64-bit Windows.

**Here is the detailed list of the sources:**

**- Cloud CRMs:** Streak
**- Cloud Accounting Applications:** Zoho Books
**- Ecommerce Applications:** Zoho Invoice, Zoho Inventory, ShipStation
**- Helpdesk Applications:** Freshdesk, Zoho Desk
**- Payment Processing Applications:** Stripe
**- Other Applications:** Zoho People

To learn more about the recent release, visit:   
https://blog.devart.com/nine-new-odbc-drivers-for-cloud-services-released.html

**ODBC Drivers** are high-performance connectivity solutions with enterprise-level features for accessing the most popular database management systems and cloud services from ODBC-compliant reporting, analytics, BI, and ETL tools on 32-bit and 64-bit Windows, macOS, and Linux.

**About Devart**
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 
For additional information about Devart, visit https://www.devart.com/.