teleren/devto huggingface dataset:
New Android Splash Screen
Tags: android, appdev, tutorial
Published: 2022-06-29 06:03:15

I'm a fan of splash screen, for every project I try to create I always wanted to apply splash screen because it's fun to look at! But I never really liked the previous version of applying it so I don't apply it much. But yesterday, since I started working on my portfolio again, I encountered a new good way to implement it.

Put this package in _build.gradle_ (module) in _dependencies_

```
implementation 'androidx.core:core-splashscreen:1.0.0-beta01'
```

If you can't see 'styles.xml' in your project, go ahead and right click on your res folder and create a new xml file, name it as 'styles.xml' and put this code.

```
<resources>
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_stat_shop</item>
        <item name="windowSplashScreenBackground">@color/teal_700</item>
        <item name="postSplashScreenTheme">@style/Theme.OnlineShop</item>

    </style>
</resources>
```
The _windowSplashScreenAnimatedIcon_ is your animated or simple logo, the one you want to see in the middle of your splash screen.

The _windowSplashScreenBackground_ item is the background color of your splash screen, mine is just from the color xml file but you can also put there the background color of your ic_launcher/logo if you have one. 

The _AppTheme_ in your postSplashScreenTheme item is the theme name your project is currently using, you can find it inside themes folder inside the themes.xml files.

Add the style to your mainactivity in androidmanifest:

```
<activity
            android:name=".MainActivity"
            android:theme="@style/Theme.App.Starting"
            android:exported="true" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
```
Lastly, don't forget to add this code before `setContentView(R.layout.activity_main);`:

```
SplashScreen splashScreen = SplashScreen.installSplashScreen(this);
```
or else you'll encounter this error, as I did:

```
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.test.onlineshop/com.test.onlineshop.MainActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
```
Top 5 coding interview practice websites here. Do you use any other sites?
Tags: webdev, beginners, programming, discuss
Published: 2022-06-29 05:58:53

Top 5 coding interview practice websites.

📝Leetcode: Solve coding problems in DS & Algorithms 

📝BinarySearch: Practice with friends in online rooms. 

📝Pramp: Peer to peer mock interviews. 

📝Codeforces: Learn through Competitive programming

📝Hackerearth: Mock assessments.

What other resources do you use for interview preparation?

PS: Here is my favourite Top interview question list: https://tipseason.com/coding-interviews.html
How to install Tailwind CSS with Svelte + Vite!
Tags: svelte, webdev, vite, tailwindcss
Published: 2022-06-29 05:27:41

## Introduction
If you read the title, you know what the post is about. Let's not waste any time here and jump straight into it!

### Step 1
Set up a Vite + Svelte project using documentation on the [Vite](https://vitejs.dev/guide/) or [Svelte](https://svelte.dev) website.

### Step 2
Run the following commands.
`npm install -D tailwindcss postcss autoprefixer`
`npx tailwindcss init tailwind.config.cjs -p`

### Step 3
In the newly created `tailwind.config.cjs` file, add this line of code.

```js
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};
```
Then make an `app.css` file in the src directory with this code in it.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Step 4
Then in your `main.js` file, make sure to include the `app.css` file using an import statement.
```js
import './app.css'
```
Then all you need to do is run your code and make sure everything is working.
```js
npm run dev
```
Complete Roadmap To Become an Automation Tester(Action Plan)
Tags: testing, selenium, automation, beginners
Published: 2022-06-29 04:52:43

How To Become an Automation Tester: In this video, we are going to learn about the ROADMAP to become an Automation Tester. We will discuss 2-3 Month action plan to switch from manual to automation Testing.

{% embed https://youtu.be/Yh11cxJVGoU %}

🚀 BONUS VIDEO 🚀

❤️ Mind Map Download - https://sdet.live/notes
❤️ Become Better QA : https://sdet.live/30days
Simple and Better Pull Requests
Tags: pullrequest, codechanges, sdlc, shortread
Published: 2022-06-28 11:34:23

---
title: Simple and Better Pull Requests
published: true
description: 
tags: pullrequest, codechanges, sdlc, shortread
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

### Follow Me, Shout Out, or Give Thanks! 
Please :sparkling_heart: this article. a small thing to keep me motivated =)
Twitter: [@djjasonclark](https://twitter.com/djjasonclark)
Linkedin: [in/clarkngo](https://www.linkedin.com/in/clarkngo/)
Note: if there are technical jargons here, that is by design (its a way for me to impart my experience as software engineer). I'd like readers to expand their tech jargon dictionary. you can google or leave a comment. 😊

Are you guilty  of naming your commits and PRs (pull requests) such as **add button**, **fix bug on form**, etc.? 

Are you having a hard time linking this to a user story/task/ticket?

Say no more. 

Why do we need this? 🤔 

Well... gives us more info. new code changes can lead to... breaking the application (hoping its not a production pool and serving lots of traffic) 😬

With PR integration to a project management tool, It adds visibility to managers. They don't need to always look at your code repository (like GitHub) to know the status of a feature request or bug fix.

## Linking your ticket and PRs - that lazy manual way
If you have a ticket with title: `app-1234 enhance-response-performance`, then before you push your code base, then use this as commit message:
```
git commit -m 'app-1234 enhance-response-performance'
```
In this way if something breaks, then when you do RCA (root cause analysis) it easier to track down, and get more information, instead of just the owner. Then we can do the necessary fix. Maybe rollback the latest manifest deployed, or do a roll forward fix instead. 

Bonus tip: 
don't know who wrote that code line? 
```
git blame Filename.java
```
want more visualization in git (helpful for very active code bases with lots of contributors and branches)? Download [SmartGit](https://www.syntevo.com/smartgit/).

## Automate that manual process
Enter webhooks (do something when event happens)
- when you create a new PR with the same jira title (well just appname-1234 without the extra text might work already), then it will update your JIRA ticket with the status of that PR.

[How to automate](https://confluence.atlassian.com/automation070/how-to-integrate-jira-and-github-using-automation-for-jira-1014664530.html)

## Bonus
Jira 
what is Jira? It is a popular project management tool. How popular? Jira market share is 44.11% with more than 72391 companies using this software. Data from [Datanyze](https://www.datanyze.com/market-share/project-management--217/jira-market-share)

A tool where most developers dread. Story points? estimate? can I just work?

What creating button takes 5 days when hooking up and reading/writing to a database took 1 day? 🤪

![JIRA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h983a7yxqa22h1r8u83e.png)
AWS - Clean CloudFront Cache
Tags: aws, cloudfront, cache
Published: 2022-06-29 03:45:08

While working with one website hosted in S3 that it is using CloudFront, since CloudFront caches the pages, sometime you need to clean the cache to see the changes.

Below are the steps to clean the cache in CloudFront:

- Login into AWS and go to CloudFront
  
![CouldFront List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gegnrxh05gssiadaqh42.png)

- Click in the CloudFront, then click in [Invalidations]

![CloudFront Invalidation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30m2po5lmrkuitgjrof7.png)

- Click in Create Invalidation and add `/*` in object path as below

![ClouldFront Invalidation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2iqg9gxweay1us7j7ibp.png)

- Click in Create Invalidation. After a few seconds, you will see the cache was cleaned and you will be able to see the new changes

![CouldFront Clean succesfully](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqalb25wflaajumk0xtp.png)

That's all to clean up the CloudFront cache!
Laravel 8 Multiple Database Connections
Tags: laravel8, database, mysql, laravel
Published: 2022-06-29 03:19:06

In this article, we will see laravel 8 multiple database connections. Today I will give you the step-by-step implementation of how to use laravel 8 multiple database connections. 

Many times we have requirements in our project to use multiple database connections like MySQL, MongoDB, PostgreSQL, etc. 

When you work with a very large amount of projects then you will need to manage multiple database connections.

So, in this tutorial, we will see one or more database connections in a single laravel application, multiple database connections in laravel 8, how to connect multiple databases in laravel 8, laravel multiple database servers, laravel multiple database connections.

---

**_[Read More: Laravel 8 Multiple Database Connections](https://techsolutionstuff.com/post/laravel-8-multiple-database-connections)_**
Day 3: Adding a second page
Published: 2022-06-29 02:44:06



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m25ds32uofa1k0krabz.png)
## Shifting some content
Today was mainly about adding some additional content rather than big style changes. My college professors drilled separation of concerns into my head so much that I decided I would break up much of the content that I had on the main page of my site. I started this up by creating an about.html page where I provided some general information about the challenge as a whole, rather than what I specifically would be trying to accomplish. It was a fairly simple change, and my biggest concern was that my css styling would transfer over to a new page seamlessly.

It actually worked pretty well! I split the css into different files, with a "master" css and more specific ones for each different page. Doing this is so helpful as it keeps the CSS from getting too cluttered as my site continues to get bigger. This is all of the CSS I needed to write to get the new page shown above.

```
.header {
    padding-top: 10px;
}

#main {
    background-color: rgb(38, 50, 91);
    height: 475px;
    width: 80%;
    margin: auto;
    border-radius: 10px;
    color: white;
    padding-top: 50px;
}

#main h2 {
    font-size: 64pt;
    margin-bottom: 120px;
}

li {
    font-size: 32pt;
    margin: 60px;
}

ol {
    width: 60%;
    margin: auto;
}
```

## Next Steps
Tomorrow I plan to add some more content to the two pages that I have created thus far. Right now, they are not very big and still look more like powerpoint slides than webpages so I hope to fill them up quite a bit.
Toggling Without JS - Buttons Reimagined 🤯
Tags: css, button, toggle, ux
Published: 2022-06-29 02:37:34

The story begins with wanting to recreate the "hamburger menu that animates into an X" that is quite popular these days. Oh and only using CSS.

At first I tried to tap into the :focus pseudo class to control the changes. Something like this:

```
button{
...
}

//top line
button::after{
...
}

//bottom line
button::before{
...
}

button:focus::before{
transform: rotate(45deg);
}

etc...
```
The problem was that it couldn't be reverted back to the initial state by clicking on the button again. Only clicking outside the button could remove the focus.

Then while watching a [tutorial](https://www.youtube.com/watch?v=N8BZvfRD_eU) by my fav YouTube developer Web Dev Simplified it hit me. What about using a checkbox input instead of a button to manage the toggle?

An hour or two later I arrived at this:

{% codepen https://codepen.io/eitanwaxman/pen/oNqNwVg %}

I made some tweaks to the method such as using absolute and width: 0 to disappear the input but the overall concept is the same. 

This CSS magic kinda makes the checkbox type input the king of JS-less state. I decided to take it one step further. Could we implement an effect as well -such as the dropdown of the actual menu?

After much struggle I can say the answer is - sort of.

{% codepen https://codepen.io/eitanwaxman/pen/OJvJQdL %}

The checkbox/toggle can affect other elements as long as they are **within CSS reach**. The elements must be at the same level as the toggle and share a parent.  

All this jumping through hoops made me wonder - why isn't there a toggle pseudo class? Are there any other ways to implement toggle in CSS? Is this actually worthwhile and scalable?

lmk ✌
Proxying Ackee through Netlify
Tags: analytics, netlify
Published: 2022-06-29 02:12:41

---
title: Proxying Ackee through Netlify
published: true
tags: 
 - analytics
 - netlify
canonical_url: https://petermekhaeil.com/proxying-ackee-through-netlify/
---

Proxying the requests to [Ackee](https://ackee.electerious.com/) through Netlify comes with some advantages:

- **It bypasses the need to configure CORS headers** - Because Ackee is self-hosted on a domain that is different to your website, during the installation you will be asked to configure CORS headers for Ackee to accept requests from other domains. With proxy rewrites, the browser will be making a request to Ackee through the same domain so we can skip configuring CORS headers.
- **It makes it difficult for ad-blockers to detect the tracker** - We can rewrite the path to the tracker to not include keywords that can be blocked.

[Netlify Redirects](https://docs.netlify.com/routing/redirects/) can redirect requests to external services and this is how we will be setting up our proxy rewrites.

## Adding the rewrite rules

Netlify Redirects rules are configured in a file called `_redirects`. Create the file if you do not have one already. Here are the rules to use:

```bash
/script.js https://your-ackee-domain.com/tracker.js 200
/api https://your-ackee-domain.com/api 200
```

What we have done is proxying these paths to an external path on another domain:

```bash
https://yourdomain.com/script.js -> https://your-ackee-domain.com/tracker.js
https://yourdomain.com/api -> https://your-ackee-domain.com/api
```

## Update the path in your script tag

You will need to update the Ackee script to reference the new path:

```html
<script
  async
  src="/script.js"
  data-ackee-server="https://yourdomain.com"
  data-ackee-domain-id="0000-0000-0000-0000-0000"
></script>
```

## Verify the changes

Verify the proxy is working by seeing your website making requests to `/script.js` and `/api` and that they respond with status 200.
Terraform Standard Backends: HTTP Backend
Tags: aws, cloud, devops, terraform
Published: 2022-06-29 02:07:59

Another backend type which we will explore is called [HTTP backend](https://www.terraform.io/language/settings/backends/http).

This type of backend allows us to store state using a REST client. 

State will be fetched using `GET`, updated via `POST`, and finally destroyed using `DELETE`. 

This backend also supports state locking which, as we learned previously, is an incredibly handy feature. When locking is enabled you can use `LOCK` and `UNLOCK` requests to include the lock info in the body. The endpoint will return `423:Locked` or `409:Conflict` if the lock is active and `200:OK` if there is no lock.

This is how you add an HTTP backend:
```terraform
# terraform.tf

terraform {
  backend "http" {
    address = "http://myrest.api.com/foo"

    lock_method    = "PUT"
    lock_address   = "http://myrest.api.com/foo"

    unlock_address = "http://myrest.api.com/foo"
    unlock_method  = "DELETE"
  }
}
```

This was a very short article, but since we are on the topic of backends I thought this simple backend will be a good addition.

Thank you for reading! See you in the next article!
Auto Clicker for Chromebook
Tags: tutorial, autoclicker, chromebook, chromeos
Published: 2022-06-29 02:06:00

If you’re looking for a way to [automate your mouse clicks](https://maxautoclicker.blogspot.com/p/auto-clicker.html) tasks in your Chromebook (Chrome OS), an Auto Clicker software might be just what you need.

In this tutorial, I will explain you, step by step, how to get the best Auto Clicker for Chromebook for free. Furthermore, how to install and use it.

![Auto Clicker For Chromebook (Chrome OS)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy58bmt0233in75aimhv.jpeg)

## Auto Clicker For Chromebook : Getting The Best Chrome OS Auto Clicker

Max Auto Clicker is one of the most popular auto clicker for Chromebooks, and for good reason: It’s free to use, it’s easy to set up, and it’s packed with features.

Max Auto Clicker is an open-source mouse automation tool that allows you to easily automate your mouse clicks in Chromebook and assist you with repetitive click tasks.

The software has two modes of auto clicking, fast mode and slow mode. Moreover, support three types of delays: pre-delay, random delay, and human click emulation delay. These delays can be used in several [idle browser games](https://maxautoclicker.blogspot.com/2022/06/clicker-games.html) in Roblox like AFK farming and PVP fights and many others in Minecraft games.

[![Max Auto Clicker software](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4m0rlu071iviom5sk0m.png)](https://maxautoclicker.blogspot.com/p/download-maxautoclicker-for-free.html)

## How to download and install Max Auto Clicker?

Go to the official Max Auto Clicker website and download the ".deb" package installer from here:

[![Free Download Max Auto Clicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zukc07j0xqdyw6fngij2.png)](https://sourceforge.net/projects/maxautoclicker/files/maxautoclicker_1.5_amd64.deb/download)

To install it, open Terminal after downloading the ".deb" package and enter the following command:
`sudo dpkg -i maxautoclicker_1.5_amd64.deb
`
Then go to your Chromebook programs menu and search for the MaxAutoClicker program there.

Read the [Help Page](https://maxautoclicker.blogspot.com/2021/05/help-how-to-use-max-auto-clicker.html) to get an idea how to use it, or by clicking on Help button of the program.



{% embed https://www.youtube.com/watch?v=rx5188iWiLE %}
Netflix Logo | Pure CSS
Tags: codepen, css, showdev, beginners
Published: 2022-06-29 01:51:25

In today’s tutorial, I finished creating a Netflix logo with CSS. Simple css code for this iconic staple. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials that are CSS inspired. You can check them out [here](https://codepen.io/rembertdesigns).

For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/XWEWEEP %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

https://www.buymeacoffee.com/rembertdesigns

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
A alegria das pequenas vitórias | pt-br
Tags: webdev, braziliandevs, beginners
Published: 2022-06-29 01:24:39

Semana passada comecei a codar um projeto de um curso que eu faço, onde a proposta era baixar o html pronto e resolver o CSS e o Javascript. Pois bem, fui dar o start e já comecei a ter vários problemas - era um identificador que não funcionava, propriedades sobrepostas, comando que não pegava. Uma enxurrada de coisas. 

Passei umas boas horas tentando resolver e estava frustrada, pensei em desistir. Mas alguma coisinha estava surgindo lá no fundo da minha mente. Comecei a escutar. E as coisas começaram a funcionar. Meu cerébro foi “clickando”, relembrando conceitos e fazendos novas conexões entre as memórias (em um processo que se chama “chunking”).

Me dei conta então de que o conhecimento estava mesmo lá no meu cerébro, esperando por uma chamada. Aprender leva tempo,  criar novas conexões entre as memórias - leva tempo também.

Então, tendo isso em mente, aqui vão algumas dicas para quem, como eu, está começando na programação:

* enquanto estuda, escolha algum método para reter parte daquelas informações - faça anotações à mão, digitadas, um resumo - alguma coisa que você possa consultar mais tarde;

* pratique. Sim, todo mundo fala nisso (e se todo mundo fala, deve ter um fundo de verdade, né?), mas faz diferença. É quando você vai começar a testar toda aquela teoria que você andou aprendendo;

* quando começar a resolver um rpoblema maior, não tenha medo. Comece por algum lado, divida seu problema em pedaços peuqenos e vá avançando aos poucos. Você verá o progresso;

* Teste, teste e teste. Não exite em “tentar”. Abra as devtools no browser e se divirta. Não se frustre tanto, você está buscando por soluções que existem, só é preciso encontrá-las.

Por hoje é isso, estudem bastante e boa jornada! :)