teleren/devto huggingface dataset:
Tailwind CSS fullscreen header image
Tags: tailwindcss, css
Published: 2021-09-19 05:52:27

Fullscreen header images are a trendy topic in web development. I quite like the effect of having a full-screen section that shows a big image.

In this article, we'll check out how to create the following two effects in Tailwind CSS.

1. Full-screen image tag
2. Full-screen background image

And the result will look like this CodePen below. (Example 1 = image tag (leaves), and the bottom one is the background image (dunes))

{% codepen https://codepen.io/rebelchris/pen/LYLLpRx %}

## 1. Full-screen header image in Tailwind

Let's start with the image. Sometimes you want to have an actual image preferred over the background image.
This method can be pretty tricky, but let's see what we can do to make it work.

```html
<section class="w-full h-screen">
  <img src="your_image.jpg" class="object-cover w-full h-full" alt="Image alt text" />
</section>
```

Alright, let's see what's going on here.
We created a section that will define the size of our header. In our case, it fills the full width of the screen and the viewport height.

Then inside of that, we render the image, and what makes this work is the 100% width/height and object-cover class.

The object cover will make sure the image stretches so it keeps its optimal size.

## 2. Full-screen background image in Tailwind

Then for the easier but less accessible way is to use a background image.
This effect will be nicer on smaller screens since the positioning is better.

For this to work in tailwind you have to add the image in your `tailwind.config.js` file like so:

```js
module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        dunes: "url('/dunes.jpg')",
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

You can use this image as `bg-dunes`.

So let's see how we can make a full-screen header in Tailwind CSS.

```html
<section class="w-full h-screen bg-dunes bg-cover bg-center"></section>
```

And that's it! These are two ways to create full-screen header images in Tailwind.

I hope you enjoyed the article if you have any questions feel free to reach out to me.

### 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)
What is forgotten about why we need C++ for the future
Tags: cpp, watercooler, programming, rust
Published: 2021-09-19 05:05:23

[Note: I will be using C and C++ interchangeably throughout.]
Discussions about Rust, Golang, Kotlin, etc replacing C++ always overlook how deeply entrenched C/CPP is in the world. Cars, cable boxes, movie projectors, fighter jets, particle colliders… heck Python uses a ton of C under the hood and the internet runs on Nodejs, written in C, running on operating systems written in C. Accessed by browsers written in C. The world runs on it.

Yeah it’s got a lot of problems but when a language is so widely deployed the problems are equally widely known. The quirks don’t surprise engineers, they build for them. The capabilities and limitations of the language are known quantities. Sure Ryan Dhal can complain about C and switch to Rust for Deno, but if you’re coding a new missile guidance system do you wanna use a new language that is theoretically better and easier to use, or the one that you’ve spent 20 years getting REALLY good at using for guiding missiles?

I predict that C/CPP will be replaced by a new language around the same time QWERTY keyboards are replaced by a new layout.

I'm not sure when that will be, but I'd love to hear from any of you who can see a practical path to what would be nothing short of a revolution in how we tell the stuff in the world what we want it to do. It seems such a long uphill fight to my eyes, but I'm open to being convinced otherwise. 

Thanks,
- Jas 

[Note: This is a lightly revised repost of comment I wrote, which I wanted to publish under my profile for future reference]
Situs Judi Online HokiBet
Tags: situsjudionline, hokibet, agenhokibet
Published: 2021-09-19 05:04:54

HokiBet merupakan situs judi online paling lengkap di Indonesia menyediakan permainan paling gacor. 1 User id bisa bermain semua jenis permainan.

• Minimal deposit Rp 25.000
• Minimal withdraw Rp 50.000

Dapatkan penawaran paling menarik dari kami seperti.
• Bonus new member 
• Bonus rollingan tanpa batas
• Cashback tanpa batas
• Turnamen Bulanan

https://issuu.com/hokibetcom
https://heylink.me/hokibetcom/
https://joy.link/hokibetcom
10 Things a... Only joking!
Published: 2021-09-19 03:58:03

I've fallen down the hole of ... a few times. It's a rush. It is falling after all.

Yet. As you know, it also hurts when you hit the floor after falling.

When I found myself exploring on the ground, bumping into others who'd found the same thing. It didn't hurt.

It strengthened and rejuvenated.
Building a small community/social network 👨‍💻️
Tags: community, socialnetwok, project
Published: 2021-09-19 03:53:23

![WebStore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a93zv36mydmjlredigg.png)
So coming to the point I have recently finished version 0.2 of a project called WebStore and now it's time to share with the world. Basically, it is a community/social network for developers to share their projects and view other developers' projects. Currently, it is in the beta phase and I am still figuring out many features So you are going to see a lot of changes in the future.

![WebStore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjbn8jyhe8loyccbq0vx.png)
[WebStore](https://webstoreapp.netlify.app/)

## Coming to the technologies I am using to build this are the following:
* FastApi (Backend python web framework)
* Vue (Javascript frontend framework)
* Bulma (CSS framework)
* Buefy (Bulma vue CSS framework)
* Cloudinary (For image hosting)
* Postgresql (For image hosting)
* Sendgrid (For sending confirmation mail)
* Heroku (For Api deployment)
* Netlify (For frontend deployment)

## I urgently need help regarding these topics
* Logo design 
* Ui design
* Name of the appliaction
* [Contribution in GitHub repo for tech stack feature](https://dev.to/tazim404/looking-for-contributor-in-a-project-1hlm)
 

So I request you all to join this and support this.

If you want me to help with this project to improve it  and scale this community/social media to the moon please mail me at [rahbartazim@gmail.com](mailto:rahbartazim@gmail.com) or you can DM me on Twitter [Twitter](https://twitter.com/tazim_rahbar) or if you find any bug please report it into [Report a bug section](https://webstoreapp.netlify.app/report)

![WebStore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6t3ifg08i17j5ipu8tw.png)
When you see great code, ask yourself why it is great and can you replicate it? (100 Bytes Of Wisdom: Day 71)
Tags: career, journey, advice
Published: 2021-09-19 02:27:13

---
title: When you see great code, ask yourself why it is great and can you replicate it? (100 Bytes Of Wisdom: Day 71)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![When you see great code, ask yourself why it is great and can you replicate it?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfxdtegx23e76cly8kxz.png)

About two years ago now I had a colleague who wrote some truly lovely JavaScript. Annoyed at myself for not being able to write it so nicely, I chose a reasonably new approach for me and decided to study their code instead. I looked carefully at the choices they'd made for structure and syntax and even asked them how they thought of doing things the way they did. Eventually, I was able to write code in the style that I grew to admire of theirs and I was super happy.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
A very simple scriptable Elixir server with tests 
Tags: elixir, programming
Published: 2021-09-19 02:18:06

Sometimes I miss the old days of Sinatra. It was so simple to build a really simple server, that we can do it in less than ten lines into two files, the `Gemfile` and the `server.rb` file.

We need to work a little more than expected with Elixir, but it's doable, and with a plus, it's not hard to bake tests inside your script.

Thanks to `Mix.install/2` that is [available](https://hexdocs.pm/mix/1.12/Mix.html#install/2) since Elixir v1.12.0, its possible even to make it in one single file. Just place the snippet bellow in a single file, for example, `server.exs`

```elixir
# Place this content on server.exs file

Mix.install([
  {:plug_cowboy, "~> 2.0"}
])

defmodule Server do
  use Plug.Router
  plug(:match)
  plug(:dispatch)

  get "/hello-world" do
    send_resp(conn, 200, "Hello World!")
  end

  match _ do
    send_resp(conn, 404, "Nothing to see here")
  end
end

ExUnit.start(autorun: false)

defmodule ServerTest do
  use ExUnit.Case, async: true
  use Plug.Test

  @opts Server.init([])

  test "returns hello world" do
    # Create a test connection
    conn = conn(:get, "/hello-world")

    # Invoke the plug
    conn = Server.call(conn, @opts)

    # Assert the response and status
    assert conn.state == :sent
    assert conn.status == 200
    assert conn.resp_body == "Hello World!"
  end

  test "returns 404 to any another route" do
    for path <- ["/foo", "/bar"] do
      conn = conn(:get, path)
      conn = Server.call(conn, @opts)

      assert conn.state == :sent
      assert conn.status == 404
      assert conn.resp_body == "Nothing to see here"
    end
  end
end

case ExUnit.run() do
  %{failures: 0} ->
    Plug.Cowboy.http(Server, [], port: 4000)
    System.no_halt(true)

  _ ->
    :error
end
```

And now just call in your shell:

```shell
elixir server.exs
```

Visit your browser at http://localhost:4000/hello-world to see the result.

This is another small and interesting tip to the mix of useful things that we can do with Elixir.

Happy Hacking Folks!
GitHub flowとは
Tags: github, git, githubflow
Published: 2021-09-19 02:17:09

# はじめに
- GitHubFlowについてまとめてみました。

# GitHubFlowとは
- GitHub Flowは「GitHub」の開発で使用されているワークフローであり、「git-flow」
に比べてシンプルな構成になっています。
- 参考記事
  - [詳細な解説記事](https://atmarkit.itmedia.co.jp/ait/articles/1708/01/news015.html)
  - [git-flowとは(英語)](https://nvie.com/posts/a-successful-git-branching-model/)

## 開発の流れ

[![Image from Gyazo](https://i.gyazo.com/ee3d505e997fbcc818aee7acd5dd254e.png)](https://gyazo.com/ee3d505e997fbcc818aee7acd5dd254e)

1. 作業を開始する際は、mainブランチから開発ブランチを切る。
※ mainブランチは常にリリース可能な状態のこと
2. 開発が完了したらリモートへpushし、PRを依頼する。
3. PRがOKならば、mainへマージする

## 実際にやってみる
1. リポジトリ作成
2. ローカルへclone
3. ブランチを切って編集
4. 作業内容をpush
5. PRを依頼

### リポジトリ作成
- リポジトリを作成します。自分のGiuHubへアクセスしてリポジトリを作成しましょう。

[![Image from Gyazo](https://i.gyazo.com/928775809b505183f5dd6a625da905b0.png)](https://gyazo.com/928775809b505183f5dd6a625da905b0)

- HTTPSかSSHどちらかコピーしましょう。

[![Image from Gyazo](https://i.gyazo.com/928775809b505183f5dd6a625da905b0.png)](https://gyazo.com/928775809b505183f5dd6a625da905b0)

- ローカルでcloneしましょう。

```linux
$ git clone <コピーしたurl>
```
- cloneしたら`cd`コマンドでcloneしたディレクトリへ移動します。
```linux
$ cd git-proactice
```
### ブランチを切って編集
- `feature/add_sample.txt`ブランチを切リます。
```linux
$ git checkout -b feature/add_sample.txt
```
- ファイルを追加して、ファイルを更新します。
```linux
# ファイル追加
$ touch sample.txt

# ファイル編集
$ vim sample.txt
```
[![Image from Gyazo](https://i.gyazo.com/7d6aaba019e3540a1bf3b6606e8b0a7f.gif)](https://gyazo.com/7d6aaba019e3540a1bf3b6606e8b0a7f)
- ステージングエリアへ追加し、コミットします。
```linux
# 更新されていること確認
$ git status

# ステージングエリアへ追加
$ git add sample.txt

# コミット
$ git commit -m "new file add sample.txt"

# コミットされたことを確認
$ git log --oneline
```
### 作業内容をpush
```linux
# pushする前にリモートの変更がないか確認します。
$ git pull origin main

# push先はmainではなく、ローカルで作成したブランチです。
# mainは常にリリース可能状態にするためです。
$ git push origin feature/add_sample.txt
```
### PRを依頼
- github上でPRを贈ります。

[![Image from Gyazo](https://i.gyazo.com/fd53842a7593fd848e6e870c926e07e3.png)](https://gyazo.com/fd53842a7593fd848e6e870c926e07e3)

- マージして完了(実際はレビューした人が行います。)

[![Image from Gyazo](https://i.gyazo.com/d605a29feaf9ffcc42a165e45dbc8365.gif)](https://gyazo.com/d605a29feaf9ffcc42a165e45dbc8365)
Visual Studio 2022 Preview 4.0 And Maui; Doesn't Work
Tags: vs2022, maui
Published: 2021-09-19 01:21:45

![The project doesn't know how to run the profile windows machine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exu2wp6916y3du8jfzxb.png)

Still does not work out of the box, a total waste of time.

Just this week MSFT backtracked on Maui. They delayed the release to 2022. Thanks MSFT, this follows all the other cluster work you've delivered in the past.
Safari-like archive handling in Linux
Tags: systems, linux
Published: 2021-09-19 01:12:05

Just wanted to share this, because I spent all morning figuring it out for myself. As someone that's used macOS a lot recently one of the features I really appreciate is Safari's ability to automatically extract archives when you open them. Granted that's about the only feature I appreciate about Safari, but I'll give credit where credit is due.

Having recently reinstalled Arch on my home workstation this is one the the features that I've really missed, so this morning I decided to add the feature myself.

Starting off I knew I'd most likely need to write a script and somehow associate the mime-types of the various archives I want to open with that script. Keep in mind that these instructions are known to work on GNOME and require the zsh shell. Different types of archives also require different programs to open them.

Here are the 2 files you're going to need. I'll explain them a bit further down.

First is `extract.zsh` (place this in `~/.local/bin`):

{% gist https://gist.github.com/watzon/16b44b083204d46a0c1dc58a8a77f562 file=extract.zsh %}

And then the desktop file (place this in `~/.local/share/applications`:

{% gist https://gist.github.com/watzon/16b44b083204d46a0c1dc58a8a77f562 file=extract.desktop %}

## How does it work?

Honestly it's super simple, and makes use of [some existing code](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/extract) from Oh-My-ZSH. `extract.zsh` checks the extension of the file you're trying to extract and matches it with the correct program for opening that file. This script was meant to be used as a zsh plugin, but I repurposed it. In doing so I needed to change the output directory (initially files were being extracted to my user's home directory) and make it automatically overwrite existing directories since we wanted this process to be automatic.

The `.desktop` file allows the script to be registered as the default program for a given mime-type. All you have to do is open one archive with a given extension using the `extract` menu option and that's it, extract is now the default program for opening those archives.

Now for the little bit of setup:

Any archive formats you want to have automatically extract need to be opened with extract so that the default for that archive type can be changed. To do this (on GNOME) right click an archive, select "Open With Other Application", click "Find New Applications" at the bottom of the dialog, and then find `extract` in the list. If you don't see it you may need to log out and then log back in again.

That's really it. Now download an archive and try opening it directly from the downloads menu in your browser. The archive should be extracted and then the directory automatically opened.
The loneliness of learning
Tags: motivation, healthydebate, watercooler, programming
Published: 2021-09-19 01:05:12

I sit at my machine, launching my IDE and getting ready to work on my project. I’ve recently made a breakthrough and now the basic functionality of my simple website works. I decide that I’ll focus on styling for a while, and soon the familiar click-clack of my trusty Khail box white keys fills the room.

That is all that fills this room. As I briefly let my attention wander, an existential chill comes over me. How many other thousands of people are learning CSS right now? Are they networked and collaborating and helping each other figure out challenges? Do they have anything in their ears other than the clack of their keyboard and creaks of their chair?

As you can guess by the fact that I’m posting here I am well aware of development communities; I’ve come in contact with many helpful folks who have helped me when I’ve had a question or two. Yet for me, people to stay in touch as we learn escape me. 

I write this all to say that if you are learning coding and you see busy open source projects, read Medium posts with lots of views, and see popular YouTube coding channels but don’t feel part of anything you’re not as alone as it feels. 

Learning this stuff from home can be very lonely. It can be challenging and frustrating not having human contact to sit down with and solve problems with. It can be exhausting and make you insecure. 

But even with all that, you know what? I’m not going to quit. I love making stuff. I love my chair, I love my keyboard, and even if nobody else ever sees the new CSS I’m working on I’ll still be god damn proud that I taught myself how to do it. 

Soon the familiar click-clack of my Khail box whites fill the room again, but somehow they sound a little bit more cheerful than before. 

Stay healthy my friends,
- Jas
Modificando a hora nas configurações do PHP8
Tags: php8, timezone
Published: 2021-09-19 01:01:05

---
title:  Modificando a hora nas configurações do PHP8
published: true
description: Ajudando a mudar a timezone no arquivo php.ini
tags: php8, timezone
//cover_image: https://direct_url_to_image.jpg
---

É comum quando ao instalarmos o PHP em nossa máquina e ao usar por exemplo "date('H:i:s')" que a hora seja apresentada de modo errado em relação a hora atual. Se isto acontecer, basta ir nos arquivos do PHP e procurar por "php.ini".

Pode ser que você não encontre o arquivo "php.ini" no diretório de instalação do PHP e é certo que dois arquivos sejam escontrados: "php.ini-development" e "php.ini-production". Basta renomear o arquivo "development" (ou o outro) para "php.ini" apenas e fazer a seguinte alteração: procure pela expressão "date.timezone =" (mais ou menos na linha 971 do .ini do PHP8) e adicione a string correspondente a sua localização.

Uma lista de opções de timezones pode ser encontrada em https://www.php.net/manual/en/timezones.php .

A linha vai ficar por exemplo assim:
date.timezone = America/Belem
O ponto e vírgula deve ser retirado do inicio da linha.

Em seguida você salva o arquivo "php.ini" e reinicia o servidor em questão.

Assim, a hora vai ser ajusta manualmente para a sua região.

Até a próxima! =]
Host Static Site on Heroku in 5 minutes with Basic Auth
Tags: heroku, git
Published: 2021-09-19 00:46:07

Basically, we don't need to use Heroku for static website recently since we can use GitHub, Netlify, Vercel, and so on.

However, if we want to use basic auth for a website, we will need some extra work. It might be worth of trying, but if you just want to upload a couple of HTML and CSS files, that work will be too much.

To avoid that, we can use Heroku.

## What is Heroku?
https://heroku.com/
>Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.


In this post, I will show you how to do that in 5 minutes.

### requirements 
- Terminal / Comand prompt
- git (https://git-scm.com/downloads)
- heroku-cli (https://devcenter.heroku.com/articles/heroku-cli)
- heroku account
- github account (optional)

## [Steps]
Step1. Create a website
Step2. Download or Clone a repo
Step3. Login Heroku via terminal and create an app
Step4. Push your website to Heroku
Step5. Set info for Basic Auth

In terms of step1, it depends on you, so I will skip this part 😜

### Step2 Download or Clone a repo
Go to the following repo and download repo or clone repo.

{% github nulltask/heroku-static-provider %}

There is `public` folder in the folder you downloaded or cloned.

`clone`
```zsh
$ git clone https://github.com/nulltask/heroku-static-provider.git
```

You need to move all `step1` fills into `public` and run the following commands.

```zsh
$ git add .

# you can type anything you want as a comment.
$ git commit -m 'initial commit'
```

### Step3 Login Heroku via terminal and create an app
```zsh
$ heroku login
# If you skip your site name, Heroku generates a new name for you
$ heroku create your-site-name
```

### Step4 Push your website to Heroku and check it
IF you can push your site properly, heroku-cli will show you your website url on `Terminal`. You can use that to access your website or you can use `heroku open` to access the webstie.

```zsh
$ git push heroku master
$ heroku open
```

### Step5 Set info for Basic Auth
Almost there. This is the last step. We need to type 2 commands to add Basic Auth to your website.
Of course, you can set anything you want as `username` and `password`.

```zsh
$ heroku config:set USER=username
$ heroku config:set PASS=password
```


If you want to use the latest `express` you can try my repo instead of the original.

I updated a little bit the original repo.
- updated express
- var --> const
- updated readme (add how to run it locally)
{% github koji/heroku-static-provider %}
React lazy loading
Published: 2021-09-19 00:31:44

We have a main component and need to load in a child tag component to the DOM, also something you think you need to do it lazily like this:

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

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

the end