teleren/devto huggingface dataset:
Claymorphism: What It Is and Why This Style Is Becoming a Top 2022 UI Trend

Tags: design, uiweekly, ux, discuss
Published: 2022-01-19 11:28:27

Everything ending with -morphism has been trending in the world of [UI design trends](https://perpet.io/blog/top-10-mobile-app-ui-ux-design-trends-for-2022/) for the last couple of years. Glassmorphism, neumorphism, skeuomorphism, you name it. Some of these are popular for a few months only, others are here to stay. Let’s discuss the most recent UI trend — claymorphism. 

## What is claymorphism?

The very name of this style gives you a little hint — the 3D objects look as if they were made from clay. Often, designers create human figures and various characters in the claymorphic style. Claymorphism takes neumorphism to the next level, making the elements even more expressive and lifelike. 

This effect is reached because the elements look somewhat inflated and rounded. One might say that claymorphic UI elements also look like balloons. The objects are usually simple in their shape. 

Claymorphism is often referred to as “fluffy 3D”. True: this style gives a touch of friendliness and cuteness to your UI. Clay figures remind us of childhood, games, and the good old times, so claymorphism is perfect for communicating your design as fun and uncomplicated.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my3ywwogk8xrn8co7xiy.png)
 
[App design by Ana Baghdavadze](https://dribbble.com/shots/17297933-Claymorphism-in-Onboarding-Screens)

## How to create claymorphic objects?
The main tool for creating claymorphic elements is shadows. Quite predictable, isn’t it? Using shadows gives the feeling of depths and balloon-like appearance to the elements. You can use your usual design tool, like Figma or Adobe XD for creating claymorphic UIs.

What’s important here is that you won’t only use outer or background shadows, but also the inner ones. That’s exactly how the “clay” effect is created — by two inner shadows.

Additionally, the corners of objects in claymorphism are usually rounded; you won’t find sharp edges in this style. It’s all about being fluffy and toy-like, remember?

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

[Webiste design by Filip Rygucki](https://dribbble.com/shots/17119999-Pet-Salon-UI-Claymorphism-Design-Side-Project)

## Why is claymorphism getting so popular?

After looking at some examples of claymorphic UIs, it’s not hard to guess why everyone likes them so much. They present a new, fresh look and take away the seriousness from the design. 
What is more, such style gives feeling of depth and volume to the objects and they don’t seem so abstract and flat. 

Interacting with claymorphic design is more like watching an animated movie rather than just clicking through an app or website. In such a way, claymorphism makes your UI more engaging and visually appealing, and isn’t it what you as a designer would want the most?

You can also learn [some more 2022 UI/UX design trends](https://perpet.io/blog/top-10-mobile-app-ui-ux-design-trends-for-2022/) — trust us, there is plenty to know about.
How to complete a PUT request in Sequelize
Tags: mysql, database
Published: 2022-01-19 11:16:16

#mysql #database 

How to complete a PUT request in Sequelize ORM:



If the first database you learned on was MongoDB, coming to MySQL you may expect the .update method in Sequelize to return the updated row, like how in mongoose .findByIdAndUpdate returns the found document. Instead, you will get back just an array with a single number in it. For example: [1]. What is going on here? According to the Sequelize docs:



“The promise returns an array with one or two elements. The first element is always the number of affected rows, while the second element is the actual affected rows (only supported in postgres with options.returning true).”



So to get back the actual row data, say if you need to send it back to your frontend to keep the UI updated, you will have to call the Sequelize .findByPk method after .update. The second part of your PUT route will look something like this

```
  const returnUpdatedPerson = await Person.findByPk(req.params.id); // finds the updated row
  if (!returnUpdatedPerson) throw "Error while Fetching Data"; //catches errors.
  res.status(200).json(returnUpdatedPerson); //returns it
```
C#, .Net and .NetCore Extensions for VSCode
Tags: csharp, vscode, dotnet, dotnetcore
Published: 2022-01-19 11:09:32

## Introduction
This article would be showing you some nice extensions to boost your overall productivity and workflow in VSCode for C#, .Net and .NetCore development.

---

## Extensions

### 1. C# 
**Microsoft**
C# for Visual Studio Code (powered by OmniSharp).
[Link](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)

### 2. C# Extensions
**jchannon**
C# IDE Extensions for VSCode.
[Link](https://marketplace.visualstudio.com/items?itemName=jchannon.csharpextensions)

### 3. Auto-Using for C# 
**Fudge**
Provides intellisense for and imports references from all available sources.
[Link](https://marketplace.visualstudio.com/items?itemName=Fudge.auto-using)

### 4. NuGet Package Manager GUI
**aliasadidev**
An extension for Visual Studio Code that lets you easily update/remove/install packages from NuGet server for .NET Core 1.1+/.Net5+ projects.
[Link](https://marketplace.visualstudio.com/items?itemName=aliasadidev.nugetpackagemanagergui)

### 5. Visual Studio IntelliCode
**Microsoft**
AI-assisted development.
[Link](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

---

## Snippets

### 1. .NET Core Snippet Pack
**Adrian Wilczyński**
A snippet pack for .NET Core.
[Link](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.asp-net-core-snippet-pack)

---

## Refrences
[Visual Studio Code Extensions for .Net development](https://dev.to/moe23/visual-studio-code-extensions-for-net-development-47lc)
How to host a Django project on Heroku (for free)
Tags: django, heroku, webdev, tutorial
Published: 2022-01-19 11:02:50

This step-by-step beginner tutorial will teach you how to host your local Django project on Heroku for free. I haven't found many easy to follow tutorials on this topic so I decided to make my own after hosting many projects with the mentioned steps. Enjoy!

## Steps

- Create and activate a virtualenv, install dependancies.
```bash
python -m venv <env_name> # Windows
python3 -m venv <env_name> # Other

env\Scripts\activate # Windows
source venv/bin/activate # Other
```
- Initialize a git repository (`git init`)
- Add a `.gitignore` file

_[Suggested gitignore for Django](https://www.toptal.com/developers/gitignore/api/django)_

- Add the following to `settings.py`:

```python
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
```

- [Create a heroku account](https://signup.heroku.com/), login and [install heroku CLI](https://devcenter.heroku.com/articles/heroku-cli) (`choco install heroku-cli` on windows)

- Create `runtime.py` and add your project python version. Example:

```
python-3.10.1
```

- Install `gunicorn`:

```bash
pip install gunicorn
```

- Create `Procfile` and add the following:

```
web: gunicorn myproject.wsgi
```

- Install `django-on-heroku`:

```bash
pip install django-on-heroku
```

- Add the following to `settings.py`:

```bash
# Configure Django App for Heroku.
import django_on_heroku
django_on_heroku.settings(locals())
```

- Add `requirements.txt` by running:

```bash
pip freeze > requirements.txt
```

- Commit your changes:

```bash
git add .
git commit -m "Init commit"
```

- Login to heroku from the command line:

```bash
heroku login
```

- Create a new app:

```bash
heroku create app_name
```

- Add your heroku app to `ALLOWED_HOSTS`:

```python
ALLOWED_HOSTS = ['your_app_name.herokuapp.com', ...]
```

- Commit your changes:

```bash
git add .
git commit -m "Configure ALLOWED_HOSTS"
```

- Push your changes to heroku branch:

```bash
git push heroku master # Or branch name
```

- Migrate your database:

```bash
heroku run python manage.py migrate
```

- **Make sure you have `DEBUG = False` in your `settings.py` file.**

---

## Extras

- Open your app online:

```bash
heroku open
```

- Create admin account:

```bash
heroku run python manage.py createsuperuser
```

- If you have static files, run:

```bash
heroku run python manage.py collectstatic
```

---
New PHP Enum in Laravel
Tags: laravel, php, programming, beginners
Published: 2022-01-19 10:55:39

I've always been a fan of PHP Enum. I found an article https://medium.com/code16/how-to-use-the-new-php-enum-in-laravel-7e94515b9b4e explaining how to use it with laravel and wanted to share it with you.
PHP 8.1 introduced long awaited support for built-in Enums. There is no more need for custom solutions in your Laravel projects since Laravel with its 8.69 release has your back.
We’ll take a really simple example
```php
namespace App\Enums;

enum BlogpostState: string
{
    case DRAFT = 'state_draft';
    case PUBLISHED = 'state_published';
}
```
When creating your database 
```php
public function up()
{
    Schema::create('blogposts', function (Blueprint $table) {
        ...
        $table->string('state');
    });
}
```
You can use the new casting in your Blogpost model and it allows your state model attribute to be casted to/from an Enum
```php
namespace App\Models;

class Blogpost extends Model
{
    protected $casts = [
       'state' => BlogpostState::class,
    ];
}
```
So for example you can now compare the state to the Enum directly
```php
public function isPublished()
{
    return $this->state === BlogpostState::PUBLISHED;
}
```
Then you’ll get
```php
>>> dd($blogpost->state);
=> App\Enums\BlogpostState {
     +name: "DRAFT",
     +value: "state_draft",
   }

>>> dd($blogpost->state->value);
=> "state_draft"
```
Also if you try to create or update a blogpost with an invalid state value, you’ll get an immediate PHP error
```php
>>> $blogpost->update(['state' => 'unlisted']);
PHP Error:  "unlisted" is not a valid backing value for enum "App\Models\Enums\BlogpostState"
```
The state’s enum can have methods
```php
public function label(): string
{
    return match($this)
    {
      self::DRAFT => 'Draft...',
      self::PUBLISHED => 'Published!',
    };
}

>>> $blogpost->state->label();
=> "Draft..."
```
Validation rule
```php
namespace App\Http\Requests;

class BlogpostRequest extends FormRequest
{
    public function rules()
    {
        return [
            "state" => [
                 "required",
                 new Enum(BlogpostState::class)
            ],
        ];
    }
}
```
Factory
```php
namespace Database\Factories;

class BlogpostFactory extends Factory
{

    public function definition()
    {
        return [
            ...
            'state' => BlogpostState::DRAFT,
        ];
    }
}
```
Same resource :-
https://stitcher.io/blog/php-enums
https://php.watch/versions/8.1/enums

I hope you enjoyed the code.
Context Api in react
Published: 2022-01-19 10:54:07

Today I covered the context api concept in react.It is useful to pass value from one component to another component without the use of props chaining. 

First of all we need to create a new js file 
```
const Context=React.createContext({
        isLoggedIn : false
});

export default Context;
```
Now we created a context with the component name Contex which is an object having our value to be passed to other component

Now we need to import this to parent component (Eg:App.js),
and we should wrap the whole return state with the imported component i.e Context

```
const [isLoggedIn,setLoggedIn] = useState(false);

function loginHandler(){
 setLoggedIn(true)
}

//Value here passed is the vlaue of isLoggedIn variable it will be changed when the user logged In 
<Context.Provider value={{
isLoggedIn:is isloggedIn}}>
  //Rest of the component
</Context.Provider>
```
so basically when the user is loggedIn the loginHandler will be executed and isLoggedIn wil become true and it will be passed to all component 

To consume the passed data

``` 
//Ctx will be an object containing our data
return (<Context.Consumer>

   {(ctx)=>{
  return ({ctx.isLoggedIn && <Login></Login>)
}}
  </Context.Consumer>
)

```
There's an alternative way of consuming the data by using useContext hooks

```
const ctx = useContext(Context)
return (
 ({ctx.isLoggedIn && <Login></Login>}
)

```
This helps us to reduce the code and avoid the use of function
🎯 Type Coercion in JavaScript
Tags: javascript, webdev, programming
Published: 2022-01-19 10:23:08

**_Type Coercion is process of automatic or implicit conversion of value from one data type to another. Conversion from Number to String , String to Number, Boolean to Number and so on. Type coercion occurs when different types of operators are applied to the values_** 

📌 **Number to String** : Anything added to string first JavaScript convert it into string and then concatenates both the strings.
Note : It occur only with "+" operator
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsfcdg249558eyalmv7t.png)

📌 **String to Number** : when operation like subtraction( - ), multiplication( * ), division( / ), modulus (%) is performed first JavaScript convert it into number then apply these operations
Note : The string should be a Number
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxspludqjsl5rfke3xo4.png)

📌 **Boolean to Number** : when a boolean is added to a Number, boolean value is converted to number as 0 for "false" and 1 for "true"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5s0ayt0y265mcg1kow0.png)

📌 **Equality Operator** : The equality ( == ) is used to compare value irrespective of their type. This happen by coercion of Non-Number to Number data type
Note : To avoid type coercion, use the triple-equals operator ( === )

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dswso7qg4mg7csr6ujo6.png)
Learn web design course online with A2n academy
Tags: webdesigncourse, webdesigncourseonline
Published: 2022-01-19 09:56:15

A2n Academy is the best place to learn **[web design course](https://www.a2nacademy.com/course/web-design-course)**. We provide high-quality web designing training across the world with our team of highly qualified instructors.
We believe in the importance of learning the basics of web design before diving into complicated coding languages. Our interactive, dynamic courses are designed to make your learning experience easy and fun-filled.
**[Web development course online](https://www.a2nacademy.com/course/web-design-course)** planning is a method for learning every one of the nuts and bolts and the most exceptional strategies of web planning.
A2n Academy is a training institute for professionals in the field of web design, development and marketing has started its operations in Mumbai. A2n Academy is an exclusive web designing training institute that provides the best learning environment with the world's top instructors to help you achieve your goals. 
The significance of web design course has expanded lately because of changing prerequisites for architects and customers. Instructional classes permit people to further develop their abilities and move up the website architecture stepping stool. They likewise assist with building a solid portfolio which can make you more serious in your calling .

Many individuals expect to be that assuming they have a fitness for craftsmanship, they will be great at website architecture because of certain similitudes among workmanship and visual plan on sites. Notwithstanding, this isn't accurate as drawing is only one part of being a planner. There are numerous different abilities that should be dominated before someone can call themselves a planner or an expert on this field. Website architecture incorporates abilities like coding, HTML, CSS, and so on.
How to get noticed by tech recruiters?
Tags: beginners, career
Published: 2022-01-19 09:46:51

I attended a webinar by [Codementor](https://www.codementor.io/) yesterday about tech hiring, where the speaker Jeff Lam shared these insightful gems on creating resumes that help candidates stand out:

## What do recruiters look for?

Regardless of ATS (applicant tracking system) or a human reviewing your application, here's what they look for:

- your tech stacks
- relevant experience for the role
- clear & concise profile/resume (if too long, recruiters may even skip reading it)

---

## How to optimize your resume for visibility?

- make it easy to read with bullets, tech stacks, project details
- keep it short & concise, don't overwhelm with info
- recruiters (& ATS) are experts at keyword search. Add relevant ones
- add tech stack at the bottom of every employment

![Image with an example of optimized resume with bullet points, tech stacks and keywords](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t1lt4k5cqhc3wyaf5hk.jpg)

---

## How to stand out?

- give personality to your professional profile: it could be through choice of words, colour, font or anything else
- be active in tech communities and link it to your resume: Github, LinkedIn, Twitter


![Image with an example of optimized resume with professional fonts, colour and links to social media](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1i9ja9is6r38nmvdk9w.jpg)


- don't just write responsibilities. Write about something challenging you've worked on, any projects.
- optimize content for the role. The more relevant it is, there's a higher chance of getting shortlisted
- reach out to key decision makers in the company you're applying for.
- add numbers and quantify wherever you can. Specify the duration of employment. Recruiters (and ATS) are not technical experts but they use them to derive your degree of skill level & understand your seniority

In short, it's not difficult but takes *some* effort to optimize :)

Recently, I launched a product which helps candidates to create resumes with these elements easily. It's now live here: [Resumey.Pro](https://resumey.pro/).
Feel free to  let me know what you think in the comments below 👇
How to get a list of Git commits for a given file
Tags: git
Published: 2022-01-19 09:45:49

> This includes cases where the file has been renamed.

```
git log --follow filename.ext
```

More on [Stack Overflow](https://stackoverflow.com/questions/30443906/git-log-follow-show-all-commits-including-merges): git log --follow, show all commits including merges
How to find text anywhere in your Git repository from the very beginning
Tags: git
Published: 2022-01-19 09:44:07

```
git log -S password
```

## References

- [Stack Overflow](https://stackoverflow.com/questions/4468361/search-all-of-git-history-for-a-string) - Search all of Git history for a string

- [Stack Overflow](https://stackoverflow.com/questions/1337320/how-to-grep-git-commit-diffs-or-contents-for-a-certain-word) - How to grep Git commit diffs or contents for a certain word
Giving up
Tags: discuss, personal, improvement, growth
Published: 2022-01-19 09:40:31

---
title: Giving up
published: true
description: Never give up - pivot!
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2s6qraze2vc94idv20jd.jpg
---

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

At what point do you give up?

I'm not thinking about the average "do only what's necessary" folks. I'm thinking about the people that have the drive. Those that want to "make it" (whatever that means for them).

Is it when you run out of funding, or when you no longer share the same enthusiasm for the vision, or when you start hitting the point of diminishing returns (granted you already have a certain level of what you're after)?

I want to believe that we never give up - that we only pivot along the way to new (and mostly better) paths.

So, really, giving up is not an option. Pivoting is more than welcome and, in the long run, a sound strategic tactic.

---

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.
.new domains
Tags: google, domains, productivity
Published: 2022-01-19 09:28:19

This'll be a interesting, but short one. Recently I've found out about .new domains:

- medium: https://story.new
- google workspace: https://docs.new | https://sheets.new | https://slides.new
- github: https://gist.new
- bitly: https://link.new
- ebay: https://sell.new

... and a lot of others. You can check them at https://whats.new website!
Start Chromium in Kiosk Mode on Raspberry Pi OS
Tags: raspberrypi, tutorial
Published: 2022-01-19 09:25:55

---
title: Start Chromium in Kiosk Mode on Raspberry Pi OS
published: true
description: Launch directly into a fullscreen browser on your Raspberry Pi
tags: raspberrypi , tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abpjbl5cjrcdcwulwzhq.png
canonical_url: https://developers.deepgram.com/blog/2022/01/chromium-kiosk-pi/
--- 

Earlier this month [I built a wearable transcription device](https://twitter.com/_phzn/status/1478504862170161152) using Deepgram and a Raspberry Pi. The project is a web application running in a fullscreen browser on the Pi. However, when the device first starts, it requires a fiddly set of touchscreen interactions to get it in a ready state - opening the browser, navigating to the correct URL, and then fullscreening the browser. In this quick guide, I will show you the steps I took to automate this on device launch.

_This tutorial works for Raspberry Pi OS 10 - Buster_

Open your terminal and type the following:

```bash
sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
```

This will open a new text file which will be executed when the desktop environment (LXDE) launches. In the file type the following:

```
@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi

@xset s off
@xset -dpms
@xset s noblank

@chromium-browser --kiosk https://deepgram.com
```

Click __Control + X__ to quit the app, and then __Y__ to say 'yes' and save your file.

The first section sets up the environment and profile for the Pi, and the second section stops the Pi sleeping or starting the screensaver.

The final line is the most crucial - it starts Chromium (the built-in browser on which Google Chrome is based) in fullscreen mode at the specified URL. Kiosk mode also stops other user input outside of the browser - effectively locking the user into the browser.

I hope this helps you build web-based Raspberry Pi projects. If you have any questions, please feel free to reach out on Twitter - we're [@DeepgramDevs](https://twitter.com/DeepgramDevs).