teleren/devto huggingface dataset:
CSS Basics
Tags: beginners, webdev, css
Published: 2020-06-13 15:05:23

CSS (cascading style sheets) is one simple way from going to a plain boring website to a professional looking masterpiece.

Sounds interesting right, but where do we start? 

## Basics 

CSS helps you selectively stylize HTML elements. In this article we will talk about structure of a CSS rule-set and what selector types there are. 

One example of this is styling an element: 

```
p {
  color: red;
}
```

Let's break this down into parts and discover whats happening. In this CSS format we see that we are referring to the HTML "p" or paragraph tag. This part of the CSS is known as the selector and within brackets "{ }" we see the declaration setting the color to red.

Putting all this information together it will turn all paragraph elements in an HTML page red. 

## Selectors

Now that we have an idea how the structure of a simple CSS rule-set what other selectors can we use to identify HTML elements you want to style. 

Simple Selectors these are the items based on name, class, and id.

Combinator Selectors which will allow for more than one selector

You can use a Combinator selector with any of the following.

<ul>
<li> descendant selector (space) </li>
Here the p element is in a div element and only p elements in the div element will take on the color of red.

<li> child selector (>) </li>
Here the p element is in a div element and only p elements directly in the div element will take on the color of red.


<li> adjacent sibling selector (+) </li>

Here all elements that are the adjacent siblings of a specified element is stylized.


<li> general sibling selector (~) </li>

Lastly in the general sibling selector all elements that are siblings of a specified element is stylized.

</ul>  


```
div p {
 color: red;
}

div > p {
 color: red;
}

div + p {
 color: red;
}

div ~ p {
 color: red;
}
```

That's all for this post! Follow/React for more articles on basic web development.
Brighten and discipline your git commit message, with emoji
Tags: git, emoji
Published: 2020-06-13 15:01:30

For this, I use [commitizen](https://github.com/commitizen/cz-cli) and [emoji-cz](https://github.com/kevin940726/emoji-cz) installed globally. I don't want to taint non-Node.js projects with `package.json`, BTW.

```sh
npm i -g commitizen emoji-cz
echo '{ "path": "emoji-cz" }' > ~/.czrc
```

<small>
I always thought it is `commit + zen`, but it is actually `commit + citizen`...
</small>

I also find [commitlint](https://github.com/marionebl/commitlint) and [traditional git hooks](https://github.com/commitizen/cz-cli#traditional-git-hooks) interesting, but I am not ready to try it yet.

Again, no need for `package.json` or `node_modules` in your projects.

This is an example of the projects.

https://github.com/patarapolw/rep2recall/tree/dev
[video] Webservices: Le petit secret de Joomla! 4
Tags: blog
Published: 2021-03-18 11:38:49

---
title: [video] Webservices: Le petit secret de Joomla! 4
published: true
date: 2020-06-13 14:54:33 UTC
tags: Blog
canonical_url: 
---

![](https://coderparlerpartager.fr/images/webservices-un-nouveau-monde-s-ouvre-avec-joomla-4.jpg)

Salut super joomlers!

Saviez-vous que les webservices existaient déjà dans Joomla! il y a de cela 12 ans. Il existaient plus précisément dans Joomla! 1.5.

Voici ci-contre la présentation qui accompagne la [vidéo](https://youtu.be/Wn4b23wDSLU "Vidéo sur les webservices dans Joomla! 4").

[Présentation webservices Joomla! 4](https://slides.com/mralexandrelise/webservices-joomla-4 "Présentation webservices Joomla! 4")
Use :empty pseudo-class select dom in css
Tags: css, tricks
Published: 2020-06-13 14:43:41

---
title: Use :empty pseudo-class select dom in css
published: true
description: :empty selector is intersting
tags: CSS, Tricks
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cgu0k66i5gl6ecy8yv2g.jpg
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0gtdrx8oy7f4njg3c7j1.jpg)

`:empty` pseudo-class selector can used when you need select empty dom in **CSS** let's show case

```html
<!-- will be selector -->
<div></div>
<div></div>
<div><!-- comment --></div>

<!-- will not selected if has comment with line break  -->
<div>
  <!-- comment here  -->
</div>

<!-- will not be select if contain space -->
<div> </div>

<!-- not be select if contain content-->
<div> anything </div>

<!-- will be selector -->
<div></div>
```

`:empty` just used for select **DOM** which contain nothing even comment.

[demo](https://codepen.io/ihavecoke/pen/qBbNaOq)

Hope it can help you :)
My favourite computer science text (OR "how regex works")
Tags: computerscience, regex, history
Published: 2020-06-13 14:39:41

---
title: My favourite computer science text (OR "how regex works")
published: true
description: I share my favourite article written about computer science, and explain why
tags: computerscience, regex, history
//cover_image: https://direct_url_to_image.jpg
---
One of my favourite things in CS is reading about algorithms not as a tutorial, but as more of a historical presentation. My favourite example is https://swtch.com/~rsc/regexp/regexp2.html,
which discusses how Nondeterministic Finite Automata modelled as virtual machine bytecode can be used instead of traditional backtracking algorithms when regex matching. All these terms are explained in the text.

The reason I like the text so much is that the algorithms are thoroughly presented and explained, with references to original papers from the 1960s by names like Rob Pike and Ken Thompson. It's nice to recognize names "in the wild", and then see examples of just what those people did. Much better than reading their Wikipedia pages imo.

And more familiar (and unfamiliar) names appear as the history is discussed. The algorithm by Thompson was used in the original Unix grep. Alfred Aho (the A in awk) is one of the authors of the infamous Dragon Book, where the technique is discussed, but without clear attribution, as several people have made DFAs and NFAs from regular expressions, without necessarily saying they do (Thompson didn't, he just made the machine code).

Aho is of course the guy from the Aho-Corasick string searching algorithm, which I randomly had to learn at some point to solve a hackerrank-task, but which I mainly remember specifically because the name Aho suddenly appeared everywhere else afterward (I had held the Dragon book, but didn't bother remembering any of the authors at first).

Anyways, the article I shared is part 2/3 of a series, which is my favourite part for reasons discussed above, but you should absolutely read the other parts if you like it.
#009 Dockerfile
Tags: docker, devops, tutorial
Published: 2020-06-13 14:37:46

# Introduction

this is part 9 from the journey it's a long journey(360 day) so go    please check previous parts , and if you need to walk in the journey with  me  please make sure to follow because I may post more than once   in 1  Day  but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.

***

# setup

first go to [DevOpsJourney folder on github](https://github.com/OmarElKhatibCS/DevOpsJourney) .
 {% github OmarElKhatibCS/DevOpsJourney no-readme %} 

![link](https://dev-to-uploads.s3.amazonaws.com/i/7l4wulfaci9iz4fjcuzq.png)

and open terminal then type 

```bash
git clone https://github.com/OmarElKhatibCS/DevOpsJourney.git
cd DevOpsJourney/app_009
```

a look inside the folder

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

now we have the files for this lesson ready to work on.

***

# Dockerfile

A Docker File is a simple text file with instructions on how to build your images.
and he apply the commands from top to down step by step.
And it's good to mention that every step stored as a layer , so if you change something on line 4 , the line 1 to 3 will be cached so he will not execute them.
So the builds will get faster and faster in case of any change.

let's take a look of what inside our Dockerfile in the project that I made special for this part (app_009)

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

let's start break it line by line :
in line 1 I am asking docker to go and get the image of python with tag 3.9-rc-alpine
![tag](https://dev-to-uploads.s3.amazonaws.com/i/kkxxjawyim79deph9ydr.png)

in line 3 I ask him to RUN mkdir
RUN executes the command(s) that you give in a new layer and creates a new image. This is mainly used for installing a new package.

in line 4 , WORKDIR mean that from now all things I do it will be excuted inside the app folder . like cd but it doesn't change until I change the WORKDIR again.

in line 6 COPY mean copy the requirements text from the folder to the image in app folder (COPY FROM TO)

in line 7 it's will run the line "pip install -r requirements.txt" it's an python cmd to install the dependencies listed in the requirements text. (requirements.txt in the app folder inside the image)

in line 9 COPY . . , it means that copy all the folder containing to the app folder ( . mean the folder that I am inside)

in line 10 LABEL is an META DATA , so it give more information about the docker image.

in line 12 CMD is the default command to be run by the entrypoint. It sets default command and/or parameters, however, we can overwrite those commands or pass in and bypass the default parameters from the command line when docker runs.
python app.py is to run the script that I made.
DotNet core code coverage
Published: 2020-06-13 14:34:18

You scanner begin should include the code coverage property

dotnet sonarscanner begin /k:“project-key” /d:sonar.cs.vscoveragexml.reportsPaths=<projectdirectory>\TestResults\*.coveragexml
dotnet build my.sln
dotnet test myTest.csproj --collect:“Code Coverage”
powershell script to convert .coverage to coveragexml
dotnet sonarscanner end
Create CRUD APIs & Deploy in almost no time
Tags: ngrok, jsonserver, node
Published: 2020-06-13 13:57:46

---
title: Create CRUD APIs & Deploy in almost no time
published: true
description: At times, you would need a set of CRUD based APIs super fast & you don't have time or skill to do the same. This post contains content to create a CRUD APIs in no time and no code. Hope you like it.
tags: NGROK, jsonserver, Nodejs
cover_image: https://miro.medium.com/max/800/1*An6Zl1vA6S6nYrFXZvcOXw.gif
---

You are a Front end developer and have no time to wait for your APIs are ready for integration? or You are backend developer and you need really quick server to set up? For a demo, Simple development practises, client reviews, etc.

In this article, we'll learn how to create a simple json based server with minimal or almost no code. Also, we ll learn how to expose the server that is running locally in your machine to outer world. 

## All we need ⚡️
we ll be using two different tool to do this namely json-server & ngrok. This combination really rocks. To achieve this, all we need is _node.js_.

## Let's do it 🚀
- Create a file `db.json`
- Create a list of schema that you would need to do a CRUD operation on. for example, you have wanted to do CRUD for simple todo items, your db.json should look like {"todo":[]} That's all ;-)
- Now run `npx json-server db.json` you can optionally provide `--port=1234`
- now open `localhost:3000` you ll be able to see list of end points available and all the endpoint listed has `GET` `PUT` `POST` `DELETE` HTTP verb exposed.
- To expose these APIs to out side world, run `npx ngrok http 3000`. and wait until you see a black screen which has public url. Any request to the URL will be forwarded to your machine and to json-server.
- Now you can use the APIs which you could do CRUD operations on. 

❌*Please note these APIs will be up and running as long as your machine is running, if you close the terminal or shut down your machine, APIs will stop working as well. Although content will not be deleted as long as you didn't delete db.json*❌

## For more advanced setup, please refer
- ngrok --> https://ngrok.com/
- npm ngrok --> https://www.npmjs.com/package/ngrok
- npm json-sever --> https://www.npmjs.com/package/json-server

Hope you liked the post ;)
I finished the Into to Programming Udacity Nanodegree in one month.  
Tags: codenewbie, python, javascript, 100daysofcode
Published: 2020-06-13 13:54:51

Udacity are currently offering free access to their Nanodegree's for a month. In the month of May (as part of my 100 days of coding challenge) I managed to complete this a receive certification! If anyone is interested in taking on this challenge, please feel free to have a read of my in-depth review of their 'Introduction to Programming' Nanodegree [here](https://medium.com/codingblackfemales/i-completed-udacitys-nanodegree-in-30-days-here-s-how-it-went-d0059992a94f)!
First post, first try Clojure
Tags: clojure
Published: 2020-06-13 13:54:27

# I explore the Clojure language

To program in Clojure i use Emacs with Cider, Lein and Ubuntu 20.04 LTS Operating System

Let's create a new project with the command: **lein new app hello-world**

Open the file hello-world/src/hello_world/core.clj with Emacs
The file contains the classic Hello World program

    (ns hello-world.core
      (:gen-class))

    (defn -main
      "I don't do a whole lot ... yet."
      [& args]
      (println "Hello, World!"))

To run the program: **lein run**

This is the result:
*Hello, World!*
Using !important in CSS
Tags: a11y, css
Published: 2020-06-13 13:43:44

---
title: Using !important in CSS
published: true
description: How to use !important in CSS to improve accessibility.
tags: a11y,css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zwtxmzgqv34auc5lxr0e.png
series: Web Accessibility with CSS
---

**Don't.**

![Blank image placed here to create some dramatic effect before I give an explanation of why !important should be avoided in CSS](https://dev-to-uploads.s3.amazonaws.com/i/95hd8eatk5sxl30henwy.png)

You are still here, so I guess you were expecting a more detailed explanation... here it goes:

The use of `!important` is considered [an anti-pattern](https://uxengineer.com/css-specificity-avoid-important-css/) and [**bad practice**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception). `!important` overrides all other declarations and makes the CSS code more difficult to maintain and debug. The only thing that can override an `!important` is another `!important`, and once you go down that road, it never stops.

From a Web Accessibility perspective, the use of **`!important` is negative because it would [override the end-user defined styling](https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467)**. And there are multiple cases in which users –and especially users with disabilities– may want to override some of the CSS properties (e.g. to enlarge the font size, or change the font-family, or even change the distribution and position of elements in a page.)

What can developers do instead of using `!important`?

- Use more [specific selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity): add the element tag before the class/id name, or a new class name... anything that increases the [specificity](https://specificity.keegan.st/) of the selector.
- Take advantage of the CSS cascade: if needed, restructure the CSS and move the CSS rules, as if two rules have the same specificity, the one that appears later "wins."

---

Note: as specified in the comments, there are some cases in which `!important` may be useful (e.g. [forcing immutability in utility classes](https://csswizardry.com/2016/05/the-importance-of-important/), styling email campaigns, or in the end-user styles), but in general –and for the purpose of accessibility– it is better to avoid `!important` because it takes away power from the users to customize the experience to better fit their needs.

---

**Avoid using `!important` in CSS.**
Last day discount code on book from Sandi Metz
Tags: ruby, oop, products
Published: 2020-06-13 13:43:19

One of my favorite Tech book authors has a special discount on her book "99 Bottles of OOP" and today is the last day to use it. 

[Check it out](https://www.sandimetz.com/) and show your support for one of the giants of fun-loving computer science!
How do you manage anxieties surrounding a first dev job?
Tags: discuss, watercooler, beginners
Published: 2020-06-13 13:41:53

---
title: How do you manage anxieties surrounding a first dev job? 
published: true
description: There are so many feelings that come with landing a first dev job, what advice do you have for first timers? 
tags: discuss, watercooler, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/myxfbd4ygpdnvvy5s2ox.png
---
There are so many feelings that come with landing a first dev job, what advice do you have for first timers?
How to keep all dev files in sync when switching computers constantly?
Tags: git, sync, github, bitbucket
Published: 2020-06-13 13:34:37

---
title: How to keep all dev files in sync when switching computers constantly?
published: true
description: 
tags: git,sync,GitHub,bitbucket
//cover_image: https://direct_url_to_image.jpg
---

We have about 100 projects and need to switch from office to home computer without feeling like anything is left behind on another computer. What is your best way to keep all dev files and assets for many projects in sync across 2-3 computers? I realize git is a potential solution. I just don't know if it's the true solution for the situation, unless it is? We have so many assets and projects being worked on. I can't imagine having to remember to commit on every project and if there's a commit left behind, etc. 

What are your thoughts fellow devs!
100 Days of SwiftUI — Day 23
Tags: 100daysofswiftui
Published: 2020-06-13 13:24:04

---
title: 100 Days of SwiftUI — Day 23
published: true
date: 2020-06-13 13:23:41 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-23/
---

[Day 23](https://www.hackingwithswift.com/100/swiftui/23), so this is the 23rd blogpost. I learned about more details of SwiftUI: Why it uses structs, how to create my own custom modifiers and how I can compose views from different structs, which conform to the `View`-protocol. So, this was interesting, let's see, what tomorrow will bring.
How to (Conveniently) add multiple CSS styles to an Element in Vanilla JS
Tags: javascript, vanillajs, css, tutorial
Published: 2020-06-13 12:28:09

If you want to change a single css property of an element you may do so in the following way:-

```javascript 
  $element.style[propertName] = newValue;
```

Simple. right?

but what if you want to add multiple CSS Styles to an element??
perhaps you may use the `$element.style.cssText` attribute, but then your code will become really nasty and difficult to maintain.

Take a look:-

```javascript
  $element.style.cssText = 'position:absolute;top:0;left:0;color:red;background:blue;padding:10px;margin:5px;';
```
Now You Might Ask, "So...What's the solution to this problem??"

Since `$element.style` is just like any other Javascript Object we can use the `Object.assign` method on it too.

Like this :-

```javascript
  const style = {
   position: 'absolute',
   top: 0,
   left: 0,
   color: 'red',
   background: 'blue',
   padding: '10px',
   margin: '5px'
  };
  
  Object.assign($element.style, style); // easy-peasy
```
As you can see now the code has become more readable and maintainable.

You can go one step further and convert it into a re-usable utility function like this :-
```javascript 
  const style = ($el, obj) => Object.assign($el.style, obj);
  
  // and use it like this

  style($element, { color: 'red' });
```

So That Was It. Thanks For Reading. Do Like This Post and Share It With Your Friends.

JAI HIND! JAI BHARAT!
Daily Developer Jokes - Saturday, Jun 13, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-13 12:00:00

---
title: "Daily Developer Jokes - Saturday, Jun 13, 2020"
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%20Jun%2013%2C%202020"
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/5e1259d7cf335.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:
I went to a street where the houses were numbered 8k, 16k, 32k, 64k, 128k, 256k and 512k. 

It was a trip down Memory Lane.
 -->
5 JavaScript Array Tips and Tricks
Tags: javascript, tutorial
Published: 2020-06-13 11:56:07

Hi Devs!

In this video, I'll be showing you 5 JavaScript Array Tips and Tricks you may or may not know about 💡

You can find the code in the video here: https://gist.github.com/luvuong-le/99de066dca6cc37d44826ef58c8e767a

If you'd like to see more of my videos, [head over to Youtube!](https://www.youtube.com/channel/UCWaB4SBBUCvhYb91fz5Vidg) 

For more content, stay tuned! A follow/sub comes a long way to show support 

Follow and connect with me on:
----------------------------------
🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive