teleren/devto huggingface dataset:
Dr. Strange Eye of Agamotto | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-21 00:49:12

In today’s tutorial, we create Dr. Strange Eye of Agamotto with CSS. 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 Marvel inspired. You can check them out [here](https://codepen.io/collection/Yyeoqb).

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

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

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

### 🌎 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/)
The Flash Logo | Pure CSS
Tags: codepen, css, tutorial, showdev
Published: 2022-05-21 00:46:28

In today’s tutorial, we create The Flash logo with CSS. 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 Superhero 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/LYQxpzd %}

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

### 🌎 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/)
Green Lantern | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-21 00:42:48

In today’s tutorial, we create a Green Lantern logo with CSS. 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 Superhero 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/ZErLGRz %}

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

### 🌎 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/)
Breaking out a nested loop in Python
Tags: python, programming, tutorial, beginners
Published: 2022-05-20 10:11:24

Let's have a look at nested loops in Python!

How can we break out of both loops with code on the inner loop?

```python
for i in range(1, 4):
    for j in range(1, 4):
        if j == 2:
            break # But please also break the outer loop!
        print(i, j)
```

## `else` block

One solution with an 𝚎𝚕𝚜𝚎 block:

If we are not stopped by any 𝚋𝚛𝚎𝚊𝚔 in the inner loop (that's what 𝚎𝚕𝚜𝚎 means), the rest of the outer loop will not be executed (𝚌𝚘𝚗𝚝𝚒𝚗𝚞𝚎)
If we are, the outer loop is terminated (𝚋𝚛𝚎𝚊𝚔), too

```python
for i in range(1, 4):
    for j in range(1, 4):
        print(i, j)
        if j == 2:
            break
    else:
        continue
    break
```

## `itertools`

That doesn't look very pretty and anyone who sees that code has to think twice about it.

So, here is a more elegant solution using 𝚒𝚝𝚎𝚛𝚝𝚘𝚘𝚕𝚜

The 𝚙𝚛𝚘𝚍𝚞𝚌𝚝 method boils down our two loops into one:

```python
import itertools
for i, j in itertools.product(range(1, 4), range(1, 4)):
    print(i, j)
    if j == 2:
        break
```

## A custom generator function

Using a generator function, we can replicate the behaviour of 𝚒𝚝𝚎𝚛𝚝𝚘𝚘𝚕𝚜' 𝚙𝚛𝚘𝚍𝚞𝚌𝚝 method.

The 𝚢𝚒𝚎𝚕𝚍 keyword makes the result of your function a generator.

```python
def generator(outer_iterable, inner_iterable):
    for i in outer_iterable:
        for j in inner_iterable:
            yield (i, j)

for (i, j) in generator(range(1, 4), range(1, 4)):
    print(i, j)
    if j == 2:
        break
```



## Follow the discussion on Twitter

{% embed https://twitter.com/bascodes/status/1527590539796918272 %}
AlmaLinux now available on Oracle Cloud Marketplace
Tags: oracle, cloud, linux, opensource
Published: 2022-05-21 00:37:35

Did you know that Oracle has a cloud? Yup, that Oracle. It's pretty cool too.

We're pleased to announce that AlmaLinux images are now available on [Oracle's OCI Marketplace](https://cloudmarketplace.oracle.com/marketplace/en_US/homePage.jspx) for both [x86_64](https://cloudmarketplace.oracle.com/marketplace/en_US/listing/125544666) and [aarch64](https://cloudmarketplace.oracle.com/marketplace/en_US/listing/125567282) architectures.

Thousands of developers around the world rely on Oracle technology and applications to fuel their applications, projects and businesses. Their massive, global developer network relies on Oracle Cloud to help them build some pretty amazing things. If you wanna see just some of these examples, check out some of the content from [Pi Day](https://developer.oracle.com/piday/?pcode=WWMK211110P00127&SC[%E2%80%A6]::::RC_WWMK211110P00127:Pidayreplay=&source=:ex:pw:::::RC_WWMK211110P00127:Pidayreplay). That's just scratching the surface, as many enterprise customers rely on the Oracle stack, as well as increasing number of organizations relying on OCI as part of a multi-cloud deployment strategy. They too now have access to the community owned and governed, forever-free enterprise-grade distribution they deserve and have been asking for.

Another element of our collaboration is our long standing friendship with our partners [Ampere Computing](https://amperecomputing.com/). Ampere are OCI's hardware provider for their A1 instance types, which are aarch64 architecture. Ampere has some of the fastest, highest performing processors on the planet and above all that, they're also more energy efficient. It's no surprise they are the first "Cloud Native" processor. We'd like to thank their team for work with us on this again and providing awesome technical guidance and just all around collaboration.

Thanks go out to the Oracle Cloud team as well. They have been working hard on engaging more with open source communities and we're glad to be able to work with them on this collaboration as well. Check out AlmaLinux on [Oracle Cloud's Free Tier](https://www.oracle.com/cloud/free/?source=CloudFree_CTA1_Default&intcmp=CloudFree_CTA1_Default) and let us know what you think.
Star Wars Stormtrooper | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-21 00:23:45

In today’s tutorial, we create a Stormtrooper with CSS. 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 are Star Wars inspired. You can check them out [here](https://codepen.io/collection/GoNBRq).

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

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

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

### 🌎 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/)
Star Wars Darth Vader | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-21 00:20:57

In today’s tutorial, we create the infamous Darth Vader with CSS. 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 are Star Wars inspired. You can check them out [here](https://codepen.io/collection/GoNBRq).

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

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

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

### 🌎 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/)
Star Wings X-Wing | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-21 00:06:41

In today’s tutorial, we create a Star Wings X-Wing with CSS. 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 are Star Wars inspired. You can check them out [here](https://codepen.io/collection/GoNBRq).

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

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

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

### 🌎 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/)
Marvel's Captain America Shield | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-20 23:56:41

In today’s tutorial, we create the iconic Captain America Shield with CSS. 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 are Marvel inspired. You can check them out [here](https://codepen.io/collection/Yyeoqb).

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

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

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

### 🌎 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/)
Day 42: Article 4 out!
Published: 2022-05-20 23:53:49

Hi!
Today I published a new article about redux and I learned a lot myself when I was working on it as I had been struggling with redux for months but today after publishing that article I was able to work on the task that I postponed about setting up redux in my personal project in minutes with no problem at all which is great
considering past articles I was writing an article in 10 days but I took only 4 days to write this one even if it is a the biggest so far and was the most challenging. that would be something to be proud of too
Tomorrow I don't plan to do much I want to take some free time to relax I will start to look deeply into Material UI as I had now started working on designs implementation I will be doing some basic exercises with Material UI. I also think the next article will be a series about github actions CI/CD before I start writing more about React 
I think that is enough for today let me run 
Signing off...
Marvel's Iron Man Arc Reactor | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-20 23:50:59

In today’s tutorial, we create a Iron Man Arc Reactor with CSS that continually runs with the help of `keyframes`. 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 are Marvel inspired. You can check them out [here](https://codepen.io/collection/Yyeoqb).

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

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

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

### 🌎 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/)
Code Smell 133 - Hardcoded IF Conditions
Tags: webdev, beginners, tutorial, programming
Published: 2022-05-20 23:42:12

*Hard coding is fine. For a short period of time*

> TL;DR: Don't leave a hardcoded mess on IFs.

# Problems

- Testability

- Hardcoded values

- Open/Closed Principle Violation

# Solutions

1. Replace all [IFs](https://dev.to/mcsee/how-to-get-rid-of-annoying-ifs-forever-1jfg) with a dynamic condition or [polymorphism](https://dev.to/mcsee/how-to-get-rid-of-annoying-ifs-forever-1jfg).

# Context

Hard-coding *iF* conditions is great when doing [Test-Driven Development](https://dev.to/mcsee/tdd-conference-2021-all-talks-1559).

We need to clean up stuff.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/894c442e034658ee3a6d602c1dcfcca4)
```csharp
private string FindCountryName (string internetCode)
{
  if (internetCode == "de")
    return "Germany";
  else if(internetCode == "fr") 
    return "France";
  else if(internetCode == "ar")
    return "Argentina";
    //lots of elses
  else
    return "Suffix not Valid";
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/5d45c77d532eb370ca6b78606c0db05e)
```csharp
private string[] country_names = {"Germany", "France", "Argentina"} //lots more
private string[] Internet_code_suffixes= {"de", "fr", "ar" } //more
 
private Dictionary<string, string> Internet_codes = new Dictionary<string, string>();

//There are more efficient ways for collection iteration
//This pseudocode is for illustration
int currentIndex = 0; 
foreach (var suffix in Internet_code_suffixes) {
  Internet_codes.Add(suffix, Internet_codes[currentIndex]);
  currentIndex++;
}

private string FindCountryName(string internetCode) {
  return Internet_codes[internetCode];
}
```

# Detection

[X] Automatic 

By checking If/else conditions we can detect hard-coded conditions.

# Tags

- IFs

# Conclusion

In the past, hard-coding was not an option.

With modern methodologies, we learn by hard-coding, and then, we generalize and refactor our solutions.

# Relations

{% post https://dev.to/mcsee/code-smell-36-switch-case-elseif-else-if-statements-h6c %}

{% post https://dev.to/mcsee/code-smell-102-arrow-code-4kfk %}

# More Info

- [How to Get Rid of IFs forever](https://dev.to/mcsee/how-to-get-rid-of-annoying-ifs-forever-1jfg)

- [Test Driven Development](https://dev.to/mcsee/tdd-conference-2021-all-talks-1559)

# Credits

Photo by [Jessica Johnston](https://unsplash.com/@jdjohnston) on Unsplash

* * *

> Don't be (too) clever. My point was to discourage overly clever code because "clever code" is hard to write, easy to get wrong, harder to maintain, and often no faster than simpler alternatives because it can be hard to optimize.

_Bjarne Stroustrup_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
I've made my first NPM package. Why haven't you yet ?
Published: 2022-05-20 22:26:27

Until not so long ago, every new project of mine always started with a **copy/paste of some utils.js** file I made in the past.

**I'm sure I'm not the only one**, and I'm sure most of you are lazy enough (like I was) to keep doing that instead of what you should do: putting that code in a standalone library.

**First of all, code evolves during time**
Sometimes I needed to update that code I just copied to take care of a new edge case, and at the end I found myself having multiple versions of the same functions.
And this without even considering bug fixes...

**Second, this made me a better developer**
Knowing that those functions could eventually evolve in the future inside other projects, I never took the time to rewrite them in typescript or write for them a good documentation.

**Third, I learned something new during the process**
This was my first Npm Package. I learned something new doing it. Isn't this always a win?

So better code, new skills, and why not a new line to put on the cv.

I'm almost proud of the documentation I've put together for my code, so I'm sharing it with you guys:

Npm: https://www.npmjs.com/package/js-math-and-ui-utils
GitHub: https://github.com/AlessandroCipolletti/my-js-math-and-ui-utils

![rick almost proud](https://c.tenor.com/SPZDWMLgA0gAAAAM/rick-kiss-rick-and-morty-kiss.gif)


PS: I'm not putting here any tutorial link. I bet you all know how to use google.
Facing daunting tasks..
Tags: dotnet, beginners, help
Published: 2022-05-20 22:23:38

Haven't posted in a while but for a good reason since I finally got a proper job in IT. Small company that, like most of its kind around here, specializes in some sort of ERP software but will do mostly anything your business needs; that includes POS setup for hotels and such, as well as setting up the infrastructure like physical servers and networks, Office 365 and all its components, etc.

The main ERP we work with is called Primavera. Very modular and it can handle HR, everything related to sales/purchases/stocks, aftersales support. Comparable to Sage or SAP I reckon.

We are now helping some customers upgrade from v9 to v10, which is usually not a problem except some of them have custom built classes and functions that work inside the ERP itself.
Here's the catch: v9 uses VBA in all it's glory, with the editor inside the ERP itself and where the code runs as Macros (much like Excel), and v10 was fully converted to C# and you write .dll's that you then upload and use inside the program.
As a novice programmer, I'm slowly grasping the intricate web of code that makes up what's available for me to tinker but it sure is a challenge. For some ungodly reason the documentation is crap or non-existent and I'm drowning in complex code.

The question to you more experienced with this kind of stuff is:
How do you delve into something as complex as a 20yo program with minimal guidelines on what to look for? Do you have a good method or tools to help with this? Any words of encouragement? :)

Thanks fellas
Former FB Engineer Answers Your Questions About Programming Interviews
Tags: programming, help, discuss, career
Published: 2022-05-20 22:09:15

In this video, a former Facebook engineer shares his tips and advice on how to prepare for programming interviews. Let us know if you have any additional questions in the discord: **[discord.gg/Xsbnmt4N](https://discord.gg/Xsbnmt4N)**

Check it out here: **[youtube.com/watch?v=_Fu2oiGHyVU&t=2804s](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=2804s)**

Additional resources to help you get started:

**[Best Coding Interview Resources](https://www.hackpack.io/blog/resources/best-coding-interview-resources)**

**[How to approach every programming interview regardless of the topic](https://fangprep.substack.com/p/the-coding-interview-pt-1-inspect?s=w)**

**[Big Tech Interview Tips Newsletter](https://fangprep.substack.com/)**

Looking for a study partner? Apply to join a community of Engineers studying for programming interviews: **[Hackpack.io](http://hackpack.io/)**
Why HTML is important for every website
Tags: html, htmltags, semantics
Published: 2022-05-20 21:47:42

TML is the acronym for Hypertext Markup Language which is used to design web pages. In other words, HTML is used to give structure to web pages displayed on World Wide Web. HTML contains tags that facilitate the presentation of content on the web in a manner that is both readable to the user, and understandable to the browser. Such tags are called semantic tags. A semantic tag communicates the right meaning of a block of code to the browser and helps in improving rendering, even to the screen reader.

So, apart from mere presentation, these tags provide additional meaning to the element. The browser uses the same to render the element to the client correctly. A good example is a `<h1>` tag that represents a heading. Users know what a heading is, and the browser can properly display it with the right semantic (`<h1>`). A few others are `<blockquote>`, `<code>`, and `<em>`.
 
Conversely, tags like `<b>` and `<i>` are non-semantic as they are only concerned with how the text looks. The significance of semantic HTML is the goal of every web page - communication. Semantic tags make it clear to the browser the meaning of a page and its content. This is simultaneously communicated to the search engines to provide the right content when needed. Below is a basic web layout in HTML:

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<header>
<h1>My First Webpage</h1>
</header>
<main>
<p>I welcome you all to this page</p>
<p>Kindly fill out this form to subscribe to my weekly newsletter</p>
<form action="#">
<label for="username">Enter your fullname here:</label>
<input type="username" id="username" name="newsletter">
<label for="email">Please provide a valid email address:</label>
<input type="email" id="email" name="newsletter">
<button>Submit</button>
</form>
</main>
</body>
</html>
```
The image below shows a list of HTML tags. The list is never exhaustive but it is helpful for beginners in web development.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxne32krnzf78xa2zkuz.jpg)

cover image: [1training.org
](https://www.1training.org/blog/html-css-javascript-web-development/)