teleren/devto huggingface dataset:
Overwrite Bootstrap with CSS code
Tags: webdev, bootstrap, css, 100daysofcode
Published: 2021-06-03 05:51:00

---
title: Overwrite Bootstrap with CSS code
published: true
date: 2021-05-29 13:15:36 UTC
tags: WebDevelopment,Bootstrap,CSS,100DaysOfCode
canonical_url: https://bharadwaj.hashnode.dev/overwrite-bootstrap-with-css-code
cover-image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c7sxmof6boeh5wuk4wm.png
---

We all know that Bootstrap makes lives easier. But, there are sometimes where we need to overwrite with custom CSS. To overcome that problem there is a simple and basic trick. In this blog, I am going to share this trick with you.

HTML, the language which follows the order of code perfectly. We can take advantage of this very effectively. If you find that your custom styles are not working, make sure that you change the order of link tags in the header.

**CSS styles are applied in the order they are linked in your HTML code.**

So, if you have two stylesheets say styles1.css and styles2.css which both target the same element.

styles1.css

```
body {
background-color: red;
}

```

styles2.css

```
body {
background-color: blue;
}

```

If inside the head section of your HTML code, you list your links as this

```
<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">

```

Then, the resulting page will be in Blue color.

But if you listed your links like this:

```
<link rel="stylesheet" href="styles2.css">
<link rel="stylesheet" href="styles1.css">

```

The resulting page will be in Red.

Essentially both styles are being applied, but the one that's visible at the end is the one applied last.

So, following that logic, if your custom styles are not overriding the bootstrap styles, all you need to do is move the link to your custom stylesheet to a line after the bootstrap CDN link

```
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

```

This means that you first load the default bootstrap styles, then you can overwrite some of those components with your own custom CSS.

Just remember one thing **HTML follows the order of code.**

That's a wrap friends. Hope this small blog helps you through your web development coding journey. Follow me on [Twitter](https://twitter.com/Bharadwaj6262) for some awesome content.
Diary (Free) by Storytics / Journal with Pin
Tags: showdev, android, react, webdev
Published: 2021-05-29 13:11:33

[Diary (Free) by Storytics](https://storytics.pt/diary) is a diary/journal where you can use to reflect on the past or plan for the future. Focused on simplicity, keep your thoughts organized by several diaries/journals with unlimited pages securely through a pin code.  

With a simple and clear design, you can easily focus on writing and if you write your diaries/journals at night, take the opportunity to switch to the dark theme and write in a beautiful text-focused editor. 

**Secure and Private:** 

Write your diaries in a safe environment where only you have control over the content that is created, and if you want you can enable a pin code/biometry layer to your Diaries or Journal.   

**Customizable, Easy, and Minimalist:**

Simple and minimalist, Diary by [Storytics](https://storytics.pt) offers a simple experience of writing journals, diaries with support for light and dark themes. Finally, organize your diaries through color customization, a simple way to organize your memories. 

**Automatic Database Backup:** 

If you want to keep your diaries and journals in a safe place without losing them in case something happens to your phone, then the premium plan is perfect for you. 

**Included in your [Diary](https://storytics.pt/diary):** 

- Simple and beautiful design; 
- Text-focused editor; 
- Private and with support for Pin Code; 
- Dark and light themes; 
- Customization of diaries/journals through colors; 
- Automatic Database Backup with Premium (optional)

**Useful links**

- [How I build this App](https://dev.to/vacom/our-first-app-on-google-play-and-is-a-diary-journal-app-ljk)
- [Website](https://storytics.pt/diary)
- [Free Version](https://play.google.com/store/apps/details?id=pt.storytics.diary.lite)
- [Pro Version](https://play.google.com/store/apps/details?id=pt.storytics.diary)
- [Facebook](https://www.facebook.com/storytics.pt) 
- [Github](https://github.com/Storytics)
Day 10/30 : Responsive Image Gallery using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-05-29 12:39:39

Welcome to Day 10 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Responsive Image Gallery](https://1.bp.blogspot.com/-uUVvdN4yZlQ/YKOfmRfDysI/AAAAAAAAACs/SBl7p6CJHyANP1ZYgKCVIlp47Cy-ggq4QCLcBGAsYHQ/s600/p10.gif)

**➜ Video Tutorial :**

{% youtube 6VgThhxrTdk %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/05/how-to-create-responsive-image-gallery.html


**➜ Instagram Post and Reel for Day 10 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
Phalcon v4.1.2 Released
Tags: phalcon4, release
Published: 2021-05-03 14:17:46

---
title: Phalcon v4.1.2 Released
published: true
date: 2021-05-03 13:52:33 UTC
tags: phalcon4,release
canonical_url: 
---

We are very happy to announce the release of Phalcon **v4.1.2**!


[Github Tag](https://github.com/phalcon/cphalcon/releases/tag/v4.1.2)

This is a small maintenance release for v4, and although it was supposed to be 4.1.1, we made a mistake for our PECL deployment so we had to increment the small version once more. v4.1.1 and v4.1.2 are identical.

## Changed

- Corrected max PHP version for PECL

## Fixed

- Fixed `Logger\Log::log()` `log` to recognize all log levels [#15214](https://github.com/phalcon/cphalcon/issues/15214)
- Changed `setClaims` to be protected so that the `Phalcon\Security\JWT\Builder` class can be properly extended. [#15322](https://github.com/phalcon/cphalcon/issues/15322)

Huge thanks to our contributors that reported issues, offered input as well as submitted pull requests with additions and corrections!

## Installation/Upgrade

[Packagecloud.io](https://packagecloud.io/phalcon) and PECL have been updated. You can download the zip file, as well as DLLs for Windows, from our release page [here](https://github.com/phalcon/cphalcon/releases/tag/v4.1.2).

You can also clone the repository and checkout the tag, and then run

```
zephir fullclean
zephir build

```

to install the new extension. Detailed installation instructions can be found in our [documentation page](https://docs.phalcon.io/4.0/en/installation).

### Thank you

Once again a huge thank you to all of our contributors! You guys have helped us a lot. You can help us even more by installing this version and testing it. If you find bugs, please report them in our [Github Issues](https://github.com/phalcon/cphalcon/issues) page. Alternatively you can always join us in our [Discord server](https://phalcon.io/discord) or our [Forum](https://phalcon.io/forum).
Aplicação para testes diversos
Tags: docker
Published: 2021-05-29 12:01:27

As Aplicações abaixo foram desenvolvidas apenas para labs que eu faço em arquiteturas de cloud de forma a testar a comunicação entre zonas de disponibilidades, AutoScaling, deploy com Terraform, etc. Ela será utilizada em uma série de postagens onde vou fazer o deploy dessa aplicação tanto na AWS como no Azure de várias maneiras diferentes, com Ec2, Fargate, EKS e na Azure com os equivalentes.

# As aplicações de teste
Bom, as aplicações são simples, elas foram escritas em Python e PHP das quais a que eu realmente entendo é a de Python, mas se você não sabe nada sobre nenhuma dessas linguagens, não tem problema, elas foram feitas com base nos exemplos que tem no próprio site. 
Basicamente o **APP PHP** faz um *GET* na **APP Python** que por sua vez conecta no container com o banco Redis e incrementa com +1 a variável **API_COUNTER**. Para ficar mais visual fiz a imagem abaixo:

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


O Git para download do código está [aqui]()

## APP Python
A única coisa que usei de diferente aqui foi a biblioteca do [redis](https://pypi.org/project/redis3/) para fazer a conexão com ele e o Flask como framework pra rodar a aplicação. Apenas para fins de curiosidade essa aplicação foi feita com base nesse [link](https://kb.objectrocket.com/redis/create-a-simple-task-queue-with-flask-and-redis-1467).
* Porta em que a aplicação roda = 9090
* Variáveis de ambiente:
  * FLASK_APP = app.py
  * REDIS_URL = redis://redis:6379/0

## APP PHP
Aqui temos uma aplicação bem simples também usando o [Guzzlehttp](https://docs.guzzlephp.org/en/stable/overview.html) para subir o servidor web e fazer as requisições para o endpoint da APP Python, a aplicação foi baseada no [Quickstart](https://docs.guzzlephp.org/en/stable/quickstart.html) do Guzzle.
* Porta em que a aplicação roda = 8080
* Variáveis de Ambiente:
  * PY_APP_URL = http://python:9090

## Subindo o Ambiente para testes
Caso você queira experimentar essa aplicação em sua máquina é totalmente possível, desde que você tenha o Docker devidamente instalado no seu ambiente como também o Docker Composer.

Para subir o ambiente basta clonar [este](https://github.com/rodrigoscferraz/Apps-Example1) repositório do meu Github, acessar a pasta raiz dele e rodar os comandos abaixo.

Para _buildar_ as imagens, instalar dependencias e fazer toda a parafernalha do Docker:
```shell
make build
```
E para subir o ambiente:
```shell
make up
```
Para acessar as aplicações basta testar acessando pelo seu navegador e deve ver algo como nas imagens abaixo:
Aplicação Python:
![py_app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9gqlr1nxh7jdjrrtja7.png)

Aplicação PHP:
![php_app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grfcjikzsjgms3iockpl.png)

Em breve teremos o Deploy na AWS!
Daily Developer Jokes - Saturday, May 29, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-29 12:00:07

---
title: "Daily Developer Jokes - Saturday, May 29, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20May%2029%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258fbc6e41.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ You know what the best thing about booleans is?

___A:___ Even if you are wrong, you are only off by a bit.
 -->
Is coding kind of like making art?
Tags: art, coding, webdev
Published: 2021-05-29 10:54:12

I usually ask myself questions about the most trivial things. Among these there is also investigating why I like a given thing or why I don’t.
I have often wondered why I like coding and, writing music since I was a teenager, I think I have identified several things that these two have in common.

The first similarity I found is that inspiration is needed. Although it seems counterintuitive for those unfamiliar with the world of coding, inspiration is a very important help. In music is even essential. The inspiration you need to fix a bug and the one you need to complete a chorus are really very similar because the two draw on both experience and creativity.

Creativity is another aspect in common as well as the fluctuating state that can affect: many times, in both writing music and coding, a person can feel stuck, without creativity, remaining unproductive for a long time, even ending up thinking that he/she is not made to continue writing code or music, while other times creativity flows copiously, and he/she becomes extremely productive.

In addition to inspiration and creativity, in writing music and coding you need to know how to get out of the lines and know how to adapt, to improvise, but always staying within the rules because, if you violate the basic rules, in music you’ll get a note out of tune or something unlistenable, while in coding... well, I certainly don't have to specify what happens.

Furthermore, both for music and for coding, you need to study and practice a lot, you need to learn and execute. In both cases discipline and repetition (even boring) of the basics is necessary but all this is still fun and rewarding if you have passion. Here, even passion is an element in common: if you write music or code, you need passion, otherwise... it shows.

Finally, when you complete a large section of code or a song you get a great satisfaction: I clearly feel a “completeness” feeling, having created something of my own and that works as I imagined.

So, is coding like making art? No, it is certainly not the same thing because they are very different in a lot of aspects but, as I have described, they have some interesting similarities.
Do you agree with my thinking? Is there any other similarity I missed?
Website Free Hosting
Tags: website, free, hosting, github
Published: 2021-05-29 10:52:56

Want to host a website for free? Here's how to get 100% free web hosting for your website: fast, reliable and totally free!

## Can you really host a website for free?


Absolutely!

Read to find out step by step how to **get a website hosted for free** and get 100 PageSpeed score.

You probably think it's not possible to host a website for free.

I've set up lots of websites this way, because **it's free and the loading speed is fabulous**!

Just a couple of weeks ago I've helped setting up a brand new [nickname generator](https://www.nickname-generator.net/) website. 

And yes, 
Hosting was 100% FREE.

## How to get free hosting for your website?

The idea is to host your website on [Github](https://www.github.com). 

Here's what you have to do:

1. Get a free Github account
1. Upload your website in a folder ```/docs/```
1. Setup Github pages

That's it!

Here's how it all works:

[![What is Github Pages?](https://img.youtube.com/vi/2MsN8gpT6jY/0.jpg)](https://www.youtube.com/watch?v=2MsN8gpT6jY)

## Why Github Is The Best Free Website Hosting?

Why is Github is really the best free website hosting you’ll ever get?

Here are just a few reasons:

1. Github has a really strong high-availability infrastructure which will guarantee 99.99% uptime. This rivals even paid hosting providers.
1. It uses an in-built CDN (content delivery network) which means all requests will be served extremely fast from geographical locations closest to the requestor
1. Provides HTTPS out-of-the-box
1. Automatic backup and version management. All changes to your website stored and backed up automatically (basic Github functionality; you can fork, branch, etc)
1. Up to 10GB of storage per repository
1. Ability to easily transfer your website to any hosting provider (most of them provide Github integrations for migrating)

If you want to read more about the performance and loading speed for a site hosted for free on Github, check out this awesome analysis inside the article [How to Get Free Hosting](http://www.coding-dude.com/wp/web-design/how-to-get-free-hosting/) on [Coding Dude](http://www.coding-dude.com/).
Difference between Child Selector and Descendant Selector
Published: 2021-05-29 10:31:43

Sometimes we confuse Child Selector with Descendant Selector. Here is an easy explanation on this topic. 

**Example 1: **
Suppose you have one brother , one sister and one cousin. As you know that  All of you are descendant of your grandfater. But Your father is direct child of your grandfather.

**Example 2: **

You are child of your fater but your son isn't child of your fater but they are descendant of your fater. 

Now let's apply this rule in CSS selector
Look the below html code. I have a section which has one paragraph element. Inside the section element there is one div and inside the div there is one paragraph element.
So we can conclude that:
* First paragraph is child of section element
* Second paragraph is descendant of section element
```
 <section>
     <p class="first">This is first Paragraph</p>
     <div>
       <p class="second">This is second paragraph </p>
     </div>
   </section>

```
IF i use this code:  
```
section p {
     background-color: red;
}
```
The above code will be applied on both first and second paragrpah because they both are descendant of section. 
But if i use this code:
```
section > p {
  background-color: red;
}
```
This above code will be applied only on first paragraph because only this paragraph is direct child of the section.
You Must use these Git cmds
Tags: github, git, productivity, programming
Published: 2021-05-29 10:31:00

Git is important to use for all of us as a web developer or a software developer. Git is the most widely used and powerful version control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source code management in software development, but it can be used to keep track of changes in any set of files.

They would be super useful for accomplishing common tasks like creating or renaming a git branch, removing files, and undoing changes. While other version control systems e.g. CVS, SVN keeps most of their data like commit logs on a central server, every git repository on every computer is a full-fledged repository with complete history and full version tracking abilities, independent of network access or a central server.

However, almost all IDEs support git out of the box and we do not require submitting the git commands manually but it is always good to understand these commands. Below is a list of some git commands to work efficiently with git.

Here are the list of git commands that I most commonly use

- git init : Initialize a local Git repository
- git clone repo_url : Clone public repository
- git clone ssh://git@github.com/[username]/[repository-name].git : Clone private repository
- git status: Check status
- git add [file-name] : Add a file to the staging area
- git add -A : Add all new and changed files to the staging area
- git commit -m “[commit message]” : Commit changes
- git rm -r [file-name.txt] : Remove a file (or folder)
- git branch : List of branches (the asterisk denotes the current branch)
- git branch -a : List all branches (local and remote)
- git branch [branch name] : Create a new branch
- git checkout -b [branch name]: Create a new branch and switch to it
- git merge [branch name]: Merge a branch into the active branch
- git merge [source branch] [target branch]: Merge a branch into a target branch
- git push: Push changes to remote repository (remembered branch)
- git push origin — delete [branch name] : Delete a remote branch
- git pull : Update local repository to the newest commit
- git pull origin [branch name]: Pull changes from remote repository
- git remote add origin ssh://git@github.com/[username]/[repository-name].git: Add a remote repository
- git log: View changes
- git config — global user.name “your_username”: Set globally Username


### Thanks for scrolling.
HTML : Apply cellpadding and cellspacing to table with and without using CSS
Tags: html, tutorial, webdev, codenewbie
Published: 2021-05-29 10:26:14

# What is Cellpadding?
Cellpadding - Sets the amount of space between the contents of the cell and the cell wall

# What is Cellspacing?
Cellspacing - Controls the space between table cells

Old school way of setting `cellpadding` and `cellspacing` is like this:
```html
<table cellspacing="1" cellpadding="1">
```

But there are various way to achieve the same.
# Method 1 
For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":
```css
td { 
    padding: 10px;
}
```
For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":
```css
table { 
    border-spacing: 10px;
    border-collapse: separate;
}
```
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

# Method 2
The default behavior of the browser is equivalent to:
```css
table {border-collapse: collapse;}
td    {padding: 0px;}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e5l4seurkwyrw47rjnk.png)

## Set Cellpadding
To set this we need set the padding to td
```css
table {border-collapse: collapse;}
td    {padding: 6px;}
```
So that it will look like as -
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5560wsj25il5s6z6izk.png)

## Set Cellspacing
To set this we need to set border-spacing to table
```css
table {border-spacing: 2px;}
td    {padding: 0px;}
```
So that it will look like as -
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pnsdog4ekvxbw45wori.png)

## Setting Cellspacing and Cellspacing both
```css
table {border-spacing: 8px 2px;}
td    {padding: 6px;}
```
So that it will look like as -
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc49e7cpf9jk7w7j563y.png)

```css
table {border-spacing: 2px;}
td    {padding: 6px;}
```
So that it will look like as -
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c083331bmbxxqwd1ebr5.png)

# Summary
```css
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
```

<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).