teleren/devto huggingface dataset:
Looking for new features ideas for Cherrybomb
Tags: rust, openapi, opensource, api
Published: 2022-02-26 11:46:01

Hi everyone,

[Cherrybomb](https://github.com/blst-security/cherrybomb) is an API specification validator and a user behavior anomaly detection tool. We're looking for some feedback and some feature ideas to further improve and allow a bigger user base for it.

We'd love to hear your opinions and suggestions!
If you need anything specific in order for you to be able to use it let us know and we'll implement it as quickly as possible!

**GitHub**: https://github.com/blst-security/cherrybomb
React Native - Modern theming!
Published: 2022-02-26 11:07:03

Good day, everyone! Today we'll talk about theme-csx, a new react native theming library that was created to alleviate the pain that developers may experience when attempting to add dark mode support to mobile apps.

**Github Link:** https://github.com/KJ-GM/theme-csx 

### Without further ado, let's get started: 

Theme-csx focuses on providing an easy and simple way to add dark mode support to our mobile apps. With three simple steps, your app will be set up and ready to go!

You may wonder what makes this library special than other libraries such as styled-components, react native paper...

1) Similar to standard react native styling

2) Light & Fast

3) Expo & React Native

4) Supports React Navigation

**System**: changes to the phone _`appearance`_ preference while the app is running will be applied dynamically. - **IOS:** changes will be shown immediately without the need to reopen the app
 
let's go over the steps very briefly: 

> **StyleSheet**

- Is similar to the usual styling format, but now you have additional props to make style themeable.

> **T() Function** - _Themed_

- Apply **only** your themed styles using the T() function wrapper.

> **TV() Function** - _Themed Value_

- Is an extra helper function that can be used to theme a specific value. (this becomes helpful with react navigation)

> **appearanceHook**

- Use the appearanceHook to switch theme from anywhere in your app.



## Usage ❓

```js
// Styles
import { StyleSheet, T, appearanceHook } from 'theme-csx';

// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';

const DemoComponent = () => {
  // Theme switch
  const switchTheme = () => {
    appearanceHook.switch(
      appearanceHook.activeTheme === 'dark' ? 'light' : 'dark'
    );
  };

  return (
    <View style={T(styles.THEMED_CONTAINER)}>
      <Text style={styles.NORMAL_TEXT}>Hey, I am normal text</Text>

      <Text style={T(styles.THEMED_TEXT)}>Hey, I am themed text</Text>

      <Button text={'Switch theme'} onPress={switchTheme} />
    </View>
  );
};

const styles = StyleSheet.create({
  THEMED_CONTAINER: {
    flex: 1,
    backgroundColor: 'white',
    backgroundDark: 'gray', // backgroundDark prop was added to make it themeable
    alignItems: 'center',
    justifyContent: 'center',
  },
  NORMAL_TEXT: {
    fontWeight: 'bold',
    fontSize: 14,
    color: 'green',
  },
  THEMED_TEXT: {
    fontWeight: 'bold',
    fontSize: 14,
    color: 'black',
    colorDark: 'white', // colorDark prop was added to make it themeable
  },
});
```
Reason Why Mobile-Friendly Website is Important.
Published: 2022-02-26 10:56:36

Google the term 'mobile-friendly website,' & you will get about 446,000,000 results on Google Google will even provide you the option to run a quick test to recognize if your website is mobile-friendly or not. So with all the hype enclosing the term, you might be wondering…well, what does that mean? And we do need a mobile-friendly site?
You need to know the differences between a mobile-friendly site & a mobile-optimized site. A mobile-friendly website correctly displays on smaller screens. It usually appears like a shorter version, although it may not always work absolutely on touchscreen tablets. It should, however, still be functional. Mobile-friendly websites also have emphasized so as text-based phone numbers or email addresses that can trigger direct calls or email messages through mobile devices or slideshows & image rotators that function in Flash support.
While a mobile-friendly site helps secure your site functions on mobile devices, mobile optimization works a step further. A mobile-optimized site reformats itself for mobile devices. It does not just make sure to properly display on smaller screens, but also makes the site much more comfortable to navigate. It reformats content, displays larger navigation buttons, & optimizes images according to screen size.
Whether you are seeking to capture new demographics or retain existing consumer segments, a key part of that method is to establish credibility & trust. Consumers must know that they can reach your brand at any time, and they must also be confirmed that this business is reliable, credible & trustworthy. Especially in a landscape where consumers are inundated with messages, promotions & advertisements - how do you stand out?
User experience is required. If you don't provide a good user experience, visitors will leave plus they won't return. The mobile experience is much distinct from computer experience. Visitors need to be able to read your web pages with security, click links without zooming in & navigate your site on a smaller screen. Without mobile optimization, users usually struggle to read or navigate websites on mobile devices. 
To Read Full Blog Visit - [Draggital/Blog](https://www.draggital.com/why-mobile-friendly-website-is-important)
Drop down filtering with react
Published: 2022-02-26 10:55:18

Our goal is to change our data dynamically using Drop down filtering here is the code ...
```
import React, { useState } from 'react';
import mockData from '../mockData.json';

 
const Dropdown = () => {
  const [items, setItems] = useState(mockData);
    
   const filterItem=(gen)=>{
     const updatedItem=mockData.filter((curElem)=>{
       return curElem.gender===gen
     });
     setItems(updatedItem)

   }
  return (
    <div>
        
        <select onChange={(e) => filterItem(e.target.value)}  > 
          <option >Female</option>
          <option>Male</option>
         
        </select>
  
       
        {items.map(val => (
          <div key={val.id} style={{ margin: '30px' }}>
            <div>{`Band: ${val.first_name}`}</div>
            <div>{`Albums: ${val.last_name}`}</div>
            <div>{`Members: ${val.email}`}</div>
            <div>{`Members: ${val.gender}`}</div>
            
          </div>
        ))}
      </div>
  );
}

export default Dropdown;
```
Login & Registration in laravel 9
Tags: laravel, webdev, beginners, tutorial
Published: 2022-02-26 10:28:27

## Make Login & Registration In Laravel 9

Today I am going to explain how you can generate Authentication scaffolding in Laravel 9.

## Laravel UI Installation.
After [Installing Laravel 9](https://dev.to/techtoolindia/laravel-9-installation-j0d) we need to install [laravel/ui] (https://github.com/laravel/ui) package in order to generate authentication in laravel 9.

## To Install run the composer command
```php
composer require laravel/ui
```

## After Composer installation run artisan command to generate scaffolding.

```php
// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
```

After generating UI need to install npm dependencies.

```php
npm run install && npm run dev
```

Next to Migrate the database
```php
php artisan migrate
```

## The Output will look like.

![Laravel 9 Login Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q1mtny08yk03qeqn7zu.png)

The Installation Tutorial is below in the video.

{% youtube ul3t3YpTXM8 %}

If you face any issue while installing, please comment your query.

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/techtoolindia)
[Instagram](https://www.instagram.com/techtoolindia/)
[TechToolIndia YouTube Channel](https://www.youtube.com/channel/UCOy6o08Yn9DtXMKqxhD9ivA)
How to make login & registration in laravel 9
Tags: laravel, webdev, beginners, tutorial
Published: 2022-02-26 10:26:32

## Make Login & Registration In Laravel 9

Today I am going to explain how you can generate Authentication scaffolding in Laravel 9.

## Laravel UI Installation.
After [Installing Laravel 9](https://dev.to/shanisingh03/how-to-install-laravel-9-25c4) we need to install [laravel/ui] (https://github.com/laravel/ui) package in order to generate authentication in laravel 9.

## To Install run the composer command
```php
composer require laravel/ui
```

## After Composer installation run artisan command to generate scaffolding.

```php
// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
```

After generating UI need to install npm dependencies.

```php
npm run install && npm run dev
```

Next to Migrate the database
```php
php artisan migrate
```

## The Output will look like.

![Laravel 9 Login Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q1mtny08yk03qeqn7zu.png)

The Installation Tutorial is below in the video.

{% youtube ul3t3YpTXM8 %}

If you face any issue while installing, please comment your query.

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/shanisingh03)
[Instagram](https://www.instagram.com/shanisingh03/)
[TechToolIndia YouTube Channel](https://www.youtube.com/channel/UCOy6o08Yn9DtXMKqxhD9ivA)
A graceful error handle for Express applications
Published: 2022-02-26 10:25:00

### A graceful error handle for Express applications. This also patches a DOS exploit where users can manually trigger bad request errors that shut down your app.

## package: [express error handle]
## Installation
(https://www.npmjs.com/package/express-error-handle)
`npm i --save express-error-handle`


## Express express error handle

```
const express = require('express');
const {errorLog,errorHandlerNotify} = require("express-error-handle")
const app = express()
const port = process.env.PORT || 5000;

app.get('/a-typical-route',async function(req, res, next) {
try{

//your code here

}
catch(error){
next(error)
}

});


app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})

//handling error using at the end of last routes
app.use(errorLog);
app.use(errorHandlerNotify);


```
## Supported environment variables
### create root path .env file and then put here
### open project folder and create
`touch .env
`
### only use developemnt purpose
`NODE_ENV=development
`
### production serve using applications
### only use production purpose
`NODE_ENV=production
`
Pointers
Tags: computerscience, beginners, interview, programming
Published: 2022-02-26 10:12:16

Remember how we say every item in an array had to be the same size? Let's dig into that a little more.

What if we want to store strings(which is already an array into array). We are trying to store arrays into array.

And what if these strings have different length, some may not fit in the size of array blocks and all the blocks have same size.

What we can do is store strings in large array, and mark the end of each string with a special character. '/0' is used to mark the end of strings.

But for short strings, the space will be wasted.

Instead of storing the strings right inside our array, let's just put the strings wherever we can fit them in memory. Then we'll have each element in our array hold the address in memory of its corresponding string. Each address is an integer, so really our outer array is just an array of integers.** We can call each of these integers a pointer, since it points to another spot in memory.**

Magic happended! right?

This fixes both the disadvantages of arrays:

The items don't have to be the same length—each string can be as long or as short as we want.
We don't need enough uninterrupted free memory to store all our strings next to each other—we can place each of them separately, wherever there's space in RAM.

Now we have a new tradeoff:

Remember how the memory controller sends the contents of nearby memory addresses to the processor with each read? And the processor caches them? So reading sequential addresses in RAM is faster because we can get most of those reads right from the cache?

Our original array was very cache-friendly, because everything was sequential. So reading from the 0th index, then the 1st index, then the 2nd, etc. got an extra speedup from the processor cache.

But the pointers in this array make it not cache-friendly, because the strings are scattered randomly around RAM. So reading from the 0th index, then the 1st index, etc. doesn't get that extra speedup from the cache.

That's the tradeoff. This pointer-based array requires less uninterrupted memory and can accommodate elements that aren't all the same size, but it's slower because it's not cache-friendly.

Thanks for reading <3
Work Productivity?💻💻
Published: 2022-02-26 10:07:29

![Work Productivity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57t1mh6kmfbcqbdqcb1e.png)
 
Do you guys listen to music during work? Does it increase your productivity during your work or does it distract you?

For me personally, I feel like it somehow increases my productivity and focus. When I am working without any music or songs, my focus goes from coding to someone's dancing videos or thinking about some other stuffs rather than coding and it really distracts me. But when I am listening to stuffs, I focus on that music/song and my focus is more on that music or code.. time to time. 

Do you guys feel the same? Please let me know about your work habits while coding! Would love to know and connect! 

Thank you!

Keep coding!!!!!💻
Unsocial media
Tags: discuss, personal, improvement, growth
Published: 2022-02-26 09:48:43

---
title: Unsocial media
published: true
description: Social media is all but making us social these days
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydrmfhslugbixhzm472u.jpeg
---

> Social media is all but making us social these days.

---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/unsocial-media/)._

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Would money change you?
Tags: discuss, personal, improvement, growth
Published: 2022-02-26 09:45:54

---
title: Would money change you?
published: true
description: It would be an interesting experiment to let every person on this planet win a lottery and see which behavior it amplifies
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w66aogni3esoa3wmpnbx.jpeg
---

> It would be an interesting experiment to let every person on this planet win a lottery and see which behavior it amplifies in them?

---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/would-money-change-you/)._

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Mr. P.'s Notes : INTENTIONAL LIVING
Tags: opensource, beginners, tutorial, productivity
Published: 2022-02-26 09:40:40

After reading the book '[7 Habits of highly successful people](https://dev.to/mrpaulishaili/mr-ps-notes-on-the-7-habits-of-highly-effective-people-36c0)' one is fully able to understand the constituents of _lucks and chances_ that plays a big lead in eventual success of many skilled individuals.

Intentional living, which involves raising one's frequency of conciousness, is actually the way to go in achieving the most in life; it requires time, discipline, and understanding into building such consistency and thus more success in every endeavours one's of life.

Although feasible results of intentional living seems slow to be seen at first, with consistent understanding to raising conciousness, the finite result is definitely astronomical.

> Creativity and happiness requires consistent sacrifice of effective discipline and consistency.

Starting the day with great focus to targeted goals, creating schedules, consistency, practicing effective mind discipline, meditation and many more, are part of the constituents to intentional living in making the most out of the day and discovering individual happiness.

It applies to me, and so to everyone who is willing and understands that creativity and happiness requires consistent sacrifice of effective discipline and consistency.


**Stay Blessed, Today.**
_`Mr. Paul Ishaili C.`_

## * Resource(s)

[7 Habits of highly effective people, by Steven R. Covey](https://dev.to/mrpaulishaili/mr-ps-notes-on-the-7-habits-of-highly-effective-people-36c0)
Drum kit using JavaScript  
Tags: javascript, beginners, programming, html
Published: 2022-02-26 09:39:17

The best way to become a good developer is by practicing what we  have learned.Building a simple projects like drum  Kit will help and improve our coding skills in general.
So if you are a beginner, this is a good project to test your skills.

https://github.com/manumd20/Drumkit-useing-javascript
7 JavaScript One Liners to look like a pro
Tags: javascript, webdev, beginners, react
Published: 2022-02-26 09:28:07

### Hello Folks 👋
What's up friends, this is **SnowBit** here. I am a young passionate and self-taught frontend web developer and have an intention to become a successful developer. I love building web applications with different technologies.

Today, I am here with some good JS one-liners for you to look like a pro that might help you in your next project. Let's go 🚀

---

### Toggle Boolean
Toggling boolean, turning **true** to **false** or vice versa.
```js
const toggleBool = (val) => (val = !val)

toggleBool(false) //true
```

### Random Boolean
Generate a random boolean.
```js
const randomBool = () => Math.random() >= 0.5;

randomBool() //true
```

### Scroll to Top
Scroll to the top of the page.
```js
const scrollToTop = () => window.scroll(0,0)
```

### Detect dark mode
Returns true when dark mode is enabled.
```js
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
```

### Get user-selected text
Returns the selected text.
```js
const getSelectedText = () => window.getSelection().toString();
```

### Difference between two dates
```js
const dif = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)

dif(new Date("2006-02-24"), new Date ("2022-02-24"))
```

### Random HEX color
```js
const hexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
```

--- 
This was it for this article, I hope this article helped you. Feel free to share more in the comments below.
Thank you for reading!

I am on Twitter [@codewithsnowbit](https://twitter.com/codewithsnowbit). Give it a follow.


### Let's Connect 🌏
- [GitHub](https://github.com/codewithsnowbit)
- [Twitter](https://twitter.com/codewithsnowbit)
- [YouTube](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber)
10 Shadows for css and Best website for Shadow
Tags: css, python
Published: 2022-02-26 09:25:02

Hello everyone, if you are a designer, you should know that shadows are very important and very necessary. Now we want to introduce you to 20 of the best shadows

**1**:
```Css
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
```

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

**2**:

```css
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
```

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



**3**:

```css
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
```

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



**4**:

```css
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
```

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

**5**:

```css
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
```

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

**6**:

```css
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b184bc6f4qag6s8357zz.jpg)
 
**7**:

```css
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c13c8cnprwu2cti6khrx.jpg)
 
**8**:

```css
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91r54vxz26irfu69mmp1.jpg)
 

**9**:

```css
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
```

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


10:

```css
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb70pppp6xe6uw2nkp5l.jpg)
 
**Web** :  [Best-Shadows](https://getcssscan.com/css-box-shadow-examples)
1. Like 
2. Comment
3. Follow me
Yes, managed state can be as simple as local state.
Published: 2022-02-26 09:07:32

---
title: Yes, managed state can be as simple as local state.
published: true
cover_image: https://github.com/Memeplexx/olik/blob/master/assets/banner_dev_to.jpg?raw=true
---


Ever since the advent of Redux, many libraries have rushed in to address its ergonomic shortcomings by co-locating state, actions, and update logic:

{% embed https://gist.github.com/Memeplexx/9c267fe9922b7c6ea4ec6a2e459ba3d9 %}

This pattern is a great step forward, but it can be improved upon:
* Within each state update function, we find ourselves repeating similar, but not identical, CRUD logic over and over.
* There is an unnecessary layer of abstraction between components and managed state where a function name may contradict its implementation.
* This extra layer of abstraction discourages us from moving component state into the store where it can be more easily tracked.

**So how does Olik address these issues?**

Let’s just jump right in…

{% embed https://gist.github.com/Memeplexx/90a074123fb78f3db6a243fb8a364ac1 %}

{% embed https://gist.github.com/Memeplexx/6785b5cd0833ebcde43c46dc0df21e15 %}

Now, for some interactions:

{% embed https://gist.github.com/Memeplexx/26ed44d2713716da1fab012e211b3791 %}

Olik is the first state manager to use a completely **fluent API**.

By chaining together a standard set **composable state search and update primitives**, we can make surgically precise updates to our immutable state tree with zero ambiguity, in complete type-safety, to any depth, right from our components.

The fluent API allows the library to **describe our actions for us** with perfect accuracy from within the Devtools extension.

If you have all features enabled, this library weighs in at 6kb, however, it will arguably have the **least effect on your application bundle size** because it doesn’t require any infrastructural code, immutable updaters, or immutable update helpers (like Immer).

**Nested stores** are also supported which help us manage and debug component state with or without our application state.

Finally, Olik is not built with any particular framework in mind. So far, it can be used **without a framework**, with **React**, **Angular**, or **Svelte**.

For more info, please check out the [documentation](https://memeplexx.github.io/olik/).