teleren/devto huggingface dataset:
How to roll back a Dokku deployment
Tags: tutorial, beginners, docker
Published: 2021-07-25 08:50:03

<!--
Title: How to rollback a Dokku deployment
Tags: tutorial, beginners,
-->

# Introduction

Sometimes you end up deploying an application to Dokku and then realize that you want to revert the changes you made.

In this tutorial we'll go over how to roll back a Dokku deployment.

---

## Before we start

### Preface

Keep in mind that rolling back a deployment is a dangerous operation, proceed with caution.

### Requirements

- Dokku server

Don't have a Dokku server?
Check out my [Dokku tutorial](https://blog.akbal.dev/create-your-own-heroku-with-dokku-on-digitalocean).

---

### Get the commit hash

First well need to get the hash of the commit that we want to roll back to.

To accomplish that, list out the last 10 commits that have been made to the repository.

```bash
git log --pretty=format:"%h - %s" -10
```

You will get an output similar to this:

```bash
3cacb03 - Revert "build: broaden possible purged files"
25e3b2b - chore: move node dependency to dev dependencies
6a42416 - Revert "ci: run npm "build" script in predeploy stage"
0b53fdd - ci: execute php buildpack first
2d27d60 - ci: run npm "build" script in predeploy stage
1bc1276 - build: broaden possible purged files
1bed300 - style: lint
5ab255c - Revert "build: only run tailwind JIT mode on local"
23b0c4b - build: fix data-tables styles getting purged
52ca32e - ci: move scripts back to app.json
```

Now copy the hash of the commit that you want to roll back to.
For example `2d27d60`.

---

## How to rollback

Now that we have the commit hash, we can roll back to it.

Just force push to Dokku with the commit hash, instead of the local branch.

```bash
# git push --force <remote> <local branch>:<remote branch>
git push --force dokku de7fc85:master
```

**That is it!**
Now Dokku will build the application from that commit.
Effectively rolling back to that commit.

---

## End

That was easy, wasn't it?

<!-- INCLUDE -->

### Self-promotion

If you have found this useful, then you should follow me, I will be posting more interesting content! 🥰

- [GitHub](https://redirect.akbal.dev/github)
- [Twitter](https://redirect.akbal.dev/twitter)
- [Dev.to](https://redirect.akbal.dev/dev.to)

Or support me financially. 💸

- [GitHub Sponsors](https://redirect.akbal.dev/github/sponsor)
- [LiberaPay](https://redirect.akbal.dev/liberapay)
- [PayPal](https://redirect.akbal.dev/paypal)

<!-- /INCLUDE -->

### Conclusion

Congratulations, today you have learned how to roll back a Dokku deployment.

**Let me know if the tutorial was useful to you in the comments!**
Get desktop apps like Whatsapp, Notion on linux
Tags: linux, programming, productivity
Published: 2021-07-25 07:51:05

It's sad that Notion and Whatsapp dont have desktop apps like linux. I use them a lot and having separate apps for them is definitely a plus.

There are workarounds which package these apps and make em work on Linux, but then updating them is a headache.

When trying to find a solution, luckily I came across [this answer](https://askubuntu.com/a/1307613) which solved all of my problems.

# Steps
1. Make sure you have a chromium based browser
2. Go ahead and make a desktop file
2.1 `vim ~/.local/share/applications/whatsapp.desktop`
3. Copy and paste the configuration below
```
#!/usr/bin/env xdg-open
[Desktop Entry]
Name=WhatsApp
GenericName=WhatsApp
Comment=WhatsApp desktop webapp
Exec=/usr/bin/google-chrome-stable --app=https://web.whatsapp.com/
Terminal=false
Type=Application
StartupNotify=true
MimeType=text/plain;
Categories=Network;Application;
Keywords=WhatsApp;webapp;
X-Ubuntu-Gettext-Domain=WhatsApp
StartupWMClass=web.whatsapp.com
```
3. Just make sure the Exec section has the chromium based browser you use. For vivaldi it was `/usr/bin/vivaldi-stable` for me. To find the path, just type `which chrome` in your terminal.
4. Save it and that's it! Just

Here's the Notion desktop file I use
```
#!/usr/bin/env xdg-open
[Desktop Entry]
Name=Notion
GenericName=Notion
Comment=Notion desktop webapp
Exec=/usr/bin/vivaldi-stable --app=https://www.notion.so
Terminal=false
Type=Application
StartupNotify=true
MimeType=text/plain;
Categories=Network;Application;
Keywords=Notion;webapp;
X-Ubuntu-Gettext-Domain=WhatsApp
StartupWMClass=notion.so
```
How to use Tailwind CSS in Astro
Tags: astro, tailwindcss
Published: 2021-07-25 07:35:13

To be honest, it's never been easier to include Tailwind CSS in a framework.

Why? Astro has [build in support for Tailwind](https://docs.astro.build/guides/styling#-tailwind)! 🥳
And yes, even the [Tailwind JIT compiler](https://daily-dev-tips.com/posts/why-tailwind-jit-compiler-is-amazing/).

I'll write down this quick guide to get you started setting up Tailwind CSS in an Astro project.

## Installing Tailwind CSS in an Astro project

Let's start with a basic Astro project.

```bash
mkdir astro-tailwind && cd astro-tailwind
npm init astro
```

You can choose any of the templates. It doesn't matter, actually.

Now let's install Tailwind CSS.

```bash
npm install -D tailwindcss
```

The next step is to create a `tailwind.config.js` file to tell Tailwind which files to purge and enable the JIT compiler.

```js
module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}'],
};
```

Then we can Astro that it should use this Tailwind config file by modifying the `astro.config.js` file and add this to the `devOptions` section.

```js
devOptions: {
  tailwindConfig: './tailwind.config.js';
}
```

Now edit the `global.css` file in the `public/style` directory.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Let's modify our `src/pages/index.astro` to test out how it works.

```html
<div class="bg-gradient-to-br from-indigo-900 to-green-900 min-h-screen overflow-auto">
  <div class="container max-w-5xl mx-auto px-4">
    <div class="w-4/5 mx-auto">
      <h1 class="mt-32 text-white text-6xl font-bold">
        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" /> Welcome to
        <a href="https://astro.build/">Astro</a>
      </h1>
    </div>
    <div class="w-4/5 my-10 mx-auto">
      <h3 class="text-gray-300">
        Build faster websites with less
        <strong class="text-white">client-side Javascript</strong>
        <br />
        This is how easy it is to get started
      </h3>
    </div>
    <div class="w-2/5 mx-auto bg-black text-white p-10 leading-10 rounded-2xl shadow-lg">
      mkdir astro<br />
      cd astro<br />
      npm init astro
    </div>
  </div>
</div>
```

And this results in the following:

![Tailwind starter in Astro](https://cdn.hashnode.com/res/hashnode/image/upload/v1626673864896/iu-ZiwbwcQ.png)

You can also download this project from [GitHub](https://github.com/rebelchris/astro-tailwind).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
#3) Difference between "==" and "===" operators❔
Tags: javascript, beginners, webdev, career
Published: 2021-07-25 06:44:01

#==(*Equality*)
✔Used for comparing two variables and ignoring the data type of variable.

✔Returns true only if the two operands are equal and false for not equal.

#===(*Strict Equality*)
✔Used for comparing two variables but also checks the data type and compares the two values.

✔Returns true only if both the values and data types are same.

__________________________________________________________________
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntuekbfwb05nmlaevg9i.png)
__________________________________________________________________
            🚀Both("==" and "===") are comparison operators.
JavaScript Array Methods Cheat Sheet
Tags: javascript, array, cheatsheet, arraymethods
Published: 2021-07-25 06:43:33

Top popular JavaScript array methods.

## concat()
```javascript
['😉', '👊'].concat('😩')

// Output: (3) ["😉", "👊", "😩"]
```

## join()
```javascript
['👨‍🦳', '👩‍🦳'].join('💘')

// Output: "👨‍🦳💘👩‍🦳"
```

## slice()
```javascript
["😉", "👊", "😩"].slice(2)

// Output: ["😩"]
```

## indexOf()
```javascript
["😜", "👍", "🥶"].indexOf('👍')

// Output: 1
```


## lastIndexOf()
```javascript
["😜", "👍", "👍"].lastIndexOf('👍')

// Output: 2
```

## reverse()
```javascript
["😜", "👍", "🥶"].reverse()

// Output: (3) ["🥶", "👍", "😜"]
```


## sort()
```javascript
["👨", "👴", "👦"].sort()

// Output: (3) ["👦", "👨", "👴"]
```

## shift()
```javascript
["👦", "👨", "👴"].shift()

// Output: (2) ["👨", "👴"]
```



## unshift()
```javascript
["👦", "👨", "👴"].unshift('👩');

// Output: (4) ["👩", "👦", "👨", "👴"]
```

## pop()
```javascript
["👦", "👨", "👴"].pop();

// Output: (2) ["👦", "👨"]
```

## push()
```javascript
["👦", "👨", "👴"].push('🔥');

// Output: (4) ["👦", "👨", "👴", "🔥"]
```

## filter()
```javascript
["👦", "👨", "👴"].filter(person => person == '👨')

// Output: ["👨"]
```

## includes()
```javascript
["👦", "👨", "👴"].includes('👦')

// Output: true
```


Hope this will help you to mess with array.

You can suggest if I missed any thing. Also share suggestion for any other cheat sheet.

> Happy.Code()
#2) Explain Hoisting in JavaScript❓
Tags: javascript, beginners, webdev, career
Published: 2021-07-25 06:00:27

✔Hoisting is a default behavior of JavaScript where all the 
variable and function declarations are moved on top.

This means that irrespective of where the variables and functions are declared, they are moved on top of the scope.

-->The scope can be both local and global.

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

#Note:
✔Variable initializations are not hoisted, only variable declarations are hoisted.

✔Using a let variable before it is declared will result in a ReferenceError.

✔Using a const variable before it is declared, is a SyntaxError.

✔To avoid hoisting, you can run JavaScript in strict mode by using “use strict” on top of the code.

__________________________________________________________________
MongoDB Start with no-indexing
Tags: mongodb, database
Published: 2021-07-25 05:53:44

Using MongoDB?

Ever faced this problem when your app is collecting huge data every day that any moment it may completely fill your storage and leave you with zero bytes.

After that, you can’t even login to the machine to fix the problem.

In your app, you can keep monitoring the free space and delete the old MongoDB data. But.. what if -

You have free space left, and MongoDB is re-building or building indexes and before your app checks again, the free space goes to zero?

But, you’re lucky to observe this before it happens. You go to MongoDB prompt and try to delete the data, but alas, MongoDB is building the indexes on the same collection you want to delete data from.

You won’t be able to do that.

You restart MongoDB hoping it would stop indexing and you would be able to delete.

That, doesn’t work either.

Okay, so you need to do this — start MongoDB with `—-noIndexBuildRetry` flag.

Edit the `/etc/init.d/mongod` file and replace the line —
```
- OPTIONS=" -f $CONFIGFILE"
```
with
```
- OPTIONS=" -f $CONFIGFILE --noIndexBuildRetry"
```
Restart MongoDB after the update. MongoDB will not attempt to fix or rebuild indexes.

Delete what you want from MongoDB prompt. Ensure to keep safe free space considering the indexes size.

Edit the `/etc/init.d/mongod` file again to remove the `--noIndexBuildRetry` and save.

Restart MongoDB.

Did it save your time? Let me know in the comments.

You can follow me on Twitter — @kravigupta. You can also connect on LinkedIn — kravigupta.
JavaScript responsive snake game
Tags: javascript, html, css
Published: 2021-07-25 05:47:56

My first JS game - [https://lnkd.in/gDG9Vhc](https://lnkd.in/gDG9Vhc)

I have always been grinding to do the best side project.Most usefull one for interviews as well. But it takes toll after sometime. Hence, i worked and created something simple and fun.

This is a snake game. I tried to make it as much fun as possible. Please play and let me know. Some of its **highlights** are,

1. Its completely responsive. Work in mobile and web.
2. For mobile mode. i have developed a joystick which can be used for snake navigation. Its custom built and not copied or referenced from anywhere.
3. It has sound effect. Just for fun.
4. Its has humorous descriptions and funny messages.

## Challenges
* **Responsive design** - It was very challenging. I had to adjust canvas based on the size. On top of that i had to adjust the snake size as well. This completely alters calculations.
* **Joystick** - Tried various other ways but joystick was difficult to design as it had to work in all mobile devices.
* **Random food** - Generating a random number between the canvas sizes was also a challenge. But was not very difficult.
What is  Anchor tag ?
Tags: webdev, html, vscode
Published: 2021-07-25 05:09:01

Hello Guy's

I'm back with another post. As mentioned in my previous post that my next post will be on anchor tags. Hope you liked my previous post.

So let's start 👍

Let's take for example that whenever you visit any site it asks you to login. But sometimes it happens that you forget your password. So you click on the forgot password link which redirects you to another page.

Ever wondered how does it happens ??

It is done with the help of anchor tag.

Anchor tag means hyperlink. It is used to link one HTML page to another. 

The main attribute in this element is <b>href</b>. In this <b>href</b> attribute we specify the location of the file. Whenever the user will click on the link, user will be redirected to the page that you have provided in <b>href</b>.

Let's see it practically 👩‍💻👩‍💻

HTML

anchor tag is created by writing just a letter in arrows. The href attribute is placed inside the <b>a tag</b>. You can see the code below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j6mjr734tzvvtmvcclq.PNG)

Your hyperlink will be seen like this :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f41fsp0z1jz0neag0o98.PNG)

Now in the Above HTML code you might have noticed that I have written "#" in href attribute. this means that hyperlink will be created but will not redirect to any link. 

It's time to add a file in href attribute.

Now there are multiple ways to give location. Select the file that you want to give in href and press right click copy the entire file location. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyuj8mdoq67ewxxlwxuu.gif)

Now just paste the file location in href attribute.

Second method: If you have multiple files or folder in your project just write "./" in href attribute and you can see the files and folder. Just select it. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/995arqdiubk8aep7g1li.gif)

Now when you click on the hyperlink it redirect user to the new page that you gave in href. 

You can see the output below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oktj13escsk9fkt40gyo.gif)

So here how you can create a hyperlink in your page. 

Give it try in your navbar. Just create some pages and place the file locations in href. 

If you don't know how to create navbar have a look on my previous post. 

See you in next post. 

Happy Coding 👩‍💻👩‍💻👩‍💻
AWS Systems Manager Patch Manager
Tags: aws, cloud, programming
Published: 2021-07-25 05:06:59

Are you looking to automate the task of patching for your Linux and windows as well as on-premises system and application?

Patch Manager, a capability of AWS Systems Manager, automates the process of patching managed instances with both security-related and other types of updates. You can use Patch Manager to apply patches for both operating systems and applications.

You can use Patch Manager to install Service Packs on Windows instances and perform minor version upgrades on Linux instances. You can patch fleets of Amazon Elastic Compute Cloud (Amazon EC2) instances or your on-premises servers and virtual machines (VMs) by operating system type.

This includes supported versions of Amazon Linux, Amazon Linux 2, CentOS, Debian Server, macOS, Oracle Linux, Red Hat Enterprise Linux (RHEL), SUSE Linux Enterprise Server (SLES), Ubuntu Server, and Windows Server. You can scan instances to see only a report of missing patches, or you can scan and automatically install all missing patches.
Challenges Building React App 
Tags: devjournal, react
Published: 2021-07-25 04:25:39

I’m working on this app that’s in my GitHub repo called pick-name. [Link](https://github.com/vladsolokha/pick-name). 

There are a couple things I'm trying to work through or solve in my code: 

1. I’m trying to create a button that will show or hide all the students in a list in a class section. The list of students are an object property called “studentNames”. 

2. I'm trying to have the array property, "studentNames" be able to modified so that can be used by client to add to student names.

3. Names in the list should be editable. So client can click on a name in the list and edit it. 

It’s seems simple it but for me a bit challenging to wrap my head around. Articles or help pages that I've googled included information about how to do this, but the guides did not include code that used hooks. All the code I saw was written using class and object notation. 

I was deciding to learn the class notation in JS (which I already know) and figure out how the class notation converts to the hook notation used by React so I can implement those ideas into my app. 

I just need to spend some more time reading into these guides. Also, when I add the above features, I need to make sure my codebase stays simple and light and not bulky. I want this app to work quickly and soon.
React refactor code #1
Tags: beginners, react, refactorit, webdev
Published: 2021-07-25 04:09:44

---
series: React refactor code
---
Actual code : 

![Actual code.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627185486988/x5m_BchPQ.png)


Refactor stage 1  (Make larger components in to small by creating small reusable components): 

![Refactor stage 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627185052016/yYhxmWMwo.png)

Refactor stage 2 (Don't use inline functions) : 

![Refactor stage 2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627185165676/Q5tQQ965W.png)

Refactor stage 3 (Give proper naming to components, functions and variables): 

![Refactor stage 3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627185247466/oj4pNHi_v.png)

Refactor stage 4 (Use spread and rest operators when you want pass multiple props to component):
![Refactor stage 4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627185356426/rJfPp-4e7.png)

If you feel this content is useful please share this article and give your reaction.

Thank you!!!

Follow me on

Linkedin : linkedin.com/in/saketh-kowtha

Twitter : twitter.com/sakethkowtha

Github : github.com/saketh-kowtha
Coding Shorts: Changes to Coming to Startup in .NET 6
Tags: net, aspnet, aspnetcore, api
Published: 2021-09-19 20:04:13

---
title: Coding Shorts: Changes to Coming to Startup in .NET 6
published: true
date: 2021-07-25 03:54:59 UTC
tags: NET,ASPNET,ASPNETCore,APIs
canonical_url: http://wildermuth.com/2021/07/25/Coding-Shorts-Coding-Shorts-Changes-to-Coming-to-Startup-in-NET-6
---

.NET 6 is coming soon. Preview 6 just shipped and I've started having fun with the changes in this long-term stable version. To that end, I've created a new "Coding Short" so I could show you how some new features work:

> Top Level Statements

> Global Using Statements

> New Startup Experience (using top-level statements)

> Minimal APIs

There is still time to come before it is released, but so far, it looks very promising. See my thoughts on the Minimal APIs and how that relates to large APIs projects. Watch here:

<iframe src="https://www.youtube.com/embed/SGcpIy1Si54" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

If you like the video, don't forget to subscribe to be notified of new videos!

[Subscribe to my YouTube Channel](https://www.youtube.com/c/swildermuth)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/IM2glNMH1UA)
8 Useful HTML input Attributes, You must know.
Tags: webdev, webpack, codenewbie, devops
Published: 2021-07-25 03:30:36

When we built forms in our HTML web page then we came across with this type of situation where we want to pop a message to user for there ease.
So here is 8 HTML <input> Attributes that you must know as a web developer.

#1. Required attribute#

This attribute will check whether the input field is filled or not on hitting submit button and shows a massage.
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szp94bp4n0szrtvaehlq.jpg)


#2. autofocus attribute#

This attribute will automatic- ally give focus on to the input field when page loads. 
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeyxnn8mt11bfjisahbh.jpg)


#3. read only attribute#

This attribute tells that an input field should be read only (cannot be changed).
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m8skaas5wqn9ijju6tn.jpg)


#4. pattern attribute#

This attribute checks whether the input field value matched the pattern format or not.
![Pattern attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk4s87bf8w1r6yi4r7n6.jpg)


#5. placeholder attribute#

This attribute shows the hint that what should be the value in the input field.
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt8n6mhwebxa07zr52mt.jpg)

#6. maxlength attribute#

This attribute tells the maximum number of characters that are allowed in that input field.

#7. Size Attribute#

This attribute specify what should be the width of the input type. Default width size is 20.
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vhdm2txovtpnc0i3b7m.jpg)


#8. min and max attribute#

The min and max attributes specify the minimum and maximum values for an input element.
![Max Min Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydwl4xllfb0lej09bv1g.jpg)

So that's it hope you find it helpful.
If you know something else I'm happy to hear suggest me below.
Thank you.