teleren/devto huggingface dataset:
Nuxt Fetch - A renderless component 
Tags: nuxt, vue
Published: 2022-01-03 21:19:22

Hey, I'm writing my first blog post here to talk about a simple renderless component I wrote for NuxtJS that I use everyday. 

It's a renderless component for NuxtJS that allows me to take advantage of VueJS slots to write less logic when fetching remote data.

Here is a basic copy/paste of the README:

## Installation

```
yarn add @hammerbot/nuxt-fetch
```

## Usage

```vue
<template>
  <div>
    <nuxt-fetch :fetch-fn="fetchFn">
    
      <template #default="{ data, fetching, error }">
        <p>
          {{ data }} - {{ fetching }} - {{ error }}
        </p>
      </template>
      
      <template #fetching>
        Fetching for the first time
      </template>
      
      <template #error="{ error }">
        Error handling {{ error }}
      </template>
      
    </nuxt-fetch>
  </div>
</template>

<script >
import NuxtFetch from '@hammerbot/nuxt-fetch' 

export default {
  components: {
    NuxtFetch
  },
  methods: {
    async fetchFn () {
      const { data } = await this.$api.get('/foo')
      return data
    }
  }
}
</script>
```

As you can see in the example, I don't need to use any `v-if` statement or anything. I'm just using slots here and I find it much less verbose.

Tell me if you like it! I will write a better documentation if someone in this world uses it.

Cheers and happy new year!

PS: If you like it, leave me a star on Github! If you don't.. Tell me why in the comments!

https://github.com/ElMatella/nuxt-fetch
Asteria: Asteroids approaching Earth today
Tags: atlashackathon
Published: 2022-01-03 21:19:09

### Overview

This project shows a list of asteroids and other objects that are approaching Earth today 😱

Worry not though, most of them will miss our planet by dozens of millions of kilometers 😅

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sjw4v3tie2aa1r1o3i4.gif)

See live: [https://asteria-gccgo.mongodbstitch.com/](https://asteria-gccgo.mongodbstitch.com/)

### Submission Category: 

Choose Your Own Adventure


### Link to Code
{% github ValeriaVG/asteria no-readme%}


### How it works

- Realm function [fetchNEOFeed](https://github.com/ValeriaVG/asteria/blob/main/functions/fetchNEOFeed.js) uses [NASA API](https://api.nasa.gov/) to fetch a list of approaching near-Earth objects, transforms them to a more appropriate form and upserts them to a MongoDB collection:
![Neo collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5l9ygxqnb37r0w6fq4h.png)

- Scheduled Realm trigger runs this function every hour:
![Trigger scheduled to 1/* * * *](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5uanhoviz98834f91bn.png)
 
- Filled collection is used to generate Realm GraphQL schema:
![GraphQL schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aweeq1ha11lrqpwgq3fw.png)

- Realm Hosting hosts minimalistic web page that [fetches data](https://github.com/ValeriaVG/asteria/blob/main/hosting/files/scripts/index.js) from GraphQL server and renders it:
![Realm Hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ssi2ymc9o7nf19n1167.png)
 
Hope you like it! And let's hope we shall never see this:
![Fake collision state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anlf1u6h3jl70bc7vjo6.png)
Joining Replay.io
Published: 2022-01-03 18:10:56

---
title: Joining Replay.io
published: true
description: Why I joined Replay.io as Community Lead
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Today is my first day as Community Lead at [Replay.io](https://replay.io)! 

I am incredibly excited about this new adventure for many reasons, but primarily because of Replay’s mission to make software easier to understand, more accessible, and more inclusive.

Replay is a time travel debugger that lets you record and replay web applications with familiar browser dev tools along for the ride. Replay lets you see what’s happening with your software at any point in time, add print statements to existing recordings, and share and comment for easy collaboration. 

{% vimeo 605204613 %}
[Check it out here!](https://www.replay.io/)

More than just being cool tech, Replay is built on a philosophy strongly aligned with my core values as a developer and community member.

Demystifying how applications work and what happens when they don’t work helps reduce the barrier to entry for software development. Creating a culture of sharing and working on bugs collaboratively reduces the fear and stigma around making “mistakes” with code.

I’m also so excited to focus more on community. Understanding developer challenges, building solutions and then sharing that knowledge with others has always been the most rewarding part of my professional and volunteer work. 

Through mentoring and volunteering with Out in Tech and Women Who Code, I’ve seen how a lack of support and unnecessary technical hurdles can prevent developers from thriving as they should. Creating approachable — even exciting! — developer experiences is necessary to fostering an inclusive industry where all developers can build software that goes on to power an inclusive world.

Replay does this by helping communities collaborate around a shared understanding of their software. The opportunity to focus full time on helping developers thrive with Replay is incredible, and I can’t wait to see the impact this will have on communities like these.

Thank you for being a part of this journey with me! If this mission resonates with you, I welcome you to join us in the [Replay Discord](https://replay.io/discord). We’d love to see how Replay can help your team or community. We all go farther when we go together, so let’s see how far we can go!
[Day 3]  Operation Making a Dapp Complete 
Tags: 100daysofcode, blockchain
Published: 2022-01-03 18:03:58

Day 3, can you believe it?!? Feels like this year is already flying by to be completely honest. I completed my first blockchain application this morning and I am so excited! I named the app Ether Marketplace. The app allows you to connect a metamask wallet and buy/sell products with your account using the Ethereum network! How freaking cool. 

All of my code can be found at this [Github Repo]("https://github.com/ChaseStruse/EthMarketplace")

## What did I do? 

- Linked the createProduct method from the smart contract to front end
- Hooked up the purchaseProduct method from the smart contract to the front end
- Created a form to create a product and list it
- Created a table to display products that are for sale
- Fixed a spelling error I found in the smart contract 
- Added a README

## What did I learn?

- Learned how to get a method from a smart contract
- Learned how to send data to the smart contracts data
- Learned how to get a receipt that is returned after the smart contract is completed

## Any Side Notes? 

- This was an incredibly fun project and even though I was following a tutorial I still felt like I learned an incredible amount of knowledge and I am sooo excited to utilize this information on my own projects
- Huge shoutout to Dapp University, I couldn't have done this without them and I am happy I found them and can use them as a free resource
- Find them [here](https://www.youtube.com/channel/UCY0xL8V6NzzFcwzHCgB8orQ)
316. Remove Duplicate Letters
Tags: 100daysofcode, programming, algorithms, java
Published: 2022-01-03 15:04:33

# [Description](https://leetcode.com/problems/remove-duplicate-letters/)

Given a string `s`, remove duplicate letters so that every letter appears once and only once. You must make sure your result is **the smallest in lexicographical order** among all possible results.

## Example 1:

```
Input: s = "bcabc"
Output: "abc"
```

## Example 2:

```
Input: s = "cbacdcbc"
Output: "acdb"
```

## Constraints:

- `1 <= s.length <= 104`
- `s` consists of lowercase English letters.

---

# Solutions

## Solution 1

### Intuition

Greedy, stack + frequent map + add flags

### Code

```java
class Solution {

    public String removeDuplicateLetters(String s) {
        Stack<Character> stack = new Stack<>();
        int[] freq = new int[26];
        boolean[] added = new boolean[26];
        for (char c : s.toCharArray()) {
            freq[c - 'a']++;
        }

        for (int i = 0; i < s.length(); i++) {
            char c = s.charAt(i);
            freq[c - 'a']--;
            if (added[c - 'a']) {
                continue;
            }
            while (!stack.isEmpty() && stack.peek() > c && freq[stack.peek() - 'a'] > 0) {
                added[stack.pop() - 'a'] = false;
            }
            stack.push(c);
            added[c - 'a'] = true;
        }
        StringBuilder ans = new StringBuilder();
        for (char c : stack) {
            ans.append(c);
        }
        return ans.toString();
    }
}
```

### Complexity

- Time: O(n)
- Space: O(n)
Install Solana on M1 Macs, without Rosetta 💡
Tags: web3, rust, solana, webdev
Published: 2022-01-03 20:33:05

Although both the [Solana Tool Suite](https://docs.solana.com/cli/install-solana-cli-tools) and [Anchor](https://project-serum.github.io/anchor/getting-started/introduction.html) have already got good native support for the M1 architecture, there are currently no official binary builds for the new Macs.

In this guide, we will go through all the steps needed to compile and install the tools on your machine natively, without having to set up a cumbersome Rosetta environment.

## Install Rust

First, you will need to install the Rust toolchain.

```bash
curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env
rustup component add rustfmt
```

![Rust is installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lsynf5xhhcs1hqiuxfr.png)

This should be all what we need.

## Install Solana Tool Suite

Before compiling the Solana Tool Suite, you will need `coreutils` installed on your computer in case you don’t have it:

```bash
brew install coreutils
```

Now let’s clone the Solana repository. I’m using shallow cloning to speed up things since the entire commit history is not needed.

```bash
# grab only the repo state at the v1.9.2 tag
git clone --depth 1 --branch v1.9.2 https://github.com/solana-labs/solana.git
```

Then, go into the directory and run the `cargo-install-all.sh` script.

```bash
cd solana
./scripts/cargo-install-all.sh .
echo "export PATH=$PWD/bin:\$PATH" >> ~/.zshrc
```

![Solana is installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdqv2hncn1wxvgjbss18.png)

This will take a while, but after it is finished, you can verify if the installation is successful with:

```bash
solana --version
```

There used to be [an issue with `solana-test-validator`](https://github.com/solana-labs/solana/issues/19743) on M1 Macs, but the [problem has been solved](https://github.com/solana-labs/solana/pull/21008). You can try to spin it up to make sure it works.


![Solana Test Validator is up and running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu3p56evsh34c8h0ej1j.png)

## Install Anchor

Anchor is the recommended framework for Solana programs.

Note that Anchor uses [Yarn v1](https://classic.yarnpkg.com/en/docs/install#mac-stable) to manage Javascript dependencies in your project, so make sure you already have it installed on your computer.

Since there’s no official binary available for the M1 architecture, we’ll also need to build from source:

```bash
cargo install --git https://github.com/project-serum/anchor --tag v0.19.0 anchor-cli --locked
```

Then, you can verify if the installation is successful with:

```bash
anchor --version
```

![Anchor is installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyixp752er27f21jdvh5.png)

And that’s it. Have fun building with Solana on your M1 Mac natively!

---

_Also building in Web3? Let's connect via Twitter_ 👋 **[@0xMuse](https://twitter.com/0xmuse)**
Make NASA's landing page in 50 minutes - CSS & HTML
Tags: css, html, webdev, beginners
Published: 2022-01-03 20:11:37

## Make the landing page of nasa.gov in 50 minutes - YT tutorial

Checkout the finished website here: 
https://nasa-landingpage-clone.netlify.app/

Watch the YouTube tutorial: 
{% youtube TJ9IJsKirqA %}

##Hello, and welcome to my blog! 😊
In this video, I make a clone of the nasa.gov landing page. The main purpose of this tutorial is to get some good practice with css grid and css flexbox by building real world projects. This website is also fully responsive.

You can view all the code on Github: 
https://github.com/SebCodesTheWeb/NASA-landingpage

## --How it's structured--
The markup is simple. It is separated into three parts. A header, main content, and a footer. The main content is made of a grid that responsively changes depending on the viewport width. The header is also a grid combined with flexbox children for easy alignment. The footer is a flexbox in itself. 
## --About me--

Hello! My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since Christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch)

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development. I will be documenting my progress for the coming days, and filming myself on my Youtube-channel, so feel free to follow along my journey and learn with me!

## --Social Media--

- Follow my Blog: https://dev.to/sebcodestheweb
- Youtube: www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA
- Reddit: https://www.reddit.com/user/zenrigod
- Instagram: https://www.instagram.com/sebcodestheweb/
- Github: https://github.com/SebCodesTheWeb
_stats in elasticsearch
Tags: elasticsearch
Published: 2022-01-03 20:02:42

Interpretation of right data give you a lot of insights, and how to fetch those data plays an important role, Here we are going to see how to use _stats API to retrieve stats data.

```
GET my-index/_stats/
``` 

This API presents you with lots of data and interpreting the data and creating a meaning out of it, comes with right learning.

We are mainly going to focus on getting specific data from _stats.

Objects from _stats output can be divided in 3 groups:

- Indexing includes ==> indexing, merge, refresh, flush, fielddata, segments, translog
- Searching includes ==> get, search, query_cache, request_cache
- others ==> docs, store, warmer, completion, recovery


Instead of blindly typing `<my-index>/_stats` it is very important to access specific data and limited data to focus on interpretation.

To know about indexing, try `GET my-index/_stats/indexing`
[week1] Days 1 - ES6 Modules
Published: 2022-01-03 20:00:14

So for my 100 days of code i decided to start with the basic by ending my learning courses on freecodecamp and getting the certification from [FreeCodeCamp on JavaScript Algorithms and Data Structures ](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#es6). 
I had already started the certification but i leaved it . So i started with the ES6 part , And it was a good choice , i have found some ES6 syntax i didn't know or use .

This is my top 5 thing i learned todays : 

-  Rest Parameter :  With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function. 

```javascript
const sum = (...args) => {
  return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6
```
- Spread Operator : which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.

```javascript
Math.max.apply(null, arr)

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);
```

- Use Destructuring Assignment to Extract Values from Objects

````javascript
//ES5
const user = { name: 'John Doe', age: 34 };

const name = user.name;
const age = user.age;

//ES6
const { name, age } = user;
```

- Use Destructuring Assignment to Assign Variables from Nested Objects
````javascript
//ES5
const user = {
  johnDoe: { 
    age: 34,
    email: 'johnDoe@freeCodeCamp.com'
  }
};

//ES6
//Here's how to extract the values of object properties and assign them to variables with the same name:
const { johnDoe: { age, email }} = user;
// here's how you can assign an object properties' values to variables with different names:
const { johnDoe: { age: userAge, email: userEmail }} = user;

```

- Object Literal Declarations Using Object Property Shorthand
````javascript
//ES5
const getMousePosition = (x, y) => ({
  x: x,
  y: y
});
//ES6
const getMousePosition = (x, y) => ({ x, y });
```

and many more thing 
On day 2 i will work on [regex ](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#regular-expressions)

PS:
- if you see any spelling or grammar mistakes can you notify me (I am still improving my English)  ? thank you !
- if you have any tips for improving my post feel free to comment on the post
Why is 100 days coding necessary?
Published: 2022-01-03 19:55:55

It's not just 100 days, it's very difficult days that not everyone is able to complete the challenge.

More hours, more days developing something, it will make you get into the development habit and learn at once every function, variable, object and everything that encompasses your programming language. This is the real reason for you to take the 100-day challenge and nobody talks about it, but I do: it's hard.

Habit will make you have constancy.

Habit will make you always learn something new.

The habit will make you look to become a good professional.

Everyone who is migrating to the TECH field should take the 100-day challenge with the language they are interested in learning.
How to share your components with your team in Figma
Tags: uidesign, figmatips, figma, figmatutorial
Published: 2022-01-21 00:35:01

---
title: How to share your components with your team in Figma
published: true
date: 2022-01-03 19:55:00 UTC
tags: uidesign,figmatips,figma,figmatutorial
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*Ozd2ITTknbZJUxmj.jpg)

In Figma, you can share your local file’s components with your team. In this quick post, we’ll see how to share your component in Figma.

### Watch Video Tutorial

{% youtube x99_i6mwF28 %}

### Share Components

In order to share your components with your team, you’ll need to have a **professional team plan**.

![](https://cdn-images-1.medium.com/max/1024/0*_kzKw7fSLK9EIjOO.png)

- Let’s head to the **Assets** tab in the left-hand sidebar.

![](https://cdn-images-1.medium.com/max/528/0*rFEperhKHsEyNIkT.png)

- Hit the **Team Library** icon in the right corner of the **Assets**  panel.

![](https://cdn-images-1.medium.com/max/484/0*DBNoWmb3V0xtNQ_l.png)

- In the **Libraries** modal box, hit the **Publish** button beside your file name.

![](https://cdn-images-1.medium.com/max/988/0*Bh0ezDKvqfza2VAz.png)

![](https://cdn-images-1.medium.com/max/920/0*35bX6ZysxJ8iggtT.png)

### Import and Use components from another file

To access your components library in a new file, go to the **Assets** tab in the left-hand sidebar.

![](https://cdn-images-1.medium.com/max/528/0*FR-H1qqVZ6aaXSxk.png)

- Hit the **Team Library** icon in the right corner of the **Assets**  panel.

![](https://cdn-images-1.medium.com/max/484/0*ADdy5zr5EK4jAvAo.png)

- In the **Libraries modal** find your \*\*\*\*file’s library and switch its knob  **ON**.

![](https://cdn-images-1.medium.com/max/932/0*AVLnQCfaxxNsHkfv.png)

You can access your file’s library in the **Assets**  panel.

![](https://cdn-images-1.medium.com/max/480/0*kDvehhD1ylO86d1G.png)

That’s everything about sharing components in Figma. In the next posts we’ll cover more concerning Figma components.

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-share-your-components-with-your-team-in-figma/) _on January 3, 2022._
echo3D featured on Elite Game Developers Podcast
Tags: startup, virtualreality, entrepreneurship, podcast
Published: 2022-01-03 19:49:46


![EliteGame.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641238747735/UqZruBfBe.png)
Listen to the latest  [Elite Game Developers](https://elitegamedevelopers.com/)  podcast episode with our CEO  [@AlonGrinshpoon](http://twitter.com/AlonGrinshpoon)! In the latest episode we chat about our founder journey, how we validated our 3D platform as a business idea, how we approaches founder/investor fit, and how first-time founders should approach problems with their companies.

Elite Game Developers is a resource run by Joakim Achrén that teaches proven strategies for running a games business and optimizing it in effective ways. The mission of Elite Game Developers is to help spiring games entrepreneurs who are seeking success in the games industry.

**Listen to the full podcast episode on  [EliteGameDevelopers.com](https://elitegamedevelopers.com/),  [Spotify](https://open.spotify.com/show/6CQO7qIVVQT5baHn3P0ZnS?si=zD7OOGTFTzGzr-zutkZG3Q&nd=1),  [Apple Podcast](https://podcasts.apple.com/gb/podcast/elite-game-developers-podcast/id1463752909),  [Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly9lbGl0ZWdhbWVkZXZlbG9wZXJzLmxpYnN5bi5jb20vcnNz/episode/YzM0NzEzNGYtY2FmMC00NGY0LWJmYWItNDM4NzFhNmFmMTE0?hl=en-IL&ved=2ahUKEwj3nvDi7pX1AhWdSvEDHWddD4oQjrkEegQIAhAI&ep=6), or  [Stitcher](https://www.stitcher.com/show/elite-game-developers-podcast/episode/alon-grinshpoon-building-for-the-metaverse-89410830).**

Thanks Joakim Achrén of Elite Game Developers for a great conversation!

Listen to more the Elite Game Developers podcast episodes  [here](https://elitegamedevelopers.com/).

Learn more about echo3D at  [www.echo3D.co](https://www.echo3d.co/).

***
>echo3D (www.echo3D.co; Techstars ’19) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.

![echo3D logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641238754072/K-ziJKBXb.png)
Swipe objects in Appium with C#

Tags: csharp, appium, qa, sdet
Published: 2022-01-03 19:37:33

Simple function for swiping object 1 to object 2 in Appium using C#

Swipe objects in appium using W3C standards in C#

https://github.com/delrayo/swiping_appium_c-/blob/main/swipe.cs
```
/// this code works Following the W3C standards

using System.Threading;
using OpenQA.Selenium.Appium.MultiTouch;

float object1CoordinateX = 500;
float object1CoordinateY = 500;
float object2CoordinateX = 500;
float object2CoordinateY = 1000;

TouchAction actionOne = new TouchAction((OpenQA.Selenium.Appium.Interfaces.IPerformsTouchActions)TestData.driver);
actionOne.Press(object1CoordinateX, object1CoordinateY);
actionOne.MoveTo(object2CoordinateX, object2CoordinateY);
actionOne.Release();
actionOne.Perform();
Thread.Sleep(2500);
```



https://delrayo.tech/blog/post/1634195/swipe-appium-csharp
https://www.DelRayo.tech