teleren/devto huggingface dataset:
[My first Hackathon project]
Published: 2022-01-13 06:47:57

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: 

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

[Reminder]: # (Submissions are due on January 13th, 2022 @ 11:59 PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022).
Reverse Recipe
Tags: atlashackathon
Published: 2022-01-13 06:32:32

### Overview of My Submission

The purpose of our app is to search our MongoDB database for a list of recipe's based on a list of entered ingredients. We connected our Mongo Realm account with serverless functions and made GraphQL calls to retrieve the data from our database. We plan for a lot more to come and plan to continue working on it post Hackathon. Feel free to check it out!

## Submission Category: 
**Choose Your Own Adventure**

## Link to Code
[Link to code](https://github.com/DebitTwo/reverseRecipe)

## Additional Resources / Info
### Home Page
![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcje7r1sim788xlhnz3k.png)

### Recipe Results Page
![Recipe Results Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th4vezeu5eso1glqehhi.png)

### Single Recipe Page
![Single Recipe Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd15pxdwbzmvxgmra3d2.png)

## Collaborators
@tkcwebdev - Chris
[Github for Chris](https://github.com/christoph-codes) - Chris
@cmolisee - Cody
[Github for Cody](https://github.com/cmolisee) - Cody
The Complete Guide to Roblox Executor and How it is Taking the Gaming Industry by Storm
Published: 2022-01-13 06:29:46

**Introduction: What is Roblox Executor?**

Roblox Executor is a web-based service for developers to create, deploy, and manage their Roblox games.

The game engine is free to use for all developers, but you must pay in order to publish your game.

Roblox Executor provides features like the ability to upload and download packages that are used in your game; the ability to build and debug games; the ability to create groups of players; and much more.

**How Roblox Android Executor Works**

Roblox is an online game platform which allows users to create their own games and play games created by other people.

[Roblox Android Executor Arceus X](https://arceusx.com/) is a Roblox app that helps in the development of Roblox games for Android devices.

It contains many features like logging in from your device, uploading your game to the Roblox servers, and downloading it from the server to your device.

The app also has a feature called 'Remote Debugger' which helps developers debug their games remotely on their computer.

**Roblox Executor in-depth Review**

Roblox is a 3D platform that allows players to create their own games and play games created by other players. Roblox is a product of the Roblox Corporation which was founded in 2006 by David Baszucki and Erik Cassel. The company has been growing exponentially since its founding with over 15 million monthly active users as of April 2018.

Roblox Executor is a tool that allows players to create their own games on the Roblox platform. It was released in 2010 and has been updated regularly since then, most recently in May 2018 with version 1.8. The main features of this tool include: an interface for creating scripts, an animation editor, and the ability to publish content on the Roblox website or upload it to YouTube or Twitch

**Why Developers are Using Roblox Executor**

Roblox Executor is a tool that developers use to create games in Roblox. It is a simplified version of the original Roblox Studio and it has been designed to be simple enough for young children to use.

This section provides information about why developers are using Roblox Executor, who it is designed for, and what it does.
Why you need the Cloud?
Tags: cloudcomputing, publiccloudproviders
Published: 2022-01-13 06:27:55

#Cloudcomputing is the provision of **on demand** IT Services over the internet with a **pay-as-you go** model. You can run your workloads, applications and databases in the cloud as you provided **scalability**, **elasticity**, **durability** .Why is this interesting? it is because you can get services you need ,the amount you need ,for the time you need and just pay for what you need just like that.[(https://en.wikipedia.org/wiki/Cloud_computing) For more? Watch this space. To be continued....
Use React hooks inside an MDX story in Storybook
Tags: storybook, react, javascript
Published: 2022-01-13 06:23:44

```jsx
<Story name="With hooks">
  {() => {
    const [count, setCount] = useState(0);
    return (
      <button
        onClick={() => setCount(count + 1)}
      >
        Clicked {count} time(s)
      </button>
    );
  }}
</Story>
```
How to do CSS like transitions in Svelte?
Tags: svelte, javascript, beginners, webdev
Published: 2022-01-13 06:23:28

**Shorthand properties** are the CSS properties, allowing us to set the values of multiple CSS properties.

The transition is also a shorthand CSS property that facilitates us to define the transition between two states of an element. Like fading/sliding an HTML element.

In Svelte, the transition is inbuilt. In this article, we learn about it in Svelte transitions.

The `svelte/transition` module contains the following animation: `blur`, `fade`, `fly`, `slide`, `scale`, `draw` and `crossfade`.

They are used with the, in, or out directives.  The in and out directives works when the HTML element is added or removed from the DOM.

In our previous article, we discuss Animation in Svelte. If you haven't gone through the article, please visit this link.

We'll start with adding a new route animations/transition. If you are new here, before proceeding further you need to visit this link. To create a route, we need to create a new file animations/transition.svelte.

Add the following content in the transition.svelte:

```javascript
<script>
    import { fade } from "svelte/transition"

    let options = { duration: 1000 }
    let show = true;

</script>
<h1>Transition in Svelte.</h1>

<label>Click here to view transitions</label>
<input type="checkbox" on:click={() => show = !show} />


{#if show}
    <h1 transition:fade={options}>Fading Away.</h1>
{/if}
```

We import the fade transition and set the duration in options variable. Then we create a checkbox and bind it with the onclick and set the value true or false.

Similarly, we can add the other transitions like blur, draw, scale, slide etc.

```javascript
<script>
    import { fade, blur, scale, slide } from "svelte/transition"

    let options = { duration: 1000 }
    let show = true;

</script>
<h1>Transition in Svelte.</h1>

<label>Click here to view transitions</label>
<input type="checkbox" on:click={() => show = !show} />


{#if show}
    <h1 transition:fade={options}>Fading Away.</h1>
    <h1 transition:blur={options}> Text to Blur </h1>
    <h1 transition:scale={options}> Text to Scale </h1>
    <h1 transition:slide={options}> Text to Slide </h1>
{/if}
```
See you in the next article.
Data Binding in React ListBox Component
Tags: react, webdev, reactnative
Published: 2022-01-13 05:23:12

Learn how easily you can bind local and remote data to the [React ListBox component](https://www.syncfusion.com/react-ui-components/react-listview). 

Download an example from GitHub: https://github.com/SyncfusionExamples... 

Refer to the following data binding documentation for the Syncfusion React ListBox component: https://ej2.syncfusion.com/react/documentation/list-box/data-binding/

{% youtube AZPWB2o_cdI %}
Get Id of recently added record in Linq.
Tags: csharp, beginners, programming, tutorial
Published: 2022-01-13 05:14:22

After you commit your object into the db the object receives a value in its ID field.
So:

```
myObject.Field1 = "value";

// Db is the datacontext
db.MyObjects.InsertOnSubmit(myObject);
db.SubmitChanges();
//in case of Repository pattern
db.InsertorUpdate(myObject);
db.commit();

// You can retrieve the id from the object
int id = myObject.ID;
```
Hand position for Ctrl key?
Published: 2022-01-13 04:56:54

I am referring to touch typing, it is a bit painful to `Ctrl + ~`, is there a better way to do that?

We can press it with bottom start of the pinky finger.

Practice this key hand positioning, it will payoff in the long run.

### `Ctrl + Shift + ~` for opening terminal

> Make a karate movement!

![`Ctrl + Shift + ~` for opening terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsa3b7t195f23a4dacgq.jpg)
 

<!--![`Ctrl + Shift + ~` for opening terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/preultjx6jx3xmsq0qjw.png) -->

### `Ctrl` for control key combinations

> We can press it with bottom start of the pinky finger.

![`Ctrl` for control key combination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8owbjpijkx7dnsvl5yt.jpg)

📝 The second trick I have learned sometime from some reddit post

Happy coding!
Employee Management Web Portal 
Tags: atlashackathon
Published: 2022-01-12 14:57:23

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: Choose Your Own Adventure

### Link to Code
https://github.com/Simranjakhodia/Employee-Management-Web-Portal
[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### About the Project :
The technologies used in this project are (MERN) Mongo Atlas (MongoDB), ExpressJS, NodeJS, ReactJS.

Created a simple and responsive web-based Employee Management Portal that supports the following CRUD actions:
a)Add Employee : On submitting the form a unique employee-id is generated for the employee and the details are saved in the MongoDB Database using MongoDB Atlas.
b)Delete Employee : A delete button feature in the table to delete the details of that employee from the database.
c)Update Employee : An update button feature in the table which links to an update employee web-page for re-entry of the details of that user. Changes are saved in the database of that corresponding employee identified by his/her unique employee-id.
d)Show all Employee Details: A table containing all relevant details of all the employees.
e)Search Employee by the Unique Employee-Id : To get the details of any specific employee, we've used the unique-id to display his/her details. 

[Note:] # Screenshots/demo videos are encouraged!
Link to demo video: (https://www.dropbox.com/s/rtpan0edijsnk9z/EmployeeManagementPortal.mp4?dl=0)

View Employee Data Rendered on Dynamic Table
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehuc96mducq0n43kb20t.png)

Add New Employee Data in Employee Database
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0wls76aldzjbp6k779a.png)

Update Details of Existing Employee using unique Employee-Id
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kj69vy7mthp81d6z0js.png)

Search Details of Employee using unique Employee-Id
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wiumbcnms4c5ik51haz.png)
Flocking with predator
Tags: webdev, codepen, programming
Published: 2022-01-13 04:34:25

<p>This is an updated version of Abel Jansma work on OpenProcessing.org
<a href="https://openprocessing.org/sketch/126516" target="_blank">https://openprocessing.org/sketch/126516</a></p>

<p>A flocking simulation based on Daniel Shiffman's chapter 
about steering forces in 'The nature of code'.</p>

{% codepen https://codepen.io/digitonaut/pen/zYEMQao %}
Self-Taught Developer Journal, Day 37: TOP DOM Manipulations and Events cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-13 04:17:53

Today I learned...

## Important Note
JavaScript does not alter your HTML, but the DOM. It changes what the browser renders.

DOM manipulation methods will not work if the JavaScript file is called before the DOM nodes are parsed and created. To fix this, you can:
 
* include JavaScript at the bottom of your HTML file
* link the JavaScript file in the *head* of your HTML document
* use the *script* tag, set the *src* attribute to the path to the JS file, and include the *defer* keyword to load the file after the HTML is parsed

## Exercise
1. a *p* with red text that says “Hey I’m red!”

![JS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/950v546kazjv6td344ym.png)

![Web Page Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4xyfpkqyavln4adw7ke.png)
 
 
## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#applying_css_and_javascript_to_html
Unix Heredoc Cheatsheet
Tags: unix, linux, shell, beginners
Published: 2022-01-13 03:56:39

---
title: Unix Heredoc Cheatsheet
published: true
date: 2022-01-13 03:27:14 UTC
tags: unix,linux,shell,beginners
canonical_url: https://clavinjune.dev/en/blogs/unix-heredoc-cheatsheet/
---

![Photo by @kellysikkema on Unsplash](https://images.unsplash.com/photo-1520004434532-668416a08753?q=50&w=1920 "Photo by @kellysikkema on Unsplash")

## Syntax

```bash
[cmd] <<[-] delimeter [cmd]
    contents
delimeter
```

All `contents` will be passed to the cmd as an input, examples below will use `EOF` as a delimeter and `cat` as a command, you can change to whatever you want.

## With Variable

```bash
cat <<EOF
    echo "$HOME"
EOF
```

result:

```bash
    echo "/home/clavinjune"
```

## Escape Variable

Use `\$` instead of `$` to escape specific variable

```bash
cat <<EOF
    echo "$HOME"
    echo "\$HOME"
EOF
```

result:

```bash
    echo "/home/clavinjune"
    echo "$HOME"
```

## Escape All Variables

Use `'EOF'` instead of `EOF` to escape all variables

```bash
cat <<'EOF'
    echo "$HOME"
    echo "\$HOME"
EOF
```

result:

```bash
    echo "$HOME"
    echo "\$HOME"
```

## Remove Leading Tab

Use `<<-` instead of `<<` to remove leading tabs

```bash
cat <<-EOF
    echo "$HOME"
    echo "\$HOME"
EOF
```

result:

```bash
echo "/home/clavinjune"
echo "$HOME"
```

## Add More Pipeline

```bash
cat <<EOF | grep june
    echo "$HOME"
    echo "\$HOME"
EOF
```

result:

```bash
    echo "/home/clavinjune"
```

## Write To a File

```bash
cat <<-'EOF' > /tmp/foo
    echo "$HOME"
    echo "\$HOME"
EOF
```

result:

```bash
$ cat /tmp/foo 
echo "$HOME"
echo "\$HOME"
```

Thank you for reading!
Time management for programmers
Published: 2022-01-13 02:44:26

I've recently started reading _Four Thousand Weeks: Time Management for Mortals_. The essence is (my apologies to the author if I'm butchering it) that you'll always have too much to do, and you'll always be too busy and that all we can reasonably do is to be attentive of this and make wise tradeoffs - and not to try and do everything.

There's a common saying in software development that you should hire lazy developers - the reason being that they'll do whatever they can to reduce the amount of work they have to do. Need to search through hundreds of text documents for email addresses? No way is a lazy developer doing it by hand, they'll come up with a program to do the hard work for them. But there's a fine line: is it still better to write a program to solve a labour intensive task if it takes much longer to write the program than just doing it by hand? Developers have a tendency to create tools to do all sorts of things, and many times they make life easier, but many times they also increase complexity and slow people down.

At what point do time saving features of programming languages begin to take up more time than they save? It's something I've been thinking about constantly throughout my career. On the one hand if your code is straightforward but verbose it can be very quick to read and understand. If you've seen a piece of code a hundred times you can be pretty damn sure that there isn't anything funky going on. The downside of course is that there's just more code and, despite my previous sentence, even simple code will contain bugs at some point.

Smart people have come up with many time saving ways to create software products: all-in-one frameworks such as Ruby on Rails that (as long as you know the framework) allow you to create web applications with lightning speed, code generation tools that take a high level description of your API and spit out the boilerplate code leaving only the implementation to you. One more recent tool that I've come across, Hasura, allows you to expose your database directly as a graphql endpoint. Providing one of the most attractive no-code experiences as almost all of the traditional CRUD "backend" code is handled by the tool.

These are all fantastic tools of course, but what happens when you hire a promising young intern who is proficient at coding, but isn't familiar with all the tricks? Suddenly your time saving solutions become the bottleneck and a more verbose, but straightforward code solution would be faster for them to work with. It could just be that the intern needs to learn all of these tricks before they become productive. My core question, I suppose, is: is it possible to have your cake and eat it? Is it possible to do all the common stuff trivially and at the same time have it in a familiar form (i.e. code in a standard language)?

My intuition is that it's possible, but I haven't seen quite what I'm thinking of here. Leave a comment and let me know what your favourite tools are below!
Interfaces satisfying interfaces
Tags: go
Published: 2022-01-13 01:55:23

`<< this post is mostly just a refresher for myself >>`

Interfaces are often confusing for me. When I started parsing through some of the core/v1 kubernetes code, something stuck out to me: there are *a lot* of interfaces in here. Some only needing a single method to be satisfied. 

Within this, a common theme was interfaces satisfying interfaces. This is a weak point of mine, so I crafted up a quick example to jog my memory.

---

Here's the code: 

```go
func main(){
    var a nested
    c := cat{}
    a = c
    a.Speak()
    d := dog{}
    a = d
    a.Speak()
}

type nested interface {
	random
}

type random interface {
	animal
}

type animal interface {
	Speak()
}

type cat struct{}
type dog struct{}

func (c cat) Speak() {
	fmt.Println("meow")
}

func (d dog) Speak() {
	fmt.Println("woof")
}
```

---

As you can see, there are three interfaces here: `nested`, `random`, and `animal`. However, only one of these has an actual method attached to it: `animal`. The other 2 are simply requiring other interfaces to be satisfied. 

From there, I set up two object types, `cat` and `dog`, which both have the `Speak()` method. As you can see, it just prints out a statement. 

Once in the `main` function, I set up a `nested` variable, which is an interface. This interface only requires an object that satisfies `random` which requires `animal` which requires any object type that has a method `Speak()`. In this case, bot the cat and dog objects do. 

From there, I set the `a` variable to a dog or cat variable and call the methods.

--- 

This, however, will not work if we try to call `a.Speak()` before assigning an object that satisfies all of these conditions. If, for instance, I had the below code:

```go
func main(){
    var a nested
    a.Speak()
}
```

It would cause a panic because the interface is currently `<nil>`. 

--- 

Anyways, it was a good refresher on interfaces within Go for myself :)
Fluency & Accuracy in Design
Tags: webdev, design
Published: 2022-01-13 01:01:03

I'm currently reading [_Elements of Choice_](https://theelementsofchoice.com/) by behaviorial economist, Dr. Eric Johnson, and he spends a great deal of time discussing how web design impacts behavior. There is a lot to unpack, but a couple of key terms he uses are: Fluency and Accuracy.

**Fluency** is presenting only the relevant information in an easily digestible fashion. He used the example of NY State's COVID website which listed the name of the Governor on each page; something unnecessary when you're looking for important information on a virus that might kill you.

**Accuracy** is the ability of the user to get what they actually want. In web design, this can be huge in things such as setting the default selections. He gives the example of iJustine who signed up for an unlimited text and data plan with AT&T when the first iPhones were released. Her first statement was sent in a box and was 300 pages long listing every text and all the times she'd used data that month with a $0.00 at the end of each line since she was on the unlimited plan. It turns out the person designing the page set the default to itemized invoicing rather than an overview invoice or a digital invoice. A 300 page invoice for each customer was neither what AT&T nor the customer wanted, but she'd selected it as she was clicking "Next" through the signup pages.

So, when you're designing a webpage, ask yourself "Am I filling the page with irrelevant information or only what the users need even they need it?" and "Will my users get what they really want?"

Sometimes less "fluency" is necessary to increase accuracy. Even if it's in the ordering of options, you're impacting what users will decide. Use the power wisely and in a way where you won't leave them disappointed.