teleren/devto huggingface dataset:
Make & Deploy Doxygen
Tags: actionshackathon21, devops, doxygen, deploy
Published: 2021-12-07 17:45:57

Using this Workflow file you can deploy your **[Doxygen](https://www.doxygen.nl/index.html)** docs to GitHub pages _(in this example)_

I have created this Workflow for [MetaCall/landing-page](https://github.com/metacall/landing-page) to deploy their landing page.

They are using `Docsify` also for documentation, so that part is also getting deployed using the same workflow file.


### My Workflow

[Make & Deploy doxygen.yml](https://github.com/metacall/landing-page/blob/master/.github/workflows/make_doxygen.yml)



### Submission Category: 

DIY Deployments


### Yaml File



{% gist https://gist.github.com/Siddhant-K-code/05f06eaa478d11627c6b9253bc0d2996 %}

### Additional Resources / Info

We Are using at [MetaCall](https://github.com/metacall)'s Landing Page

{% github metacall/landing-page %}

[Live Demo Preview - metacall.io](https://core.metacall.io/api/html/index.html)
Day 83/100 Visual Rules
Tags: 100daysofcode, css, programming, motivation
Published: 2021-12-07 17:33:17

Specific rules need to be considered to achieve the appropriate style of the HTML structure and emphasis the value of each practice as an essential detail.

![banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzk7nx689cr2edd7njmn.png)

## The Concept

- The `font-family` property defines the typeface of an element.
- `font-size` controls the size of text displayed.
- `font-weight` defines how thin or thick text is displayed.
- The `text-align` property places text in the left, right, or center of its parent container.
- Text can have two different color attributes: `color` and `background-color`. `color` defines the color of the text, while `background-color` defines the color behind the text.
- CSS can make an element transparent with the `opacity` property.
- CSS can also set the background of an element to an image with the `background-image` property.
- The `!important` flag will override any style, however it should almost never be used, as it is extremely difficult to override.

## Code Snippets

```
.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}
```

## a11y myths
**Making a website accessible is costly and time-consuming**

> It may not be the case if accessibility is considered from the beginning of the project and a development team has proper skills. When accessibility has become a habit, the development time doesn't change or changes a little. 

[![Resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pifz2eyp15xchxat1nb7.png)](https://www.internetingishard.com/)
Workflows diagram
Tags: webextension, actionshackathon, github, devops
Published: 2021-12-07 17:30:23

# High level overview

In this part we will observe the high level architecture of the solution: the proposed workflows and the order in that they are called. We will also find duplicated steps and extract them to the composite actions.

## Workflows and events

Let's take a look at the vertical Ghant diagram of the pipeline triggered by pushing a tag.


![Vertical Ghant diagram](https://cardinalby.github.io/blog/images/posts/github-actions/webext/workflows-ghant-vertical.png)

- The main _**publish-release-on-tag**_ workflow is triggered when a user pushes a tag.
- It triggers _**build-assets-on-release**_ implicitly by creating a release.
- The main workflow also explicitly triggers (emitting `workflow_dispatch`) event 2 other workflows responsible for publishing an extension on different stores.

Important thing here is that all of these workflows can be triggered by user directly, without triggering the main workflow. Because of that I have added additional checks to them:

- _**build-assets-on-release**_ is triggered when a user publishes a new release (it can not have a _zip_ asset).
- _**publish-on-chrome-webstore**_ and _**publish-on-firefox-addons**_ can be triggered manually using `workflow_dispatch` event on any branch or tag that don't have a release.

Apart from this, we are going to create one more workflow that will build and test an extension on pushes to branches and on Pull Requests creation:

![Build and test workflow](https://cardinalby.github.io/blog/images/posts/github-actions/webext/build-and-test-workflow.png)

Separating the whole pipeline into workflows:

- Prevents us from creating a monster workflow file.
- [Avoids code duplication](https://cardinalby.github.io/blog/post/github-actions/dry-reusing-code-in-github-actions.md)
- Allows the separated workflows to be triggered, cancelled or repeated independently and executed in parallel.

## Composite actions

In terms of code duplication, we can do better. Look at the steps marked in green and to the duplicated grey block of the "publishing" workflows. We are going to extract them to the [Composite Actions](https://docs.github.com/en/actions/creating-actions/creating-a-composite-action) that will be placed locally in the same repository:


![Extracted composite actions](https://cardinalby.github.io/blog/images/posts/github-actions/webext/composite-actions.png)

From the workflows's point of view they are usual actions that use a runner's filesystem and a workflow context. You can also notice that one composite action can use another composite action as its step.

### Env constants

One more composite action that is absent on the diagram but should be called at the beginning of each job is the one that:
1. Calls `actions/checkout` to check out the repo.
2. Exports env variables from `constants.env` file to the job runner context.

## To be continued

In the following parts we will follow the "bottom-up"  approach and will implement workflows and composite actions shown on the diagram one by one.
Cloud data warehouse architectures
Tags: datawarehouse, architecture, etl, learn
Published: 2021-12-07 17:02:41

## Kimball's Bus Architecture
![sketch kimball's bus architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36fa8go75m2n0ykbi14l.jpg)
- Results in a common dimension data model, that is shared by different departments.
- The data is not kept at the aggregated level, but rather at the atomic level
- Organised by business processes and used by different departments


## Independent Data Marts
![sketch independent data marts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sagg2deljdl73pv2lwuy.jpg)
- Departments have independent ETL processes and dimensional models, called "Data Marts".
- Different fact tables for the same events, no conformed dimensions.
- Uncoordinated efforts can lead to inconsistent views.
- ETL processes designed by specific business departments for their needs. This might by faster, but with the downside of inconsistency

__As independent data marts are uncoordinated and inconsistent it is not encouraged to use them.__

## CIF - Inmon's Corporate Information Factory
![sketch corporate information factory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grmucf3q83kk7x3c6gv5.jpg)
- Data marts have the same baseline.
- Data marts are dimensionally modelled, mostly aggregated
- The users can get data from the data marts or the 3rd Normalform database
- There are 2 ETL process done
-- source systems -> 3 Normalform database
-- 3 Normalform database -> Department data marts
- The 3 NF DB is the enterprise wide data store


## Hybrid Bus & CIF
![sketch hybrid bus and cif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akivy6casq9e4zysqqoo.jpg)
- uses the 3 Normalform database like in CIF
- uses conform dimensions like in Kimball's bus architecture
Comparing Previous useEffect Values in React
Tags: javascript, react, hooks, useeffect
Published: 2021-12-07 16:55:43

---
title: Comparing Previous useEffect Values in React
published: true
description: The usePreviousValue hook is a pattern for responding to prop changes within React functional components.
tags: javascript,react,hooks,useeffect
//cover_image: https://direct_url_to_image.jpg
---

With functional components now being the standard in React, we lost one notable perk of using the lifecycle hooks (such as `componentDidUpdate()`) of class-based components: the intrinsic ability to compare previous values to new ones. 

If I wanted to respond to a component's "count" change for example, I could do something like: 

```js
componentDidUpdate(prevProps, prevState) {
  if (this.props.count > prevProps.count) {
    // Count incremented! Do something.
  }
}
```

I came across the need to do this while working on [Emoji Battle](https://github.com/mcavaliere/emoji-battle) yesterday—I wanted to show an animation anytime an emoji's vote count incremented. 

Luckily [Stack Overflow had a great solution](https://stackoverflow.com/a/57706747) as usual, which I turned into a hook I'll probably reuse in the future. 

Basically you create a very simple custom hook that uses a React ref to track the previous value, and refer to it in the useEffect. 

```js
function usePreviousValue(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}
```

Based on this, I used it to increment my Emoji counter as follows: 

```js
export const Count = ({ value }) => {
  const controls = useAnimation();
  const previousValue = usePreviousValue(value);

  useEffect(() => {
    if (!previousValue || value > previousValue) {

      // Trigger the framer-motion animation
      controls.start({
        scale: [1, 1.5, 1],
        transition: {
          duration: 0.5,
        },
      });
    }
  }, [value]);
```

Try this `usePreviousValue` hook out next time you need to track value changes in React functional components.
Resume review thread
Tags: career, discuss
Published: 2021-12-07 16:11:42

👋 Hey everyone! I'm Sagar, Full Stack engineer based in Singapore. I've been working in the software / web development industry for almost 7 years now.

I've been part of a number of interviews both as an interviewer and interviewee. I would like to give back to the community by reviewing and giving feedback for your resume / portfolio. Feel free to drop links to your resumes in the comments 👇
Aquila Network 1.0 is released 🥳 
Tags: news, newrelic, productivity, opensource
Published: 2021-12-07 15:58:20


![Aquila Network v1.0 released](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl9g96puekec89y3b1wa.png)

Releasing the batteries included version of Aquila Network — a semantic text search engine. Available as Open Source as well as managed service.

Read more about this release here: https://medium.com/aquila-network/aquila-network-1-0-0-beta-released-7ef9afb451b0

thanks.
Accountant to Software Enginner
Published: 2021-12-07 15:55:57

Hi, Everyone. I am new to this community and very happy to be here. I am a chartered accountant turned Software Engineer. Looking for mentors and Accountability partners. Currently taking a diploma in Computer Programming and also learning advanced React concepts. Very vast in HTML,CSS,javaScript and a bit of Java. Looking to land my first job in web development. My portfolio is still in the development stage. Overall, very happy to be here. For anyone that wants to connect my email is opyjocodes@gmail.com
Launched BotMeNot Beta - Looking for Beta Users! 
Tags: discuss, testing, security, javascript
Published: 2021-12-07 15:44:24

I'm extremely excited to announce that my latest project - BotMeNot - is finally live in the beta version!

After spending so much time on the development and promotion it's finally here! It's very difficult for me to hold in my excitement!

If you're interested, check out [this link](https://gui.botmenot.com/registration) - and let me know what you think!

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

What I've prepared for the beta testers is a gift of 100 free credits to run any type of test you desire. Currently, there are three types - Starter, Light, and Smart!

Also, if you have any questions - feel free to ask!
Design systems supercharged 
Tags: front, dev, design, tooling
Published: 2021-12-07 15:39:31

Building great front-end products is hard and time-consuming. 

Web technologies are evolving at high pace, designers and developers struggle to collaborate on handover, building consistent web components requires loads of works, documentation is too often not up-to-date, maintaining apps over time is an Herculean task, ... 

You know the story.

Implementing a Design System is a good solution to tackle these challenges. The Design System is the source of truth for all reusable tokens and components to be consumed in web apps. Building and managing a Design System, as a part of a production pipeline, will greatly improve team efficiency and product consistency. 

A good Design System should help teams collaborate, improve reusability, manage technologies evolution, build documentation, ship faster / better, and lower maintenance. But building and maintaining the tooling to manage a Design System remains quite time consuming too ... 

That's why we launched [Backlight.dev](https://backlight.dev/), a powerful and collaborative platform to build Design Systems on the code side. Backlight helps front-end teams to deliver value by focusing on their real work, not on maintaining tools. 

Backlight comes with some nice features : 

- All-in-one : tokens, components, code, stories, tests, documentation, designs, ...
- Technologies / frameworks agnostic
- Real-time preview rendering for tokens, components and documentation
- Real-time and asynchronous collaboration
- Live documentation (MDX with embedded components and code snippets)
- Versioning and repo management with Github / Gitlab / Bitbucket
- Code review and visual diff for Pull-Request
- NPM package export
- In browser or local CLI
- No tools or pipeline to deploy / manage

And best of all, we have a free plan to test Backlight. 

Let's give it a try ? :) [Start now](https://backlight.dev/)

Front-end is for heroes. At [‹div›RIOTS](https://divriots.com/), we believe front-end is a beautiful challenge and we are on a mission to empower front-end teams with great tools. Backlight is one of them. We also launched some free sandbox products to play with web components and tokens ([check them out here](https://divriots.com/#what-we-do)).
Translation Helper
Tags: actionshackathon21
Published: 2021-12-07 15:35:52

Hey there ! For the the #ActionsHackathon21 I created something... 

**Translation Helper**

### My Workflow
Please see the official Translation Helper repository for the latest instructions on using translation-helper!

[My Project](https://github.com/RushanNotOfficial/translation-helper/)

### Submission Category: 

Wacky Wildcard


### Link to Code

https://github.com/RushanNotOfficial/translation-helper


Please comment down below if it's proper cuz I'm a first timer to such stuff.
Crack REST API Interview 
Tags: career, interview, beginners
Published: 2021-12-07 15:23:22

As a user interface helps us to communicate with computers and applications, an application program interface ([API](https://www.mulesoft.com/resources/api/what-is-an-api)) helps computers and software applications to communicate with each other. This article will assist you in understanding what an API is and some commonly-asked REST API interview questions. So, let us begin with a quick introduction to API.

![REST API Interview Questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rbqjnu1b2p33p4e7kfc.png)

List of [REST API Interview Questions](https://www.techgeekbuzz.com/best-rest-api-interview-questions-and-answers/):

1. Explain REST and RESTful.
2. Define a REST Resource.
3. Explain the term URI.
4. Explain the features of RESTful Web Services.
5. Explain the term ‘statelessness’ in the REST protocol
6. State and describe different HTTP Status Codes.
7. Explain Options in the REST architecture.
8. State and explain HTTP methods.
9. Are there any drawbacks of RESTful Web Services? If yes, state them.
10. Explain the concept of ‘Messaging’ in RESTful Web Services.
11. Explain the variation between the POST and PUT HTTP Methods.
12. What are the dissimilarities between SOAP and REST protocols?
13. List out some best practices to create URI for RESTful Web Services.
14. List out the best practices for designing a resource format.
15. State some dissimilarities between REST and AJAX.
16. List and describe the HTTP Request’s core components.
17. Explain different components of HTTP Response.
18. Explain and define Addressing in the context of REST.
19. State pros and cons of Statelessness.
20. State limitations for RESTful Web Services.
21. Explain caching.
22. Define Payload.
23. Is there any restriction on the payload size sent via the POST method?
24. Can we send payload using GET and DELETE HTTP methods?
25. Explain idempotent and safe HTTP methods.

## Conclusion

REST is one of the effectively versatile and solid designs utilized for developing APIs. It is exceptionally adaptable due to the partition between the REST server and the REST client. Furthermore, web services developed utilizing the REST design are of incredible interest today. In this manner, the interest for REST API developers is expanding as needs be.
How To Make A Random Greeting Giver In Python
Tags: beginners, python, programming, tutorial
Published: 2021-12-07 14:55:50

In this little project, I will show you how to make random greeting giver! You input a name, and it gives you a random greeting, and well-wishes you!

This article will include:
- Random Module
- Lists
- Variables 
- And Functions

Let's get coding then!

### Random Module
For this, we will need the `random` module. It allows us to make a random pick. You need to import it by writing:
```Python
import random
```
The Random module has been imported!

### Making A List
Now we make two lists, one for greeting them and one for well-wishing them.
#### List For Greeting
```Python
greeting = ['Hello', 'Sup', 'Howdy', 'Hi', 'Hola', 'Greetings', 'Namaste']
```
#### List For Well-Wishing
```Python
hope = ["Hope you're having a great week!", "Hope you're having a great day!", "Hope you're doing well!", "Hope you're doing good!"]
```
### Making An Input
Now we make an input for the user to enter their name.
```Python
name = input("> What's your name? ")
```
### Calling The Random Module
Now we use `random.choice`, which as it sounds makes a random choice. There will be two of them, one for the greeting and one for a well-wish.
#### For The Greeting
```Python
value = random.choice(greeting)
```
#### For The Well-Wish
```Python
value2 = random.choice(hope)
```
### Creating A Function
Now we create a function. This will greet the user!
```Python
def greet_user():
    print('❯ ' + value + ', ' + name + '! ')
    print('❯' + value2)
```
### Finally...
...we call the function!
```Python
greet_user()
```
---
That's it, you have successfully created a Random Greeting Giver!
Here's the final product: 
![Finished Product](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvvh1euel92xi45kft5q.png)
Greetings For You!
Tags: actionshackathon21, javascript, github, node
Published: 2021-12-05 07:30:39

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[MY REPOSITORY](https://github.com/Ratheshan03/My-JS-Action) 
My-JS-Action
- README [File](https://github.com/Ratheshan03/My-JS-Action#readme)
- Licensed by [MIT](https://github.com/Ratheshan03/My-JS-Action/blob/main/LICENSE)

Throughout the entire hackathon process I learned quite a new things and improved my knowledge on how effective GITHUB Actions is. Within this submission I created my own greeting workflow which greets me whenever it triggers on making a new pull request or commit!

## Snippet of my workflow

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

#### Snippet of the recent workflow triggered events

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

### Submission Category: 
Wacky Wildcards


### Yaml File or Link to Code

`{% https://github.com/Ratheshan03/My-JS-Action/blob/main/action.yml %}`


#### Additional Info
Hi there! I'm Ratheshan Sathiyamoorthy, a second year undergraduate pursuing BSc Computer Science and this is my first time trying out GITHUB Actions. 

Over the days of learning GITHUB Actions, On my point of view,  GitHub Actions is a tool that allows to reduce the chain of actions necessary for the execution of code, by creating a workflow responsible for the Pipeline. Being configurable for GitHub to react to certain events automatically according to our preferences.

Further, after getting knowing the fundamentals of GITHUB Actions now I would like to explore on this field of automating our workflows and getting curious to create more robust, useful and effective GitHub action workflows for my day today work as well for the community. 

Thankyou DEV COMMUNITY AND GITHUB for organizing ActionsHackathon2021.    


### Additional Resources

For the starters who getting started with GitHub actions try these documentations and links
References:
-[OFFICIAL DOCUMENTATION](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions)
-[Features](https://github.com/features/actions)
-[BLOG POSTS](https://github.blog/2019-08-08-github-actions-now-supports-ci-cd/)

Happy Coding :)
3 Html Tags You Need to Know About
Tags: html, webdev, beginners
Published: 2021-12-07 14:53:41

Every webpage is built off of HTML. Even if it's appended to the DOM, without this code, we've got nothing to show on our page. Every developer needs to understand HTML, at least at a basic level. Yet, most of us aren't utilizing all of the tools available to us.

"But Aidan, how much else could there be to learn? This is such a basic language!"

Well, sort of. If you've worked with HTML in the past, you know of the basic tag types:
- Headers (h1, h2, etc.)
- Paragraphs <p>
- Divs <div>
- Inputs <input>
and so on. There are some other amazing options we have too, though, to make our lives so much easier. Let's take a look at them.

#3 HTML Tags You Need to Know about#

##Details##
 
We're gonna start out with my personal favorite. If you're looking for a real quick way to hide and show some information throw the <Details> tag in there and watch the magic happen!
![Closed Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bme91b9x0f0jpbsr28mc.png)
Then...
![Open Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0go2g4l8oiyig8ur70kn.png)

Tip: Use in conjunction with the <summary> tag for some extra customization.

##Different Input Types##
  
Need to let the user pick a color for their profile? How about set a date-time, or from a range of numbers? You can use the "type" attribute to give your user a bunch of different options.

![Input Types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knzcvpgf5knjj7mik39b.png)

##Datalist & Option##
 
 A great way to give your user some autocompleted options is by using the <datalist> and <option> tags in conjunction with your input! Here's an example using some common icecream flavors:

![Datalist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5442tuoqyuwofiqsjgs.png)

![Autocompleting datalist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwzr0tx962bdaxu3pr4i.png)

One thing to note here is that you will need to make sure that your datalist id matches the "list" attribute of your input, so the types sync up. Here's the code used for the above example: 

```
 <label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
```