teleren/devto huggingface dataset:
How to write an auto clicker in Java
Published: 2021-05-01 16:09:29

---
title: How to write an auto clicker in Java
published: true
description: After I got asked by my kid to download and install an auto clicker. I saw this as a teachable moment to build an auto clicker in java in order to talk about different concepts that java offers and also explore a new API in the Java API.
tags:
cover_image: https://i.ytimg.com/vi/5Nx_jk3WGBI/maxresdefault.jpg
---

{% youtube 5Nx_jk3WGBI %}

After I got asked by my kid to download and install an auto clicker. I saw this as a teachable moment to build an auto clicker in java in order to talk about different concepts that java offers and also explore a new API in the Java API.
Another Update
Published: 2021-05-01 16:05:33

# 4th Update - A lot done, a lot to do.....

Since beginning these posts a two months ago, we've been chasing a moving target, studying a lot of different subjects that weren't always closely connected. 

But a lot has been achieved over the past few weeks. 
The big challenge now is to bring it together. 

By the end of May, we want to have our portfolio ready to go with 3 - 5 projects properly deployed. 
That's already alot, even though we have a lot of the groundwork done, but you're also interested in adding two legit Gatsby projects; Bahia Flats and Bjj. 

So, here's what we'll do. 
- Lu's portfolio is good but needs some work on media queries as well as updating the dummy links that have been [shipped](https://data-with-ludmila.netlify.app/).
They need to be fixed and the Strapi site deployed.
- We need to break ground on your Gatsby/Strapi portfolio deployment. You want both ends deployed and ready for projects to be added.  
- Do that monster Insta clone this week. There's a lot of details on each end that you can benefit from looking at e.g. Tailwind, testing, deployment. It should be the last full video for a while. You've a lot in your own projects to go on. 

Also, next week, we start the codeNewbie courses. We're looking to code more, we're looking to get a job. We really want money coming in this summer. 

But you're getting there. 

> here, where a thousand
captains swore grand conquest tall
grass their monument
Solution to HDMI audio problem in Ubuntu 20.04
Tags: linux, ubuntu
Published: 2021-05-01 16:01:49

Hello dev's after much searching and searching between tutorials and others I found this solution in a discussion forum where a possible solution was to edit the grub which did not work I have an amd ryzen a12 and when connecting to my hdmi it gave me an image but no it gave sound so I followed the suggestion to install PulseAudio Volume Control from the application store and that's it, problem solved, now I have audio and image on my hd screen the only thing to do once this software is installed is to go to the tab of Output Devices and once there select the Headphones as the output port, the software will also automatically detect that you have a default HDMI port when making these changes you can enjoy an excellent sound via HDMI coming out of your hd monitor

I hope this contribution will be of great help to you, greetings!
Bottom values in Javascript 
Published: 2021-05-01 15:55:37

**Javascript** has two **bottom** values. The **null** and **undefined** values are considered javascript's bottom values that indicate the _absence_ of a value. In addition, these values are the only values in javascript that are not object. Attempting to get a property from them raises an exception. Even though the **null** is a well known value in other languages and it is commonly used, in javascript it is considered **best practice** to use **undefined** in most cases. First let's see the only case that we can use **null** instead of **undefined**. Using _Object.Create(null)_ in order to create a new empty object. So, why we should use **undefined**? Because **javascript** itself uses this value. If you define a non-initialize variable with let and var their values are undefined. If you do not pass enough arguments into a function, if you request a property from an object that lacks that property and if you get an element of an array that the array lacks, javascript gives **undefined**. We can make _better programs_ if we eliminate one of them not from the language :stuck_out_tongue: but from our programs
Your next boilerplate
Tags: nextjs, javascript, graphql, typescript
Published: 2021-05-01 15:55:16

Announcing [kirby-boilerplate](https://github.com/FabienGreard/kirby-boilerplate), an open-source boilerplate aiming to provide everything you need to start your next project! 

**Why?**

Do you feel like the JavaScript ecosystem is getting worst every day? The good old time where you could just write code in one simple HTML file is over, honestly, this is sad. 

So if you are bored having to spend at least 2-3 days producing quality scaffolding for your next project, Kirby-Boilerplate is definitely for you!

**How?**

2-3 years ago, I felt like boilerplate was a waste of time, but with the tooling we have nowadays, it feels easier to maintain separately from "the" actual production code.

With Kirby, I aim to focus on CI-CD and maintainability which none other boilerplate do. (or am I missing one ?) 

**Features?**

Well all the rocking tools that you have heard in the front-end world are in Kirby (or at least most of them, come and bring new ideas !)

here a  summary of what it does : 

- NextJs
- Apollo
- Tailwindcss
- Typescript
- react-intl
- storybook
- Prisma (SOON !! with instruction for connecting ur own database)

The rest is [here](https://github.com/FabienGreard/kirby-boilerplate)

**Next?** 

I am looking for contributors and new ideas, shortly I will focus on adding a "monorepo" option for Kirby, as this more likely what you will do in a company. 

So please, have a look at it and help me build the next true opensource boilerplate! [kirby-boilerplate](https://github.com/FabienGreard/kirby-boilerplate), because we are all tired of building over the same thing again and again.
Dart - Cascade Notation
Tags: dart, programming, productivity, codenewbie
Published: 2021-05-01 15:48:18

Remember those days in different languages when you are utilising an object and you need to call methods with that object multiple times. Cascade Notation is denoted using a pair of dots(..), pseudo code will clear things a bit more.

Object..method1()..method2() 

Now object can be anything like List, Maps etc. Let's look at the sample code then things will become more clear.

```dart
var f1 = {1: 'Apple', 2: 'Orange'};
var f2 = {3: 'Banana'};
var f3 = {4: 'Mango'};
var fruit = {}..addAll(f1)..addAll(f2)..addAll(f3);
print('Merging maps using cascade notation: $fruit');
```

In the code above, we see cascade notation of dart in action. It is allowing us to perform sequence of operations with repeating code, as a result our code is compact and eye pleasing. I hope you enjoyed this little episode of Dart till next time take care and see you guys soon 😊
How to add Bootstrap 5 to your Angular 11 project
Tags: angular, bootstrap5, popperjs, programming
Published: 2021-05-01 15:45:25

First things first you want to add bootstrap 5 as an npm package like so

```
npm install bootstrap@next
```

In your _angular.json_ add bootstrap stylesheet and javascript
```javascript
"styles": [
  "src/scss/styles.scss",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
],

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
```

Now add _popperjs_ and add it to your scripts

```
npm install @popperjs/core
```

```javascript
"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
```

Now lets test and see if everything works accordingly
Add a dropdown component to your _app.component.html_

```html
<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton1"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
``` 
You should be able to click and view the dropdown menu items
🔥Boomshaka-laka you're all set. Happy coding!!
Hi dev.to 👋
Tags: firstpost
Published: 2021-05-01 15:44:16

I've been doing web development for over a decade now and I really love to share my knowledge with others (colleagues at work or students I teach). I've attempted many times to broaden my target audience with written articles, but failed most of the times. Some times I am not satisfied with the quality, some times I just fail to plan my time to write. This is another attempt to break this rule, so I decided not to overthink my first post here and just say hi.

I hope this time, I'll stick around.

Have a great day everyone,
Dan
Cloud Firestore DB with Swift
Tags: swift, database, beginners, codenewbie
Published: 2021-05-01 15:13:18

As most mobile application developers I have encountered in my experience, have a basic understanding and experience in connecting and implementing a basic database structure and design for an application prototype or a side project they might be working on. But as for me, who switched from front end web development to developing apps in Swift, I didn't have a clue on connecting databases to build a working application with web services. 

![David saying he has no clue](https://media.giphy.com/media/37smQpbdHrBjVsxEhM/giphy.gif)

After a lot of begging my backend dev friends to make databases for me and getting a lot of annoyed rebuttals, I decided to take matters into my own hands. I discovered how to use Cloud Firestore for designing my own database and web services. An overview on getting started [here](https://firebase.google.com/docs/firestore)

---

Since Cloud Firestore is based on a NoSQL database, you can use the service as a data dump, but also add some structure if you'd like. A little bit of understanding of terminology between SQL and NoSQL databases and how you could turn a NoSQL database into a relational one.

An explanation on how this will work out:

![Translation of terminology between Cloud Firestore and a SQL based Relational DB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4bwia00ksc2zf55gnf1.PNG)

Let's take an example of a database of Cars and their owners in a City/Administrative region. 

Cars have information on their owner, model and license plate number. Owners have their id, name and email/contact.

The following image will show this design in a Relational Database:

![Cars and Owners DB design in SQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4qx5hsf70cuo2ppfwk5.PNG)

The next image is a translation of the same design in a Cloud Firestore DB:

![Cars and Owners DB design in Cloud Firestore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5v00pak3tyesd1lxfw0l.PNG)

---

To learn more and get a sense of the working of Firestore and its queries, you could try out this [codelab](https://codelabs.developers.google.com/codelabs/firestore-ios/index.html?index=..%2F..index#0)

---


Apologies for my handwriting in the DB Images. Hope you understood what I was trying to say. That's all for this blog!

![Bye bye GIF](https://media.giphy.com/media/JSqYOfOlw7iIQsyS8s/giphy.gif)
Day #14-#20 of 100DaysOfCode
Tags: 100daysofcode, webdev, watercooler, react
Published: 2021-05-01 14:58:10

25 April to 1st May 

Yepp, you got it right. 
I'm back, as matter of fact I never broke my streak just ups and downs as usual.

While making the shopping cart app I realized that I need to learn React router in greater detail so I followed my gut that led me to start another course. Making apps with Flux and React. 
Despite the fact that Flux is super cool to use, I learned that 
the separation of concerns is a pretty big deal in the world of programming.

Flux is nothing but a simple library provided by Facebook to implement retrieving and loading of data effectively.
It's a sum total of four things
* Action
* Dispatcher
* Store
* React UI


They literally do the same task as their name suggests.

Anyway, that's not the main part, here the main thing is that we use flux in order to separate manipulation of data and rendering a component based on that data.
That's not it, we also separate our component into two parts 
* Dumb component 
* Smart component

A dumb component as the name suggests is dumb, i.e it contains the real markup (JSX) that is going to be rendered.

Whereas a smart component is a bridge that asks the Store for data via the Flux API and then pass it down to its dumb child so that it may render it.

And there you go separation of concerns at a whole new level.

I just wanna put it here that we don't need flux at all but it just provides us with an interface and since it's all about declarative programming why be a B about it.

With that said, now I'll work using these new tools that I just earned. 😁

I chose Django for the back end. I also installed ruby on rails on my computer as well but still meh.

I don't even know how to make a loop in ruby why to learn a new language when ruby on rails is just 0.7% faster than Django. 

*Although I could use some advice about which database I should learn first. Considering I have never even touched a soul till now.*
I have installed PostgreSQL and Mongo on my pc but IDK, not sure. 
See where it takes me.

*If any one of you smart people would like to help me out, I'd really appreciate that.*

That's how I spent my last couple of days.
Let me know if there is anything that I can do better in the comments or anything literally. Always happy to receive comments.
 
Thanks for joining me.😀
Have a wonderful day.🌷
Conditionally rendering JSX in React functions
Tags: react
Published: 2021-05-01 14:46:39

You might have occasion to render your JSX in React only in certain conditions. Like maybe if no props were passed to the function, rather than give an error, you just want nothing on the page instead.

The obvious thing to do would be this:
```
const App = () => {
  if (true) {
    return (
     <>
       <h1>This is a heading</h1>
       <p>This is a paragraph</p>
     </>
    )
  }
}
```

Makes sense, right? And as long the condition is true, then everything will be fine. But as soon as it's false React will complain that your function doesn't have a return statement. And all React functions should return something.

So instead you can do this:
```
const App = () => {
  return (
    <>
      {if(true) {
        <h1>This is a heading</h1>
        <p>This is a paragraph</p>
      }}
   </>
  )
}
```

And this will render the h1 and p tags only if the condition is true. If it's false all that's in the return statement are the empty tags. Which won't put anything on the page.

When adding JavaScript to JSX you have to put it in curly brackets, otherwise React gets confused. Hence the extra curly brackets around the condition (and general plethora of brackets all around the place).
100 Days of Code Check Sheet
Tags: 100daysofcode, codenewbie
Published: 2021-05-01 13:40:34

I wanted to have a check sheet to hang on my wall to keep me accountable for coding. I saw some themed ones for Python and Web but wanted something more generic. So I just made one myself. I thought I would share it for those who would like to print one themselves. 

[Hundred Days Of Code Check Sheet](https://filedn.com/lL11wbUNQPPbbXWoSESOj98/Blog%20Posts/2020%20Posts/100%20Days%20Check/100_Days_Check.pdf)

Cheers!
Amazing Button Image Hover With CSS
Tags: html, css, webdev, beginners
Published: 2021-05-01 13:28:43

Today I created an Amazing Image Button Hover Effect Using HTML & CSS. when you hover on the button inner image changes the size & also changes the text content. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/WNRqMxR %}
เริ่มต้น Flutter + Firebase
Tags: flutter, beginners, firebase
Published: 2021-05-01 13:01:48

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

เริ่มต้นศึกษา #Firebase ยากมากๆ 
ตัวอย่างส่วนใหญ่ จะเป็นเวอร์ชั่นเก่า มันรันไม่ผ่านซิ
นั่งงมไป

พอเริ่มเข้าใจ ได้เห็นข้อมูล ก็ดีใจ 😁😁😁😁
Get pretty json API responses using a simple Python script
Tags: python, json, rest, api
Published: 2021-05-01 12:54:40

If you are searching for data or documents via websites, there is a good chance that the data is presented to you using REST API behind the scenes.

Sometimes, it could get tedious if you are using a website to get the same kind of information for different identifiers/keys. If this website has an API behind the scenes then you could straight way use that API. This could be achieved from your shell/Terminal using some simple tools.

This post is about using these 'tools' on a Mac OS:

- [python](https://www.python.org/)
- [urllib](https://docs.python.org/3/library/urllib.html) - python package
- [json](https://docs.python.org/3/library/json.html) - python package

assumed a website is using REST API *GET* requests such as this and response from this api is coming in JSON format...

https://api.website.com/lookup/byId?id=9876def

then, you could use a simple Python script as follows to get a pretty print of the JSON response right from the terminal.

```
import urllib2
import json

response = urllib2.urlopen('https://api.website.com/lookup/byId?id=9876def')

data = json.load(response)
formatted_data = json.dumps(data, indent=2)

print formatted_data
```
How to get GitHub notifications on your Discord server.
Tags: github, tutorial, webhooks, discord
Published: 2021-05-01 12:52:00

GitHub provides us with a way to allow other applications such as discord to connect it and receive POST requests whenever any action is done on your repository. 

This can be useful if you find the email notifications not as instant as you'd want them to be.

## Prerequisites

- You need to have a GitHub account with a repository.
- You need to have a discord server where we will add the webhook.

### 1. Create the webhook

A webhook is basically a link that will allow other applications to post into discord.
To create a webhook, head into your `server settings` => `integrations` => `New webhook`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks08crvkapm0zzdke827.png)
You can give your webhook a name and also choose which channel it will be posting to. You can click on `Copy Webhook URL` to copy the link which we are going to use on our GitHub repository.

### 2. Add Discord webhook to GitHub

After creating the webhook the next thing is to add it to your github repository from which you would like to get notifications.

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

Head over to your repo then `settings` => `Webhooks` => `Add webhook`

Paste the link we copied earlier from discord  in the `Payload URL` and make sure to add `/github` at the end or it will not work.

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

Set the `Content type` to `application/json` and finally choose the events which should trigger the webhook. Personally, I want everything. 

After you are done you can click the green button at the bottom labeled `Add webhook` to complete the process.

If you have done it correctly you should receive a similar notification to this;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5zjnmz8qm2f4n0c04qm.png)

### 3. Test the webhook

To test the webhook we can perform a simple action such as creating an issue on the repo which we just added the webhook.
![A screenshot of creating a test issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lu23pr35fzd0uhkff0f.png)

Upon creating the issue. You should immediately receive a notification from discord on whatever device you have installed it on.
![Screen Shot 2021-05-01 at 13.50.28](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkpkhejr84npp7sj37aw.png)

It will work the same way when pushing commits, creating PRs ...etc

Thank You for reading❤️. If you have any questions feel free to drop them in the comments section below and I'll be glad to answer them.
Making sure all commits pass the tests
Tags: git, todayilearned
Published: 2021-05-01 13:45:17

---
title: Making sure all commits pass the tests
published: true
date: 2021-05-01 12:29:12 UTC
tags: Git,TIL
canonical_url: https://andreligne.io/making-sure-all-commits-pass-the-tests/
---

If you’re a bit too pedantic about your `git` history, like I am, you probably want to make sure that all the commits are passing whatever checks the project has set up before merging it into the `main` branch.

It turns out there’s a way to automatically run a command for each commit when you’re doing a `git-rebase` — you can pass the `--exec` flag (or the shorthand `-x` flag).

With this flag, `git` will run the given command after applying each commit onto the new `HEAD`. If the command returns a non-zero exit code, the rebase will stop on that commit and allow you to update the commit so that it passes.

For example, if you have a Ruby project (using RSpec) and want to check that all commits after the `main` branch are passing the tests, you can run the following command.

```
$ git rebase -x “bundle exec rspec” main
```

## Why bother?

There are a few good reasons, other than the warm fuzzy feeling it brings you inside, to make sure that the commits are valid.

My main reason for caring about this is that it helps you keep track that all commits are working. If you have commits that aren’t passing the tests or have incomplete/broken features, it will be more challenging to track down a separate issue using `git-bisect`. Since you might land on a commit that is not in a working state, it is harder to tell if a commit is good or bad.

It also forces you to think about commits as an atomic piece of _completed_ work, which makes it easier to write a great commit message which summarizes the unit of work.