teleren/devto huggingface dataset:
How to use DataStax Serverless Database with Netlify Serverless Functions (video)
Tags: serverless, netlify, react, jamstack
Published: 2021-03-24 17:38:39

In this video I show you how to use a Serverless Database and Serverless Functions in your next project. We will be using DataStax Astra Cassandra-as-a-service to do this.  Cassandra is used by all the major players such as Netflix, Apple, Ebay and so many more. The only prerequisite for this tutorial is a knowledge of React.

Content:
00:00: Introduction
02:04: Signing up to our Serverless Database
04:17: Creating our React App
06:43: Using Netlify Serverless Functions
13:16: Using the astrajs/collection package to communicate with our database

{% youtube 4JK1XmqLqnw %}

For this video, we will be using this documentation here: https://docs.datastax.com/en/astra/docs/astra-collection-client.html

Final + tidied code:
https://github.com/kubowania/serverless-database

____

Other links:
In this video I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-free

If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow

#serverlessdatabase #netlify #serverless #datastax
Create Instagram "Like" button in React Native with animated  API
Tags: reactnative, instagram, like, animated
Published: 2021-03-24 17:37:42

the simplest(maybe not the best) way to create a like button that bounces on press.


```
import React, {  useState, useRef } from "react";
import { FontAwesome } from "@expo/vector-icons";
import { Animated, View } from "react-native";

const AnimatedIcon = Animated.createAnimatedComponent(FontAwesome);

export const Like = ({ item, style }) => {
  const scale = useRef(new Animated.Value(1)).current;
  const opacity = useRef(new Animated.Value(1)).current;
  const reverseOpacity = useRef(new Animated.Value(0)).current;
  const [liked, setLiked] = useState(false);

  const like = (value) => {
    Animated.sequence([
      Animated.timing(scale, {
        toValue: 0.9,
        duration: 50,
        useNativeDriver: true,
      }),
      Animated.timing(scale, {
        toValue: 1.2,
        duration: 150,
        useNativeDriver: true,
      }),
      Animated.timing(scale, {
        toValue: 0.9,
        duration: 50,
        useNativeDriver: true,
      }),
      Animated.parallel([
        Animated.timing(scale, {
          toValue: 1,
          duration: 200,
          useNativeDriver: true,
        }),
        Animated.timing(value ? opacity : reverseOpacity, {
          toValue: 0,
          duration: 90,
          useNativeDriver: true,
        }),
        Animated.timing(value ? reverseOpacity : opacity, {
          toValue: 1,
          duration: 90,
          useNativeDriver: true,
        }),
      ]),
    ]).start();
    setLiked(value);
  };

  return (
    <View>
      <AnimatedIcon
        name={"heart"}
        size={30}
        style={{
          ...style,
          position: "absolute",
          opacity: reverseOpacity,
          transform: [{ scale }],
        }}
        color="#B00000"
        onPress={() => like(!liked)}
      />
      <AnimatedIcon
        name={"heart-o"}
        size={30}
        style={{
          ...style,
          opacity: opacity,
          transform: [{ scale }],
        }}
        color="black"
        onPress={() => like(!liked)}
      />
    </View>
  );
};
```
globalThis in a nutshell
Tags: javascript
Published: 2021-03-24 17:25:20

`globalThis` is a global object reference for client and server applications using JavaScript.

👉 It’s helpful to create cross-platform apps and libraries.

🔒 Due to security, `globalThis` is a Proxy reference of the global object on the browser.

```javascript
globalThis.fetch("https://...");
```
Find the largest & smallest number
Tags: webdev, codenewbie, beginners, javascript
Published: 2021-03-24 17:12:23

```js
const list = [989, 176, 443, 234, 843];

console.log(Math.max(...list)); // 989
console.log(Math.min(...list)); // 176
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Vault KV-V2 list policy
Tags: notes, infrastructure, hashicorp, vault
Published: 2021-03-26 20:13:43

---
title: Vault KV-V2 list policy
published: true
date: 2021-03-24 17:00:00 UTC
tags: Notes,infrastructure,hashicorp,vault
canonical_url: https://clavinjune.dev/en/blogs/vault-kv-v2-list-policy/
---

Enable kv-v2 on secrets `secret`

```bash
$ vault kv enable-versioning secret

```

Put something inside secrets `secret`

```baah
$ vault kv put secret/your-path your-key=your-value

```

Create policy file

```bash
$ tee policyfile.hcl <<EOF
path "secret/*" {
  capabilities = ["list"]
}
path "secret/data/your-path" {
  capabilities = ["read"]
}
EOF

```

Please notify that we add policy rules for `secret/data/your-path` even though we use `secret/your-path` as a path. Because KV-V2 add `data` prefix before your path name

Apply the policy file to your role

```bash
$ vault policy write your-role policyfile.hcl

```
CSS Selectors
Tags: beginners, css
Published: 2021-03-24 16:48:54

what is CSS selectors?

A CSS selector selects the HTML element(s) you want to style. In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work.

Type selectors
These are selectors used to match elements in the DOM, such as p, div, span, and even customized tags.

Class selectors
These are used to select elements in the DOM that have a specific class as an attribute. For this, you have to add a . to the beginning of the name you want to match.

ID selectors
These will match elements with a specific identifier associated with it. For this type of selector, you have to use a # before the ID you want to match.

Universal selector
This one is used to match all the elements in the page. It can be used to reset margins and paddings for all elements, for instance. However, it is not indicated since it can overload the rendering process of your page.

Attribute selectors
These will match elements that have a specific attribute associated with it. This can be used to match both individual attributes and attributes associated with their values. For this type of selector, you must surround the attribute name with square brackets.

That's all for now  I'll share more in next Post.
Gddamn it, persons!
Tags: fatiguejs
Published: 2021-03-24 16:43:40

Will try to give some context. The thing I'm building is a browser plugin (because the browser is a new OS and you need to be where your clients already are). I expect that users might have a couple of instances running simultaneously in different tabs. Plus, updates might come from the server, as your collection can be edited by someone else.

I'm struggling to make sense of the JS zoo you people created in 6 short years while I was moving rectangles in Sketch and Figma!
When I was leaving my IDE and magnetic keyboard behind, I was thinking: "jeez, this `webpack` thing makes me want to lick post stamp for leaving, I'm outa here!".

And now I do not even know where to start my 'nmp', 'yarn' or `yank` it all together!

 Library fatigue is settling in on me.

I understand the purpose of GraphQL, it's SQL for cool kids and you do not need to create a gazzilion of endpoints. Then I need to have something on the backend. I think I can get away with JSON file in azure storage and call it a day. One file per user, yank it to the client-side on first request, and then update as needed. I'm not expecting it to be huge. Later I will figure out something more sophisticated, cos I want to have a change history so that users could roll back the changes. Can I do that with GraphQL? Btw, who should deal with auth?

Then I need something to consume, as one might say, that GraphQL API. `Rxdb` looks promising, tick a lot of boxes, but then 'React Query' shows its face in my browser and is like 'hey kid, wanna read this 42 articles'.

How do you decide on libs, bruh?

I'm not looking for a 'batteries included' solution, that would be nice though. I can deal with some 'assembly required', but boy this is a lot!

Does anyone have a solution? People? Anyone? 

Help, I need help.
What Is Your Aha Moment With React
Tags: discuss, react, webdev
Published: 2021-03-24 16:39:06

My early days with React were... difficult. 

Things didn't go straight. So many bumps and new concepts. It was slow to grasp Redux, rendering and class components.

Partly because I was so used to OOP in JavaScript, partly due to the new component UI patterns, I have to admit the whole journey was full of surprises and not easy. 

`Hooks` didn't make things easier, either.

🙀 **What is your latest React Aha moment?**
A Computer Virus and Impostor Syndrome
Tags: career, programming
Published: 2021-03-24 22:04:51

---
title: A Computer Virus and Impostor Syndrome
published: true
date: 2021-03-24 16:38:42 UTC
tags: Career,Programming,career,programming
canonical_url: https://davidtruxall.com/a-computer-virus-and-impostor-syndrome/
---

2020 was the 20th anniversary of the Love Letter/Love Bug (ILOVEYOU) virus. If you’ve never heard of it, [Sophos posted a good summary](https://nakedsecurity.sophos.com/2020/05/04/iloveyou-the-love-bug-virus-20-years-on-could-it-happen-again/). I was working at a New Horizons in my first job as a web developer. When it hit, I happened to be in the office of one of the IT admins. We were talking, then he looks at his screen and asks: “Why would Gary send me an email saying he loves me?”. Another similar message arrived from someone else. Then another. I saw the light bulb go off in his head. He bolted out of his chair, ran down the hall to the server room and powered off the Exchange server. The virus was in the system for only a couple minutes and had spread to around 120 accounts. This was the first time I saw disaster recovery in action.

For me, the most interesting moment arrived after the fact, when I got a printout of the virus code. It was written in Visual Basic for Applications (VBA). This was the same programming language I was using in my job. I was creating an intranet using Active Server Pages ([Classic ASP](https://www.bisend.com/blog/what-is-classic-asp)) which used VBA. I had also been writing Word and Excel macros to automate some company processes. When I looked at the printout, I thought to myself: “I could have written that!”. I didn’t want to write a virus, but I knew enough VBA to understand the code. It was a validating moment for me as a programmer. Someone else’s code that had done so much (even though it was damaging) was understandable to me. At that time I frequently read [Dr. Dobb’s Journal](https://en.wikipedia.org/wiki/Dr._Dobb%27s_Journal) and those articles filled me with impostor syndrome, the programming discussed in those articles was mostly over my head. The virus code was a turning point for me.

Every programmer starts like this, impostor syndrome creeps around the corner frequently. There is so much to know and understand and it feels overwhelming at times. I’ve always referred to it as “[drinking from the firehose](https://idioms.thefreedictionary.com/drink+from+a+fire+hose)“. Know that it gets better over time. At some point I realized I was understanding the articles in Dr. Dobbs. That didn’t happen overnight, but I did put in the work to get there. I hope your validating moment arrives, and know that I am rooting for you.
Welcome Thread - v117
Tags: welcome
Published: 2021-03-24 16:33:39

---
title: Welcome Thread - v117
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Alien saying "Greetings"](https://media.giphy.com/media/l378nv5qEQq7gHli8/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Gutenberg Block Patterns und WordPress Starter Templates
Tags: wordpress, astra, code, functionsphp
Published: 2021-03-26 11:44:37

---
title: Gutenberg Block Patterns und WordPress Starter Templates
published: true
date: 2021-03-24 16:30:23 UTC
tags: Wordpress,astra,code,functionsphp
canonical_url: https://j0e.org/block-patterns/
---

![Gutenberg Block Patterns](https://j0e.org/wp-content/uploads/2021/03/gutenberg-block-patterns.png)

 Wenn es um das Erstellen und bauen von Websites geht, dann ist WordPress eines der …

[Gutenberg Block Patterns und WordPress Starter Templates](https://j0e.org/block-patterns/)
How to Deploy Nuxt.js to China?
Tags: nuxt, vue, webdev, china
Published: 2021-03-24 16:23:11

---
canonical_url: https://www.21cloudbox.com/solutions/how-to-deploy-nuxtjs-project-in-production-server.html
---
# What is Nuxt.js?

Nuxt.js is a lightweight application framework based on [Vue.js](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-vuejs-project-in-production-server.html). It can be used to create server-side rendering  (SSR) applications.  It can also act as a static site generator (SSG) to generate static applications with features such as elegant code structure layering and hot loading

21YunBox provides a very simple Nuxt.js deployment method. You can deploy with 21YunBox in a **static site** environment or a **Node** environment.

# How to Deploy Nuxt.js?

1. Register as [21YunBox member](https://www.21yunbox.com/u/signup/)
1. Fork [Nuxt.js example](https://gitee.com/eryiyunbox-examples/hello-nuxtjs) on Gitee
2. Create a **Cloud Service** on 21YunBox, and allow 21YunBox to access your code base
3. Create with the following configuration


| Environment       | `Static Site`            |
| ----------------- | :-------------:             |
| Build command     | **`yarn && yarn generate`** |
| Release Directory | **`./dist`**                |


If you'd like a step by step example, please refer to the [original post](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-nuxtjs-project-in-production-server.html).

<br>
<br>
# Why Choose 21YunBox?

> 21YunBox is a Cloud Service Platform based out of Beijing, China. We specialize in modern web hosting and automation solutions. This enables you to set up websites instantly.  

> **Have questions about hosting and deploying in China? Let us know, we are happy to help!** <21YunBox@gmail.com> 

To learn about the differences between 21YunBox and these foreign (outside of China) cloud service platforms, please refer to:

* [21YunBox vs Heroku](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-heroku-in-china.html)
* [21YunBox vs Netlify](https://launch-in-china.21yunbox.com/blog/solutions/alternatives-to-netlify-in-china.html)
* [21YunBox vs Vercel](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-vercel-in-china.html)
* [21YunBox vs Gatsby Cloud](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-gatsby-cloud-in-china.html)
* [21YunBox vs Github Pages](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-github-pages-in-china.html)
* [21YunBox vs Surge.sh](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-surgesh-in-china.html)
* [Compare in terms of function and price: 21YunBox vs Heroku, Netlify, Vercel](https://www.21yunbox.com/compare-others/)

<br>
*This article's content originated [here](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-nuxtjs-project-in-production-server.html)*

*For additional detail and future modifications, refer the original post.*
Tomcat - Deixando a lista de aplicações mais organizada.  
Tags: tomcat
Published: 2021-03-24 16:22:40

Para deixar a lista de aplicações do Tomcat mais organizada e padronizada sugiro que seja informada a versão da aplicação e o nome dela.

##Nome de exibição (display-name):
Dentro da pasta WEB-INF, do projeto, criar um arquivo com o nome **web.xml**  e dentro especificar a **display-name**.

`<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app 
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 
    "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <display-name>My App</display-name>
</web-app>`

##Versão (version):
Para isso antes de dar o deploy no arquivo war, deve ser colocado o número da versão depois do nome da aplicação e antes do .war, myapp##versao.war

Exemplo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/870m2b3s4uv1ux781rmx.png)

##Resultado final

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09ki3yd7vbvjzzj0nk5j.png)


##Referências

[web.xml Deployment Descriptor Elements](https://docs.oracle.com/cd/E13222_01/wls/docs81/webapp/web_xml.html#1013555)

[Apache Tomcat 9 Configuration Reference](http://tomcat.apache.org/tomcat-9.0-doc/config/context.html#Naming)
Engineer more than software
Tags: career, hiring, inclusion
Published: 2021-03-24 16:16:27

Salesforce engineers are builders. Together, we’ve created a platform that helps companies around the world connect with their customers. Driven by our commitment to trust, equality, and innovation, we’re contributing to a more collaborative and inclusive world. Learn more at [salesforce.com/tech] (http://salesforce.com/tech).

{% youtube ioinFHta938 %}
Shoelace Style: Left Side Navigation Bar
Tags: webdev, codenewbie, codereview, uiweekly
Published: 2021-03-24 16:10:51

The left side is mostly used in the admin panel or any product base website has to use. So here we made the left side navigation bar using Shoelace Style CSS frameworks.

In this element, we used a shoelace-style drawer component with a menu and icons. To make it more attractive we modify HTML attributes that are used in this framework with CSS properties. This is fully responsive left-side navigation with mobile-friendly.

[Source Code](https://w3hubs.com/shoelace-style-left-side-navigation-bar/)
Why Choose Digital Printing
Published: 2021-03-24 15:53:06

There are some tips that a customer must know before sending the artwork to online printing companies and avoiding extra delay in printing.

1. Preparing your artwork: Most people design artwork in the finished format and always forget to add bleed to the design. Printers need a min of 3mm bleed around the artwork always to trim the job and cut it. So while designing your artwork always keeps in mind to add bleed around the artwork, say for example if you are designing an A5 flyer (148mm X 210mm) finish size, then the final size you design must be (154mm X 216mm). Do not add a white bleed around the artwork, for a good finish always extends your artwork background as bleed to avoid white marks after trimming.

2. Correct colours: Most people who use Photoshop for design have RGB colours by default, this is OK for digital printers, but when you are printer Dublin litho, all colours need to be converted to CMYK. Otherwise, you will see a huge difference in colours after printing. So make sure that all the colours are in CMYK before you send it to printers for printing. In this way, you will get what you see in pdf.

3. Putting incorrect format: After you finished with your artwork, you can save and send that to a printing company in that format, but most companies accept print-ready pdf. So no matter which tools you used for design, save the artwork in pdf from saving as an option. If you have 2 or more pages for one printing, try to put those in one pdf file. So one pdf for each order.

4. Checking printing time: Before you place the order be sure to check the delivery time of your printed material because some time companies show less printing time in promotions and actual time may vary, You may not be able to get your products on time if you did not check the delivery time properly. This is one of the most important factors in choosing an online printing company. So you must take care of the delivery time.

Conclusion:

With the above small things, you can create your artwork incorrect type and size and can avoid the delay in printing. It is very important that you send the artwork in the correct format to a printing company and this will allow them to process your order on the first go.

www.bannerprinting.ie
Day 85 Of 100DaysOfCode: Supervised Learning with scikit-learn
Tags: codenewbie, womenintech, 100daysofcode, beginners
Published: 2021-03-24 15:50:14

This is my 85th day of #100daysofcode and #python learning journey. Talking about today's progress some times I studied about python virtual environment. And keep learning from datacamp. Today I learned from datacamp about machine learning, supervised learning, unsupervised learning and rainforcement learning.
I gave some time for my project.
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 85 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Supervised Learning with scikit-learn from [Datacamp](<a href="https://t.co/nPDNEXu6aM">https://t.co/nPDNEXu6aM</a>)<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/jb8bySO9TE">pic.twitter.com/jb8bySO9TE</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1374747674965012486?ref_src=twsrc%5Etfw">March 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>