teleren/devto huggingface dataset:
JavaScriptmas!
Tags: html, javascript, css, challenge
Published: 2020-12-23 14:07:53

So that's my first time I use a blog and my first time on this site.
Here I will post my challenges made on [Scrimba](https://scrimba.com/learn/adventcalendar?utm_source=newsletter&utm_medium=email&utm_campaign=javascriptmas_day16&purge=true)
So here they are:
* [Day 1](https://scrimba.com/scrim/co80f41538e136f9b2fb5d582)
* [Day 2](https://scrimba.com/scrim/co72d490098e4e211b462c598)
* [Day 3](https://scrimba.com/scrim/co0d54f77b38ebb6e0936e36d)
* [Day 4](https://scrimba.com/scrim/coe89478e9f1091fe618290a7)
* [Day 5](https://scrimba.com/scrim/co0154f1bbc406e31801a22ab)
* [Day 6](https://scrimba.com/scrim/coa8947c4ba3a1bbbf7363faa)
* [Day 7](https://scrimba.com/learn/adventcalendar/note-at-1-06-co4ce4fab9bee439a1ae0d51a)
* [Day 8](https://scrimba.com/scrim/co11a4f5883ebfc9dd27c241d)
* [Day 9](https://scrimba.com/scrim/cobfc4aebb084b0b9b997296b)
* [Day 10](https://scrimba.com/scrim/coda84599a95190ea834925de)
* [Day 11](https://scrimba.com/scrim/co0c74ea69bb173b5c888c0e8)
* [Day 12](https://scrimba.com/scrim/co2fe4b2eaf034cf7075bab8a)
* [Day 13](https://scrimba.com/scrim/cobba4347baabf85a1d8ab99a)
* [Day 14](https://scrimba.com/scrim/co2634f218232f70798f47de3)
* [Day 15](https://scrimba.com/scrim/coec24578acb0166a12b1d27b)
* [Day 16](https://scrimba.com/scrim/co4264b6fb6a22de4bc5623c8)
* [Day 17](https://scrimba.com/scrim/cob594aec8825bab91035e5f8)
* [Day 18](https://scrimba.com/scrim/cof71416391ae5c419920128a)
* [Day 19](https://scrimba.com/scrim/co05a4587a939b69787c0f95d)
* [Day 20](https://scrimba.com/scrim/co2dd4872be3ce5e099609750)
* [Day 21](https://scrimba.com/scrim/co0b24334b871858610ca7ab4)
* [Day 22](https://scrimba.com/scrim/co30240018ca77066201e5d66)
* [Day 23](https://scrimba.com/scrim/cod1a456197397f5e9fca2e63)
* [Day 24](https://scrimba.com/scrim/co122422e82da823eaeb071a4)
How to Resize Uneven Sized Images without breaking their Aspect Ratio
Tags: css, todayilearned, tutorial, html
Published: 2020-12-23 14:03:38

We often have to work with images that varies in size and aspect ratio. But we have to fit them in a container, and to keep the aesthetic of our design we usually choose to resize all the images into a same size.

But taking the easy way out means we have to deal with this...

```css
img {
  height: 200px;
  width: 200px;
}
```

This is how they look 🥴

![](https://i.imgur.com/TZ5EhRi.png)

The images have killed their aspect ratios to fit in the `height` and `width` and this doesn't really help with the aesthetic.

But did you know that we can fix that by adding just one more line of code in our CSS' `img` property?

```css
img {
  height: 200px;
  width: 200px;
  object-fit: cover;
}
```

Whoo! Our images kept their aspect ratios this time around!

![](https://i.imgur.com/7IOFpTX.png)
Magento 2 VS Shopware 6: What is the Best Fit for Your eCommerce Business?
Tags: ecommerce, magento, shopware, webdev
Published: 2020-12-23 14:03:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f8jzeb1tu3zw9isodzdb.png)
Having an eCommerce store is a new trend for any retail company. However, considering the fact that Internet activity has become an integral part of our life, soon eCommerce websites will be taken for granted.

So what is one of the most important steps to do at the beginning of your eCommerce journey? Choosing the best CMS or content management system. Digital market offers a huge variety of options. 

If the platform your future digital store will be built on is still uncertain, I have two worthwhile suggestions: Magento and Shopware. This article aims to introduce a comprehensive comparison of these two eCommerce giants.

According to recent statistics, websites on Magento cover nearly 12% of the global market, which is a lion’s share. Magento is a choice of such world-famous brands as Ford, Olympus, Jaguar and plus more.

**Shopware** is a German leading software company that has more than 80 000 installations at the time. Recently it has become a worthy alternative to Magento, which is more expensive and complicated in use.

Let’s see what are the differences between these two eCommerce solutions:

#Community

This aspect is quite crucial in situations when you need help in a task to be resolved. Speaking about Magento and Shopware, both platforms are open source, so community is even more important for such cases.

**Magento 2** has more than 150 000 developers all over the world, which makes its community one of the largest. Magento Enterprise users have an opportunity to reach out to the official help desk for assistance. 

**Shopware**’s community comprises over 80 000 specialists. They are mostly from Germany, that’s why the amount is smaller compared to the Magento community that is international.  

#Usability

**Magento 2** has better UI than the previous version. Nevertheless, its interface is still much more complex as it includes thousands of various settings. To figure it out, you have to seek help online or hire a Magento development company, as non-technical users will barely launch a Magento store on their own.

**Shopware**’s good peculiarity is intuitive-in-use admin dashboard. Inexperienced users can easily start using this eCommerce technology and build a good online store. Besides, its backend is competitive with any browser or operating system. 

There are still much more indicators to compare. [This article](https://dinarys.com/blog/shopware-6-vs-magento-2-can-the-new-player-dethrone-the-leading-cms) contains more information that can help you to be done with selecting. Good luck with your eCommerce startup!
how to make a parser?
Tags: parser, howto, explainlikeimfive
Published: 2020-12-23 13:52:32

Ok, i just want to parse stuff and make a small language of my own. so i am wondering what is a simple way of parsing stuff.

i have managed to parse stuff like `4 + 4 * 2` without operation order.

(i mainly couldn't parse parentheses)
10+ CSS Text Glitch Effect
Tags: javascript, webdev, beginners, css
Published: 2020-12-23 13:45:48

---
title: 10+ CSS Text Glitch Effect
published: TRUE
description: 
tags: #javascript #webdev #beginners #css
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x18vighla43u3ztk4894.jpg)

**If You Like This Article then check Out more Examples
[18 CSS Text Glitch Effect](https://gscode.in/css-text-glitch-effect/)**
https://gscode.in/css-text-glitch-effect/

**1.
Title:-	Pure CSS Glitch Effect
Author:-Felix Rilling**

{% codepen https://codepen.io/FelixRilling/pen/vNJoMy %}

**2.
Title:-	Glitch hover effect CSS
Author:-Kevin Konrad Henriquez**
<p>A Glitch hover effect using only css. From <a href="https://ihatetomatoes.net/how-to-create-css-glitch-effect/" target="_blank">https://ihatetomatoes.net/how-to-create-css-glitch-effect/</a></p>

{% codepen https://codepen.io/kkhenriquez/pen/PGvmjm %}



**3.
Title:-	Pure CSS Glitch Experiment (Twitch Intro WIP)
Author:-Tee Diang**
{% codepen https://codepen.io/cybercountess/pen/WNbBxXq %}

**4.
Title:-	CSS Glitch
Author:-Bramus**
<p>CSS hacked/glitch effect</p>

{% codepen https://codepen.io/bramus/pen/EVwYvP %}

**5.
Title:-	CSS Glitch Effect
Author:-Nirajan Basnet**
<p>By using clip-path property, we can create distortion and glitch effect with just CSS3 and HTML5</p>

{% codepen https://codepen.io/nirazanbasnet/pen/RzOwdg %}

**6.
Title:-	CSS Glitch text
Author:-Noureddine Azhar**

<p>A simple css only glitch effect</p>

{% codepen https://codepen.io/noureddinemade/pen/bGdKRRp %}


**7.
Title:-	CSS Glitch Effect
Author:-Savas YILMAZ**
{% codepen https://codepen.io/savasyilmaz/pen/GxMgqB %}

**8.
Title:-	CSS Glitch Shadow
Author:-aMEya**
{% codepen https://codepen.io/mazereeta/pen/dybEVmz %}

**9.
Title:-	[CSS] Glitch Effect
Author:-Ricardo Heiji**
{% codepen https://codepen.io/heij/pen/oNbvBLJ %}



**10.
Title:-	Glitch text with image background
Author:-Marcel Legane**

{% codepen https://codepen.io/marcellegane/pen/GoGVQe %}

**11.
Title:-	Glitched Text (study of The Verge)
Author:-Derek Palladino**
<p>Inspiration: <a href="http://www.theverge.com/a/luka-artificial-intelligence-memorial-roman-mazurenko-bot" target="_blank">http://www.theverge.com/a/luka-artificial-intelligence-memorial-roman-mazurenko-bot</a></p>

<p>The Verge is using content: attr(data-text);  to make sudo-element copy of the text. I decided to try something a bit different and use some simple JQuery to copy the element instead.
The text-shadow works slightly differently too since I am only copying the elements once, I am layering the text shadows to give it that RGB/CRT flicker.
The keyframe animations are copied and altered. 
Great work to the Vox team, the story and development are wonderful. You are a constant inspiration.</p>

{% codepen https://codepen.io/derekjp/pen/ozEdgK %}

**12.
Title:-	Image glitch effect
Author:-Alain**
{% codepen https://codepen.io/AlainBarrios/pen/OEOKgm %}

**If You Like This Article then check Out more Examples
[18 CSS Text Glitch Effect](https://gscode.in/css-text-glitch-effect/)**
https://gscode.in/css-text-glitch-effect/
Wednesday Links - Edition 2020-12-23 🎄
Tags: java, jvm, microservices, spring
Published: 2020-12-23 13:37:07

IDEA 2020.3 you can perform basic calculations in the Search Everywhere (20 sec read) 🔢
https://twitter.com/intellijidea/status/1339888175007682566

ArchUnit 0.15.0 released (2 min read) 🎉
https://github.com/TNG/ArchUnit/releases/tag/v0.15.0

ByteBuffer and the Dreaded NoSuchMethodError (4 min read) 💥
https://www.morling.dev/blog/bytebuffer-and-the-dreaded-nosuchmethoderror

Troubleshooting Native Memory Leaks in Java Applications (2 min read) 💧
https://blogs.oracle.com/poonam/troubleshooting-native-memory-leaks-in-java-applications

Report behind recent Google outage (8 min read) ⬛
https://status.cloud.google.com/incident/zall/20013

Introducing Distributed Load Testing v1.2 (2 min read) 🧪
https://aws.amazon.com/about-aws/whats-new/2020/12/introducing-distributed-load-testing-v1-2

How HTTP Basic Authentication works in Spring Security? (4 min read) 🔐
https://javarevisited.blogspot.com/2018/01/how-http-basic-authentication-works-in.html

JavaMailSender in Integration Tests (6 min read) 📧
https://rieckpil.de/use-greenmail-for-spring-mail-javamailsender-junit-5-integration-tests

Docker on the new M1 preview (30 sec read) 👁️
https://twitter.com/alexellisuk/status/1339868009922490369
Why I think Python is not the best starting language
Tags: discuss, python, beginners
Published: 2020-12-23 13:27:14

You may have recently seen posts and videos along the likes of “*Python: The best starting programming language*” or “*Why you should start with Python*”.

Well, at least I have seen these types of posts, and, just to be clear, I do **love** Python, I really enjoy both its capabilities and its simplicity, but I don’t agree with these posts.

#Why Python is a good language for beginners

I feel the need to first explain why a lot of people say that Python **is** the best starting language, and for that, a small list is probably a good way.

* It has a pretty simple and readable syntax;
* To start a project, you simply need to create a *.py* and that's pretty much it, no need to have a *package.json* or Java's whole file tree;
* It's currently a really famous and sought after language;
* Its learning curve, for the fundamentals, is pretty beginner-friendly;
* It's one of the best languages for automation.

These are, as you all know, very true, and these are some of the things that make Python such an appealing programming language.

And it's why it's a great language to use to make "one-off" scripts and beginner-level small projects easily.

#Why Python is not the best starting programming language

All of the benefits I mentioned above are some of the things that made me want to learn Python, still a newbie though.

However, I was really glad that I didn't start with Python, because it was so much easier to learn than Java and JavaScript (the languages with which I started).

That may seem a bit weird, thinking that the fact that something was really easy, was a bad thing.

Well, it isn't a bad thing, it's a really good thing, but it's not that good when you start to think about programming in other languages, that's when starting with Python might not be ideal.

What I mean is that Python is so much simpler than other languages that, when you eventually want to level up your skills and learn other languages, the learning curve is way steeper than when you were learning Python.

One of the worst consequences of this may be that you simply feel like you're not cut out for other languages or that maybe programming isn't exactly for you, it's un-motivating.

Suddenly, the simple *and* turns into *&&*, you can't forget to use brackets and, for some languages, you keep forgetting to use a semi-column. 

Starting with Python makes it harder to understand and accept the power and capabilities of other languages, because Python feels so much easier.



_-- Writer's Note --_

This is my first article here, maybe kind of a rant, but let me know what you think!

Do you agree with my thought process? Am I being "too harsh"?
What language did you start with?
Failing bootstrap checks in Elasticsearch
Tags: elasticsearch, performance, security
Published: 2020-12-23 13:24:35

Elasticsearch has many settings that can cause significant performance problems if not set correctly. To prevent this from happening, Elasticsearch carries out "bootstrap checks" to ensure that these important settings have been covered. If any of the checks fail, Elasticsearch will write an error to the logs and will not start.

Here's a guide with common bootstrap checks you should know and how to configure your settings correctly to pass the checks successfully. You can read the guide here: https://opster.com/elasticsearch-glossary/elasticsearch-bootstrap-checks/
Thunder & Lightning: Best Drupal Distributions for Media and Publishing
Published: 2020-12-23 13:00:39

Drupal technology is the best option for the Media industry, providing enormous opportunities. That’s the reason why more than 70% of Top 30 Media & Entertainment companies choose Drupal. In this article we’ll drive into the prime Drupal distributions for Media & Publishing website: Thunder and Lightning. These solutions provide numerous modules and ultra-features for the empower editorial processes while reducing the cost of website development. With the help of these Drupal distributions, you can create unique and easy-to-use publishing tools specifically for your business needs.

Drupal Distributions Change The Game
There are many Drupal distributions dedicated to one or another segment or industry. Distributions save your time and, therefore, money. Further works and updates could be made via a package mode as well since all included modules and features have been thoroughly integrated. The only remaining challenge goes to the selection of the most appropriate option. When it comes to Media and Publishing projects, there are two popular Drupal distributions worth your special attention.

Read the full article https://anyforsoft.com/blog/thunder-lightning-best-drupal-distributions-media-and-publishing/
Daily Developer Jokes - Wednesday, Dec 23, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-23 13:00:11

---
title: "Daily Developer Jokes - Wednesday, Dec 23, 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=Wednesday%2C%20Dec%2023%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/5e1258f70cd7f.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:___ Are computers dangerous?

___A:___ Nah, they don't byte. They just nibble a bit.
 -->
Run Postman Collections
Tags: testing, tutorial, beginners, webdev
Published: 2020-12-23 12:53:07

Let’s take a look at some of the advantages of running Postman collections using the Postman Collection Runner and then run an existing Postman Collection.

### **Postman Collection Runner**
Collection Runner allows you to run a set of requests contained in a collection with the following capabilities:

- pass data between scripts
- log request test results
- change the request workflow
- run collections in a specified environment

### **How to run Postman Collections?**
You can run your collections by clicking on the ‘Runner’ button in Postman which will open up a new Collection Runner window.

Then, select your collection, specify the environment, and hit the Run collection button.

![Postman Collection Runner](https://dev-to-uploads.s3.amazonaws.com/i/6du24dujee6r7qh06fl5.png)

This will run all the requests in the collection and show a report like this in the end. In conclusion, Postman Collection Runner is a great way to quickly automate your APIs.

---

### **Check out the video below to learn how to run Postman Collections –**
{% youtube 4U2lbrnrS1A %}

---

#### To learn about API Test Automation using JavaScript, check out my free tutorial series here –
[JavaScript API Test Automation Tutorial Series](https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV)

---

📧 Subscribe to my [mailing list](https://automationbro.com/mailing-list) to get access to more content like this 
👍 Follow @automationbro on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!
What's your attitude towards hype?
Tags: watercooler, webdev, hype
Published: 2020-12-23 12:50:55

---
title: What's your attitude towards hype?
published: true
description: 
tags: watercooler, webdev, hype
cover_image: https://cdn2.unrealengine.com/Fortnite+Esports%2Fnews%2Fchapter-2-season-1-hype-nite-official-rules%2F11BR_HypeNite_InGame_ModeTile-1024x512-8302221eab71b2c51cad606c5bff4549081b5b48.jpg
---
So, another 'X' JS framework just came out, gained some traction and now you see it in every other tweet, post, or youtube video.

Most of the devs have learned the hard way, that trying to master each and every tech can ultimately leave you as a master of none. 

On the other hand, the hype won't usually be there if there wasn't something attractive on the tech it comes from, meaning it would potentially be worth checking out.

How do you normally approach it? Do you always make sure you are among the first ones to check it out and do 'cool' projects or do you not pay much attention to it, focusing on mastering your current stack instead?
Creating a collapsible section with nothing but HTML
Tags: webdev, javascript, html, beginners
Published: 2020-12-23 12:41:27

---
title: Creating a collapsible section with nothing but HTML
published: true
description: Create an expanding and collapsing section with zero dependencies, easy to style and great browser support!
tags: webdev, javascript, html, beginners
series: Web Dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rlp5x64fcpo6s6iay99v.png
canonical_url: https://jordanfinners.dev/blogs/creating-a-collapsible-section-with-nothing-but-html
---

# Contents 
1. [Intro](#intro)
2. [Details](#details)
4. [Examples](#examples)
5. [Summary](#summary)

# Intro <a name="intro"></a>

I love creating User Interfaces (UI) and often times well need a section to expand and collapse for example in a FAQ section.

I used to reach for NPM and install a library to help, until I discovered that you can do this with pure HTML elements!

They aren't perhaps the most obviously named:
- [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
- [summary](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)

They have pretty great [browser support](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Browser_compatibility).

# Details <a name="details"></a>

The details element is the element to contain the content we want to show and hide.
The summary element is caption to describe what is hidden, in an FAQ section this might be the question and the answer is hidden in the details element until it is expanded.

You can toggle the details element open and closed with JavaScript if needed in your use case by setting the `open` attribute on it.

It is also pretty straightforward to style the arrow, you can see this in the example below where I've used an emoji instead but this can be anything you want.

# Examples <a name="examples"></a>

Shut up and show me the code.

{% jsfiddle https://jsfiddle.net/h6wsuzx1/ result,html,css,js %} 

# Summary <a name="summary"></a>

In summary, you can use what browsers give you to create an expanding and collapsing section. 
It will be accessible for all users as its semantic HTML.
It will be super quick to load as there is only HTML and a few lines of CSS.
It will be responsive to any screen size.

Happy building!

What else would you like to see in this Web Dev series?