teleren/devto huggingface dataset:
User re-authentication in your React app.
Tags: javascript, webdev, react, tutorial
Published: 2022-06-10 08:18:04



An approach to authenticating your users after a period of idle time.

![](https://cdn-images-1.medium.com/max/2000/1*77mZX1a8XD-0anpgbYdCdQ.png)

## Intro…

One of the ways to beef up your app’s security is to re-authenticate users when necessary. In this guide, we’re going to implement a re-authentication feature on a frontend application using react-idle-timer library to detect when a user has been idle after some time. For this guide, the authentication setup will just be localStorage .

**React-idle-timer **is a javascript library used to detect and monitor user activity on your web application. We’ll be using it for this application, run yarn add react-idle-timer to install on your repo.

## The App.

Our Nextjs app will have 2 pages namely login.js and index.js . login.js will contain the login view and logic while index.js will contain our “dashboard” screen and the re-auth logic.
{% gist https://gist.github.com/chani24/1851bbe63a191e237cc4070c7cf7ff33.js %}
In login.js we’ll create a simple login form and a login function that saves a random token to localStorage and redirects to our index.js page.

*For this guide, only the form button is truly functional but ensure your form inputs are also functional in your app.*

Next up is our index.js page where the re-auth feature is implemented.

We import useIdleTimer hook from react-idle-timer and call it passing in some properties.

    const { isIdle } = useIdleTimer({

    onIdle,

    timeout: 15000

    });

We’re passing 2 properties;

 1. onIdle: a function that is called when our user is idle after some time.

 2. timeout: a period (in milliseconds) of inactivity after which our user is declared idle (onIdle is called). We made timeout 15 seconds for this guide, however in a real app timeout can be 15–30 minutes

useIdleTimer *accepts other properties like onActive, crossTab, startManually, etc. but for the purpose and simplicity of this guide, we’ll stick to just 2 properties.*
{% gist https://gist.github.com/chani24/ec89c2dc5325d32c59cddddd36013d79.js %}
Finally, In our index.js file we create a modal that becomes visible when a user has been idle and the user enters their password to re-authenticate themselves. If they close the modal or reload the page logout function is called.

We’ve gone through a simple way to implement re-authentication in your web apps. You should check out the [react-idle-timer documentation](https://idletimer.dev/) for more info and use cases.

Happy coding…..
Media Queries in CSS
Tags: css, html, webdev, beginners
Published: 2022-06-10 12:57:40

Media queries are one of the main source behind our trending moderns websites. It is use to create responsive websites.
**Responsive** That websites adjust in all media screens, Mobiles screens Tablets iPad tv desktops etc. 
As we know @Media is one of the most powerful property in css. This property use with Three main parameters 
1 **Print** in this parameter 
When someone want to take print of our website or specific Area when this media query apply 
For Example:  without CSS media query print is like that 👇
             
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5661fl788tsas0vetp7.png)

than we applied sab media querry on body 

```
@media print{
    *{
        color: blue;
    }
}
```

after that the result of prink is like that 👇
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr6ae7nmblt6l7xrfhsa.png)

2 **Speak**  Speak media query is not have a common use in all websites it is mostly used accessible website for all blinds & eye sight weak people. In this developers do some JavaScript with the help of JavaScript website content read automatically in voice as blind people can easily understand.  
 
3 **Screen** This media is commonly use in all websites today era, by the help of screen media query we can create responsive website. 
  **Responsive** Means fit in all screen types laptops, mobiles, desktops tv and other large screen. 
  In this developer use Hight width of different devices and than style web page according to width & height,
    

```
 @media screen and (max-width: 480px){
     .container{
        margin: 2rem;
        padding: 4rem;
        background: rgba(220, 67, 98, 0.277);
     }
     .container h1{
        font-size: 2rem;
     }
 }
```
In upper given code max-width defines mobiles devices.

and tablets are 

```
 @media screen and (min-width: 481px) and (max-width:768px){
     .container{
        margin: 2rem;
        padding: 4rem;
        background: rgba(133, 67, 220, 0.277);
     }
     .container h1{
        font-size: 2.5rem;
     }
 }
```
this one is styling for tablets 

some useful breakpoints are

> ↪ 320px --- 480px  Mobile devices 
> ↪ 481px --- 768px  iPads Tablets
> ↪ 769px --- 1024px  small screen laptops 
> ↪ 1025px  --- 1200px Desktops large Screens 
> ↪ 1201px --- and more  Extra large screens Tv etc.
Phalcon v5.0.0RC2 Released!
Tags: phalcon5, release, rc
Published: 2022-06-10 12:53:28

---
title: Phalcon v5.0.0RC2 Released!
published: true
date: 2022-06-10 12:40:59 UTC
tags: phalcon5,release,rc
canonical_url: 
---

Phalcon v5.0.0RC2 has been released!!

This release addresses a few bugs identified.

As always, a huge thank you to our community for testing, reporting bugs, enhancing the framework in any way possible!

The changelog for this release ([v5.0.0RC2](https://github.com/phalcon/cphalcon/releases/tag/v5.0.0RC2)) is as follows:

### Changed

- Changed the `StringVal` filter to now use `htmlspecialchars()` [#15978](https://github.com/phalcon/cphalcon/issues/15978)

### Fixed

- Fixed `Phalcon\Http\Response::getQualityHeader()` to check if the server variable is `null` before performing `preg_split` [#15984](https://github.com/phalcon/cphalcon/issues/15984)

### Added

- Added `StringValLegacy` filter using `filter_var()` for PHP < 8.1 [#15978](https://github.com/phalcon/cphalcon/issues/15978)
Advantages of buying pet items online
Published: 2022-06-10 12:39:33

Why buy pet supplies online? There are many reasons why people take advantage of online shopping for their pet products.

You can buy pet products on the web, which include: pet food, pet care equipment, pet furniture, pet carrying cases, pet accessories, aquariums, and accessories, pet care books and more. Many people use the internet to buy all sorts of items for themselves and find that buying other things they need online, such as household items and their pets, saves time. With a busy lifestyle, doesn't it make much more sense to order dog food for your household with the click of a mouse instead of facing shops and parking lots?

**What kind of pet supplies?**

Whether you have a dog, a cat, a hamster, a rabbit, a parrot or an aquarium full of fish, there is definitely a retailer that sells exactly what you want on the web. If you don't shop online because you don't have a credit card, it's okay.

**Variety**

The variety of products available makes shopping on the web a great option. You can find things you wouldn't normally see locally for your pet. This can be especially useful for consumers living in rural areas.

**Comfort**

The idea of ​​saving time for shopping is a good one. Because many pet foods and pet items come from specialty stores, shopping for pets means an extra trip. The alternative is to buy regular food from your grocery store, and commercially available food may not adequately meet your pet's needs. The convenience of ordering pets online increases for this reason.

**Visit Here: [Pet shop online](https://e-petshop.ro/)**
Docker series (Part 9): Basics of Docker file
Tags: docker
Published: 2022-06-10 07:21:26

Dockerfile is the file which helps creating an image.

Lets learn the basics from a basic docker file. You may know more : https://docs.docker.com/engine/reference/builder/

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

Now, lets learn line by line 

1. First  we import from some distribution so that we can save our time.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9oebjn8i5f1nvsifjk5.png)
We have imported from debian distribution. It surely can vary.Here we are using the release "buster-slim"

2. Give the way to set environment variables. 

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


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

3. Run command which runs several shell commands of the distribution you are using.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4veyrmpcwkmmtifu17w.png)
  
it uses && to keep the within 1 layer
4. Pointing our log files to stdout & stderr

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtt8uuito9q68abzdqst.png)
Basically docker handles all of our logging here .

5. Expose ports

By default no ports are open but we can open them by listing them here

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gw3d8091ykuyezqpvye.png)
6. Final commands to run


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

So, these were the basics of Dockerfile.

<img src="https://c.tenor.com/Tvd3VKwtse0AAAAC/cat-cute.gif">
Shopify Pricing
Tags: shopify, ecommerce, webdev, onlinestore
Published: 2022-06-10 12:33:23

Shopify is one of the leading e-commerce website builders. It’s well known for its apps and inbuilt features. Shopify over the years has made it simple for small to large eCommerce businesses to operate smoothly online. It has various plans and can also impose additional charges.

So we have reviewed Shopify pricing and have mentioned lots of tips and tricks on how one can save with Shopify pricing. we are highlighting one of the methods on Shopify pricing.

**1. Save On Shipping Rates**

Problem: Automated shipping carrier rates are available on the advanced plan ($299/mo) or only after purchasing any of their annual plans.

Solution: Buy the basic monthly plan ($29/month), then install Shopify apps like Easy ship (free forever), and Shipping Rates Calculator Plus ($6.99/month), These apps offer more functions for shipping services & functionalities on your Shopify website without $299 plan!

Shipping Rates at Checkout

shipping Carrier Rates
Using this idea, you can save up to $270/month or $3240 per year!



**2.Save on Shopify apps
**
Shopify has over 6000+ apps in its app store to add new functionality to stores. Just search for it in the app store, and it will provide the list of free and paid apps, here every app provides a trial period and may also have a free plan. So you can test it before Continuing with the paid plan, also some apps are free forever.

“Free” means free forever. All features are available for free
“Free to install” Free forever with all the features, but there will be premium services/products outside of that app, usually saas-based applications. that is not necessary for most people (For example, the Pinterest Shopify app is free to install, using that app you can also create ads and pay for it)
“Free plan available” means basic feature free plan forever and premium features also available.

Free trial means 14 – 30 days free trial for premium features, there will be no free plan forever
Paid means, there will be no free plan or free trial. To use such apps you have to pay the monthly charges.


Check 11 more hacks and detailed reviews on [Shopify pricing](https://www.websitebuilderly.com/shopify-pricing/) and plans
What is react?
Published: 2022-06-10 12:30:42

Simplest meaning
**A JavaScript library for building user interfaces**

React is a javascript library which is used for building user interfaces. 😎
It contains three important things
1. Declarative
2. Component-Based
3. Learn Once, Write Anywhere

## 1. Declarative
React makes it painless to create interactive UIs.

For example: If we want to add a tag to the other tag so we have to write code like this in javascript

- first, get the id or class name of another tag

- then put the tag in it with the help of innerHTML

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

but in react we don't need this kind of stuff

- Just create a function like a javascript function

- And return the tag that's it.

- And everything is maintained by the react.


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

Now you have created the component.
what is a component? we will talk about it in the component section

## 2. Component-Based

- Component means dividing the big UI code into the small UI block of code

For example

- let's say we have a home page where have put all the code in it like buttons, navbar, sidebar, body and so on right.

- Suppose we created a new page like about us where we want to add a button.

- So what we do is just copy the button code from the home page and past it on the about us page

- But there is a problem if we change the colour of the button so we have to change the button colour on every page

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

So this problem is resolved by **COMPONENT**

- Let's take the previous example, how does the component help us to solve this problem?

- First, it creates a separate file like button.js (Component) for the button code Ok

- Then it just links the button.js file with a home page and about us page

So if any changes occur in the button so we just need to change the button file and then all the files which import it. their button will change

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

## 3. Learn Once, Write Anywhere
this one means reusability

- Right, Now code is more reusable

- we can take the button example create a new button component and put the button code into it.

- And use this component in every file where we want to add button code this is reusable
Binary Prefix Divisible By 5
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 12:30:36

You are given a binary array `nums` (**0-indexed**).

We define `xi` as the number whose binary representation is the subarray `nums[0..i]` (from most-significant-bit to least-significant-bit).

*   For example, if `nums = [1,0,1]`, then `x0 = 1`, `x1 = 2`, and `x2 = 5`.

Return _an array of booleans_ `answer` _where_ `answer[i]` _is_ `true` _if_ `xi` _is divisible by_ `5`.

**Example 1:**

**Input:** nums = \[0,1,1\]
**Output:** \[true,false,false\]
**Explanation:** The input numbers in binary are 0, 01, 011; which are 0, 1, and 3 in base-10.
Only the first number is divisible by 5, so answer\[0\] is true.

**Example 2:**

**Input:** nums = \[1,1,1\]
**Output:** \[false,false,false\]

**Constraints:**

*   `1 <= nums.length <= 105`
*   `nums[i]` is either `0` or `1`.

**SOLUTION:**

    class Solution:
        def prefixesDivBy5(self, nums: List[int]) -> List[bool]:
            val = 0
            op = []
            for num in nums:
                val = 2 * val + num
                if val % 5 == 0:
                    op.append(True)
                else:
                    op.append(False)
            return op
What does it take to be a Senior Meta Engineer?
Published: 2022-06-10 12:21:52

Curious about what it takes to get a job at Meta? Join us later today for a fireside chat with a Senior Meta Engineer!

They will be discussing....

✍️ How they prepared for the coding interview ✍️ What resources worked best ✍️ Tips & tricks they learned along the way.

There will also be a section at the end for questions.

We are so excited that another one of our Hackpack members got a job at Meta 🎉 This event will not only be a learning experience for anyone who is currently studying for programming interviews, but also a celebration of all their hard work!

Event Link: https://discord.gg/NKFGEzav5M?event=981724643624882186

## **Join the community**

Looking for a study partner? [Hackpack](https://www.hackpack.io/) is the most active community. of engineers studying for programming interviews. We hold each other accountable, provide support, and fight burnout to study more efficiently and get the job faster.

You can apply on the site.

[Big Tech Interview Tips Newsletter](https://fangprep.substack.com/)

[Programming Interview Prep Events](http://[https://discord.gg/VQkMr234zk?event=970275330294153257](https://discord.gg/VQkMr234zk?event=970275330294153257))
Angular v14, Storybook 6.5, new Bootstrap and more - Frontend News #26
Tags: angular, bootstrap, storybook, nextjs
Published: 2022-06-10 12:10:09

{% youtube SYKTouu53pc %}
Hi! The fresh Frontend News is already on the channel! What’s in? 👇

What’s in Frontend News #26?
🟣 Angular v14
🟣 Storybook 6.5
🟣 Bootstrap 5.2.0 Beta
🟣 Cypress 10
🟣 Meteor 2.7.3
🟣 Next.js RFC Layouts

Enjoy, you can read the article at [Frontend House](https://frontendhouse.com/frontend-news/angular-v14-storybook-65-new-bootstrap-and-more-frontend-news-26).
Length of Last Word
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 12:00:46

Given a string `s` consisting of words and spaces, return _the length of the **last** word in the string._

A **word** is a maximal substring consisting of non-space characters only.

**Example 1:**

**Input:** s = "Hello World"
**Output:** 5
**Explanation:** The last word is "World" with length 5.

**Example 2:**

**Input:** s = "   fly me   to   the moon  "
**Output:** 4
**Explanation:** The last word is "moon" with length 4.

**Example 3:**

**Input:** s = "luffy is still joyboy"
**Output:** 6
**Explanation:** The last word is "joyboy" with length 6.

**Constraints:**

*   `1 <= s.length <= 104`
*   `s` consists of only English letters and spaces `' '`.
*   There will be at least one word in `s`.

**SOLUTION:**

    class Solution:
        def lengthOfLastWord(self, s: str) -> int:
            s = " " + s
            n = len(s)
            chunk = ""
            for i in range(n - 1, -1, -1):
                if s[i] == " ":
                    if len(chunk) > 0:
                        return len(chunk)
                else:
                    chunk += s[i]
Having trouble with your UX? Try these sites I created to find a solution!
Tags: ux, userexperience
Published: 2022-06-10 11:38:38

Hi and welcome to my post! I would like to show you sites I created with the sole purpose of helping website owners take charge of their website and UX! So, if anyone here needs some help with common methods of sorting information on your website - i.e. [Card sorting](https://www.card-sorting.com/), [tree testing](https://www.tree-testing.com/), [testing usability](https://www.usability-testing.org/) on your website, or taking a look on your [websites trough your users eyes'](https://www.session-recording.com/) feel free to browse and learn! Have a great day y'all!
អារម្មណ៍ខូចចិត្ត
Published: 2022-06-10 11:57:28

សូមស្វាគមន៍មកកាន់គេហទំព័ររបស់យើងខ្ញុំបាទ
<a href="https://facebook.com/087744442abc">facebook</a>
<a href="https://twitter.com/Aromkochchet">twitter</a>
<a href="https://youtube.com/channel/UCKbWxFu6B2xyuqjA6Fux-OA">youtube</a>
<a href="https://instagram.com/_aromkochchet">instagram</a>
<a href="https://www.pinterest.com/Aromkochchet_">pinterest</a>
<a href="mailto:makaralove876@gmail.com">email</a>
<a href="https://aromkhochchet111.blogspot.com/">blogger</a>
<a href="https://t.me/Aromkochchet/">telegram</a>
Appwrite Community Report #9
Published: 2022-06-10 11:56:29

Hi! Greetings from team Appwrite 👋

Are you excited to see everything we’ve been working on this week? 👀

**TLDR;** We now have integrations to make your applications a little faster, updated resources for better learning experience and more!

---

## 📢  What’s new 

- Appwrite Hackathon winners have been announced! Congratulations to all the winners 🤩
{% embed https://dev.to/devteam/congrats-to-the-appwrite-hackathon-winners-4dk9 %}
- OSS Fund Review is on, and we’ll soon have our first maintainer announced! Stay tuned!


**P.S** - Are you a maintainer? Or do you know a maintainer who could benefit from this fund? Nominate them [now](https://appwrite.io/oss-fund).

---

## ✅ Issues solved

Here’s to making Appwrite better everyday! Issues we have worked on this week:

- Fixed Gitpod integration with Appwrite (it now supports PHP 8 by default)

- Fixed a bug that caused the first execution of functions to be slow
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3348)
- Reordered endpoints in docs to make it easier to follow, and consistent. 
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3343)

---

## ⚒️ What we’re currently working on

- Working towards upgrading the entire Appwrite stack to docker compose V2
- We now have a draft PR (PoC) to include the parameters  `queries` , `orderAttribute` and  `orderTypes` from `listDocuments`, and apply it to more endpoints namely users, collections, buckets & functions. 
- Working toward allowing many different input types for uploading a file including Streams, Buffers, Blobs, paths, plaintext, and more.

---

## 🗣 Discussions
Community member [Hu-Wentao](https://github.com/Hu-Wentao), suggested replacing MySQL with TiDB, what do you think about it?
🔗[Join the discussion here](https://github.com/appwrite/appwrite/discussions/3218)

---

## 📘 Resources

- Learn about writing cloud functions with our new .NET runtime
{% embed https://dev.to/appwrite/cloud-functions-using-the-new-net-runtime-4fkm %}
- Want to learn about Okta authentication with Appwrite? [We have you covered](https://dev.to/appwrite/okta-authentication-with-appwrite-3jh6).
- From zero to Appwrite hero in 30 days, with our specially curated series!
{% embed https://30days.appwrite.io/ %}
How to change Laravel page pagination data from object to array.
Tags: laravel, laravelpagination, php
Published: 2022-06-10 11:55:19

#####If you need to change Laravel page pagination data from object to array.

> Change array_slice preserve_keys => FALSE
![How to change Laravel page pagination data from object to array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t7bi5d3ojtej70zvbcl.png)


> From Object Format 

![Array slice preserve_keys true version ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu3owg2rtycglbmc297c.png)

> To Array Format 

![Array slice preserve_keys false version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axlppnl3ygnuisk3lhuw.png)
GitLab CI - Working with variables
Tags: tutorial, devops, programming
Published: 2022-06-10 11:31:23

[GitLab CI Variables](https://www.bitslovers.com/gitlab-ci-variables/)

 The GitLab is pretty good plataform that allow us to automate several type of task for Software and DevOps Engineers.

Knowing how to work with variables it's crucial to design dynamic process that covers different scenarios and problems.

Let's learn some topics:

- Create your CI/CD variable in the .gitlab-ci.yml file
- How to use variables in other variables
- Define Variables for a Group of Projects
- How to use the Global Variables (Predefined)

Read here: [GitLab CI Variables](https://www.bitslovers.com/gitlab-ci-variables/)