teleren/devto huggingface dataset:
devtools on low resolution monitors
Tags: productivity, webdev, ux, discuss
Published: 2021-05-28 12:00:28

Finding a low resolution monitor is rare still let me take chance and see if it helps anyone.

As as front-end having a low resolution slows you down a tiny bit at-least. tried various ways to place the chrome devtools left, right, separate window, nothing seemed to work. I mostly face issues with screen width when I want to debug JS and look at the UI state. Keeping the responsive UI >1024 and having a decent view on my js code as well.

So finally there is one around other than having to high res monitor 😉.

There is an option on the dev tools to add a custom device where you enter the fixed resolution.

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

Make use of the zoom level to your comfort. 
This way it helps to keep your UI fixed resolution while you re-size the dev tools window.

Code on!
Photo by [patricia serna](https://unsplash.com/@sernarial?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Daily Developer Jokes - Friday, May 28, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-28 12:00:09

---
title: "Daily Developer Jokes - Friday, May 28, 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=Friday%2C%20May%2028%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/5e1259033bf63.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:___ How many developers does it take to change a light bulb?

___A:___ None. It's a hardware issue
 -->
Learn CSS with me !
Tags: css, css3, webdev, codenewbie
Published: 2021-05-28 11:53:17

# Welcome to Learn CSS with me!

Hey Everyone !

I'm going to start a CSS series. 
This series breaks down the fundamentals of CSS into easy to understand chunks. Over the next blogs in this series, you'll get to know about the core aspects of CSS and how we can effectively use them in your projects.

In this series we will cover box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you'll learn about functions, color types, gradients and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.

This series is for beginner and learners. You can go through the series from start to finish to get a general understanding of CSS from top to bottom, or you can use it as a reference for specific styling subjects. For those new to web development overall, check out the [intro to HTML course](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) from MDN to learn all about how to write markup and link your stylesheets.

Here what this series will contain.

1. Box Model

2. Selectors 

3. Inheritance 

4. Color

5. Sizing Units 

8. Layout 

9. Flexbox

10. Grid 

On the way to add many more …..

Stay tuned for next blogs in the series.
<hr>
If you see any mistake in the blog feel free to correct me please. Or if something is not understood or seems meaningless to you please refer [this](https://developer.mozilla.org/en-US/docs/Web/CSS).
<hr>

Written and edited by [me](https://twitter.com/garimaasharma_) ❤

<a href="https://www.buymeacoffee.com/garimasharma"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=garimasharma&button_colour=FF5F5F&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00" /></a>

<a href="https://www.buymeacoffee.com/garimasharma"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=garimasharma&button_colour=FF5F5F&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00" /></a>
Schedule chicken: impasse
Published: 2021-05-28 11:44:34

_English translation [here](https://dev.to/marciofrayze/schedule-chicken-i0c)._

Às vezes nos deparamos com situações em que duas ou mais pessoas estão atuando com um objetivo em comum e existe uma dependência mútua para a entrega: o trabalho de uma pessoa não poderá ser implantado sem que a outra cumpra o acordado e vice versa. Neste cenário, se uma das pessoas atrasar sua parte, toda a entrega fica comprometida. 

Dependendo da cultura da empresa, essa pessoa que atrasou poderá sofrer algum tipo de punição. Vai ter que se explicar em detalhes, sofrerá pressão para entregar o mais rápido possível, e em situações mais extremas corre o risco de não ser promovida ou até mesmo demitida. 

Mas o que acontece quando todas as pessoas envolvidas sabem que o prazo acordado não será cumprido?

Por medo (falta de [coragem](https://dev.to/marciofrayze/coragem-4l94)?), ninguém quer ser a primeira pessoa a dar a notícia e entram em uma situação de impasse, conhecida como _Schedule chicken_. Todas ficam aguardando, na expectativa de que outra pessoa seja a primeira a dizer que não será capaz de entregar o que foi acordado, fazendo com que seja prorrogada a data de entrega de todas, deixando com que a pessoa que trouxe a informação a tona seja responsabilizada e eventualmente penalizada pelo atraso sozinha.

Este impasse pode se prolongar até o prazo final, o que piora toda situação, já que neste momento as pessoas envolvidas serão obrigadas a enfrentar a realidade em uma situação em que já não podem ter nenhuma ação para contornar o problema. O resultado só pode ser um: o projeto irá atrasar e a cliente só vai ser informada disso no mesmo dia que esperava receber a entrega. 

Caso este tipo de situação seja recorrente, um efeito comum a longo prazo é a cliente perder a confiança no time. A consequencia pode ser a imposição de contratos mais rígidos, microgerenciamento ou outras práticas que são prejudiciais para ambas as partes.

## Conclusão

É muito importante sempre darmos [feedback](https://dev.to/marciofrayze/feedback-2eol) para a cliente o mais rápido possível, controlando suas expectativas. Quando somos mais transparentes e corajosas, podemos resolver este tipo de situação descritas neste artigo de outras formas, sendo a mais óbvia diminuir o escopo da entrega e revendo as prioridade da cliente. Ou, em outras palavras, trabalhando de uma forma ágil, nos adaptando às inevitáveis mudanças que encontramos ao longo do processo de desenvolvimento de software.

Normalmente o _Schedule chicken_ acontece em um ambiente onde a cultura de transparência não é incentivada e uma forma eficiênte de mitigar isso é aplicando as práticas da [Programação Extrema](https://www.martinfowler.com/bliki/ExtremeProgramming.html).

## Referências
* Livro [Planning Extreme Programming](https://www.goodreads.com/book/show/67839.Planning_Extreme_Programming), Kent Beck e
Martin Fowler (página 33).
* https://en.wikipedia.org/wiki/Schedule_chicken
How to add syntax highlighting to markdown code blocks
Tags: markdown, tutorial, quicktip, devquicktip
Published: 2021-05-28 11:14:36

Maybe I’m just late to the party, but the other day I learned how to add syntax highlighting in markdown code blocks – and it was almost life changing! Ok, I might be exaggerating a little bit – but it do make your code snippets more readable. :grin: And a lot of developer communities accept markdown in comments (and in posts) like dev.to, github etc.

Since I’m so excited about this I thought I should share it! And hopefully some of you will learn something new today 😀

Adding syntax highlighting is really easy, the only thing you have to do is **add the programming-language after the first three back-ticks**.

Like this:

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

And here on dev.to the above markdown will be displayed like this:

### Below is an empty codeblock
```
```

### Below is a codeblock with javascript - without syntax highlighting
```
const myFunction = () => {
    console.log("This is my function");
}
```

### Below is a codeblock with javascript - with syntax highlighting
```javascript
const myFunction = () => {
    console.log("This is my function");
}
```

### Below is a codeblock with powershell syntax highlighting
```powershell
Connect-PnPOnline "yourtenantURL" -Interactive

Get-PnPTenantAppCatalogUrl
```

***
Did you find this article usefull? [Follow me on twitter](https://twitter.com/acupof_dev) to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below.

Thank you for reading, and happy coding! 🙂

/Eli
Magento 2 uncancel order By Addify
Tags: magentoextension, restorecancellorder, addifyuncancellorder
Published: 2021-05-28 11:13:27

Magento 2 covers a wide range of E-commerce development markets. We at Addify develop premium quality magento extensions and one of them is Magento 2 restore cancel order. This Magento 2 restore canceled order extension by Addify enables you to restore canceled orders of your website in a few clicks. In other words,  You can now easily undo a cancelled order with the time it takes from a few clicks of a button. The extension will help you to restore to the original state. Similarly, it also offers you some more functionality, Example you can recover an individual purchase request from the order view page. Click on the link https://addify.co/product/restore-cancelled-order/ for more detail about the product
Ways to Build a Mobile App - Low Level Coding
Tags: android, ios, javascript, webdev
Published: 2021-05-28 11:11:59

As the name implies, building an app using this method requires coding knowledge. If you don't know how to code. you'll either have to learn it or hire a developer. While I don't want to discourage you from learning a new skill, the first app you code on your own probably won't be suitable for mass distribution. But if the app isn't for your business and you want to improve your technical ability, then go for it.

Otherwise, hiring a development team will be your best option here. Low-level coding will always be the most expensive and time-consuming development method. Why? Allow me to quickly explain.

Most people want their apps available on Android and iOS devices. But this requires you to code in two different languages-essentially building two completely separate apps (one for each operating system).

So at a minimum, you'll need an Android developer and iOS developer. Most development teams also consist of a web developer, designer, QA manager, and project manager. Once your app is built, you'll still need to retain the developers to maintain your app. The labor adds up quickly.

If you're creating a game, augmented reality app, or trying to develop the next Facebook, low-level coding will be your best option. This method gives you the most control over your app, but it comes at a price.
How to Fix : Migrating WordPress 404 Error
Tags: wordpress, issues, allinonemigrations, migrations
Published: 2021-05-28 11:02:49

```
sudo nano /etc/apache2/apache2.conf
```
Scroll down until you find Directory /var/www/>. 
Change AllowOverride None to AllowOverride All. Save the file and quit (Ctrl + X and and Y).


### Enable mod_rewrite for .htaccess

```
sudo a2enmod rewrite
```
Restart the server
```
sudo systemctl restart apache2
```
This is what worked for me and hope it'll work for you too.
TIL that there is a else-clause in a Python for-loop
Tags: todayilearned, code, python
Published: 2023-05-19 20:39:23

---
title: TIL that there is a else-clause in a Python for-loop
published: true
date: 2021-05-28 10:48:00 UTC
tags: TIL,code,python
canonical_url: https://www.zufallsheld.de/2021/05/28/til-that-there-is-a-else-clause-in-a-python-for-loop/
---

In Python if you want to execute something after a for-loop has finished, you can use a else-clause.

This code:

```
for i in range(5):
    print(i)
else:
    print("Finished")

```

Prints:

```
0
1
2
3
4
Finished

```
Toppik Espana – Website Develoed By Laravel Lions
Tags: laravel, php, webdev
Published: 2021-05-28 10:39:33

**Toppik espana** is an online hair products and hair fibers selling company in the Spain that offers good quality of products. They approached us with an ecommerce site whose design and development language was outdated compared to existing trends and designs, with the goal of expanding their business, they decide to revamping their website as their first step.

After analyzing the basic flow of the website it was essential for our team to decide the task that needed to be divided within the team. We had to complete the design as well as development the website within a time limit.

Existing website already contained most of the components, so it was easier to decide the sections that needed to be placed on different pages.

We improve overall site architecture and navigation to enable easier browsing and a more frictionless experience.

We create a more user-friendly and more visual product story with improved navigation and filtering. Reorganize content throughout the product to improve conversion the trust building.

Implement a fully responsive solution with improve SEO performance.

**Website developed By Laravel Lions.**

[Hire Laravel Develoeprs](https://www.laravellions.com/hire-laravel-developers/) from Laravel Lions.
Ask for help
Tags: motivation
Published: 2021-06-18 13:00:13

---
title: Ask for help
published: true
date: 2021-05-28 10:39:33 UTC
tags: motivation
canonical_url: https://blog.mastykarz.nl/ask-for-help/
---

![#47 Ask for help](https://blog.mastykarz.nl/assets/images/2021/06/help.jpg)

If you’ve been doing something for a long time, it’s scary to ask for help. "What would they think? Shouldn’t I know this? What about my image?"

You don’t know everything. No one does. If you think you do, and you never ask others for help or opinion you don’t learn. You merely repeat what you already know.

If you’re not used to it, asking for help feels uncomfortable. But it’s worth it. It’s human and that’s how we learn. And any concern you might have against asking for help is nothing but words in your mind. Next time you have the chance, ask for help and notice the other person’s reaction.

What are you working on? What do you need help with?

<small>Photo by <a href="https://unsplash.com/@heftiba">Toa Heftiba</a> on Unsplash</small>
Create a search bar spotlight modal with JS
Tags: javascript
Published: 2021-05-28 10:30:46

```
buildSearchSpotlight() {
        this.spotlightModal = document.createElement('DIV');
        this.spotlightModal.setAttribute('id', 'spotlightModal')
        this.spotlightModal.classList.add('hidden');
        this.searchBar = document.createElement('INPUT');
        this.searchBar.setAttribute('id', 'search-box')
        this.searchbarWrapper = document.createElement('DIV');
        this.searchbarWrapper.appendChild(this.searchBar)
        this.spotlightModal.appendChild(this.searchbarWrapper);

        // Add styling
        this.spotlightModal.style.position = 'absolute'
        this.spotlightModal.style.width = '100vw'
        this.spotlightModal.style.height = '100vh'
        this.spotlightModal.style.left = '0'
        this.spotlightModal.style.top = '0'
        this.spotlightModal.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'
        this.spotlightModal.style.display = 'flex'
        this.spotlightModal.style.justifyContent = 'center'
        this.spotlightModal.style.padding = '40px'

        this.searchBar.style.height = '50px'
        this.searchBar.style.width = '600px'
        this.searchBar.style.borderRadius = '10px'

        document.body.appendChild(this.spotlightModal);

        // Add event listeners
        this.spotlightInitiator.addEventListener('click', e => {
            this.toggleSpotlight()
        })

        this.spotlightModal.addEventListener('click', e => {
            this.toggleSpotlight()
        })

        // Stop the clicking of the search bar closing the modal
        this.searchBar.addEventListener('click', e => {
            e.stopPropagation()
        })
    }
```
Praktisches Tool zum Erstellen von Quiz
Tags: quizerstellen
Published: 2021-05-28 10:22:22

Bleiben Sie über die Leistung Ihrer Lernenden auf dem Laufenden. Testen sie online und erhalten Sie detaillierte Ergebnisse über ihre Vorschritte.

Mehr Info > https://www.ispringlearn.de/ispring-suite/quiz
Online-Quiz erstellen: Die 7 besten Tools
Tags: quizerstellen
Published: 2021-05-28 10:19:13

Wenn Sie auf der Suche nach einer App sind, mit der Sie Online-Quiz erstellen können, und sich von der Vielfalt verschiedener Funktionen überwältigt fühlen, kann dieser Artikel Ihnen helfen. Wir haben 7 beliebte Tools für die Erstellung von digitalen Quiz und Assessments ausgewählt und einen detaillierten Vergleich vorgenommen. Finden Sie heraus, welches Tool zu Ihren täglichen Aufgaben und Arbeitsabläufen am besten passt.

Mehr lesen > https://www.ispringlearn.de/blog/quiz-erstellen
SharePoint 2019 Migration Approach
Published: 2021-05-28 10:19:00

[Get Your Free Copy Now](https://go.softwebsolutions.com/resources/sharepoint-2019-migration-approach.html)
**SharePoint 2019** is Microsoft’s latest iteration. And there are several reasons why you should migrate to it. SharePoint 2019 aims to improve the SharePoint experience for on-premises and hybrid users. It offers many new features such as SharePoint home sites, modern team and communication sites, lists and libraries, user-friendly pages, web parts and authoring, suite navigation and app launcher as well as a simplified sharing experience.

Migrating from an older version to the all-new SharePoint 2019 requires an ideal migration plan. It can be a tedious process, which can end up with loss of data and issues with custom web parts if the migration is not executed properly.

This is why our [SharePoint experts](https://www.softwebsolutions.com/sharepoint-development.html) have developed a pre-migration check process to ensure that your migration process is smooth and error-free.
Untangling Composition and Higher Order Components in Svelte
Tags: webdev, svelte, javascript, architecture
Published: 2021-05-28 10:18:01

I recently gave a short talk as part of Svelte Summit Sprint 2021. 
It is a super concise yet deep dive into common components composition patterns and how to implement them in Svelte, including multiple examples you can play with yourself in the REPL (links below).
This is a topic that's close to my heart because coming from React, I initially struggled to understand how I can get the same level of composability from Svelte.
<br/>
You can watch my 11 minutes talk [HERE](https://youtu.be/fnr9XWvjJHw?t=3471) (starts at the correct timestamp).
<br/>

#### The examples we’ve covered:

- [Visual enhancement - simple dialog HOC](https://svelte.dev/repl/9064a8e06ad64609b0518edecaa6b6ca?version=3.37.0)
- [Mouse tracker HOC using slot props](https://svelte.dev/repl/0a0a27d5c5c54569a1de403431ff6301?version=3.37.0)
- [Mouse tracker HOC using svelte:component](https://svelte.dev/repl/013564d7760841edbf46a4efe7271f14?version=3.37.0)
- [List HOC using slot props](https://svelte.dev/repl/1488bc582eb04dda94dfdbd7a3dfef25?version=3.37.0)
- [List HOC using svelte:component](https://svelte.dev/repl/028674733f67409c94bd52995d5906f1?version=3.37.0)
 

#### Bonus examples:

- [Using CSS variables to dynamically style slotted elements](https://svelte.dev/repl/6ee34efa8b57411faf6bccb24e3f95a9?version=3.37.0)
- [Render props](https://svelte.dev/repl/37699ffa336b444e884d592c6d867be6?version=3.37.0)

<hr />
Special thanks to my colleague, Dune Thomas, for his help in making this
¿Se puede ver el contenido de la etiqueta HEAD renderizado en una web?
Tags: html, css
Published: 2021-05-28 09:53:18

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

Hay una cuestión que yo llevo oyendo en este mundo del frontend desde hace muchos años, una de esas verdades que nunca cuestionas y que se dan por sabidas, y es que el único contenido de una web que se renderiza en el navegador es el que se inserta en el interior de las etiquetas `body`.

Pues bien, hace unos días, repasando conceptos básicos del html, pude comprobar que esta cuestión tan básica y que siempre hemos dado por sabida, no es cierta. Hice un experimento muy sencillo, cree una web muy básica (solo con un `title`, un `h1` y un `p`), y abrí el inspector de código de mi navegador. Allí pude comprobar que las etiquetas `head` y `title` tienen establecido un valor de la propiedad css `display: none;` Es decir, que sólo con cambiar el valor de esa propiedad en las dos etiquetas a `block` o `inline`, por ejemplo, podrás ver renderizado el contenido del elemento `title` en el navegador (haz la prueba y verás).

Cuestión aparte es la utilidad práctica que pueda tener esta característica, que yo desconocía hasta hoy. Me queda pendiente de resolver la duda respecto a qué utilidad en relación al SEO de la página (por ejemplo) puede tener el hecho de que el `title` pueda estar renderizado, si nos interesaría utilizar ese `title` sustituyendo al `h1` inicial o si los motores de búsqueda darán mayor/menor importancia al hecho de que el título de la página esté renderizado.
How to Use the Linux Command Line Like a Pro
Tags: linux
Published: 2021-05-28 10:09:03

Learn how to use the Linux command line to save time and run commands faster. If you use a Unix-based operating system, such as Linux or macOS, you’re probably familiar with the shell, also called the command line. 

The shell lets you interact with your system by entering commands that perform actions. When it comes to mastering the shell, there are a lot of possibilities for streamlining your work.

![learn linux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfxxm8l0nkr587q0b24p.gif)

Linux shells are a thing of beauty. They are the command line interfaces that power servers, minicomputers, supercomputers, embedded systems - and they are one of the most powerful tools in a system administrator's arsenal.

A lot of tech professionals use the command line to do their job.

Learning to use the Bash command line on a Linux-based operating system will change your life. It will save you hours of frustration and anger, level up your career, and improve your life in many other ways. If you want to practice the command line, I recommend [this site](https://practicelinux.com/)

## Show me the power

**Servers**

If you use a server or web server for your project, it most likely runs on Linux. You can connect to the server using [ssh](https://en.wikipedia.org/wiki/Secure_Shell) and control it using commands.

```
ssh user@ip
```

Then login and you can control it with commands.

**Search files**

The power of the command line lies in its ability to perform tasks faster than you could with an interface alone. For example, if you want to find out where a file is located on your hard drive, you can use Nautilus/Dolphin (or Finder on a Mac) to locate it or *just type one command*:

```bash
find /home -type f -name filename.txt
```

You can also use the *fd* command

```bash
> fd netfl
Software/python/imdb-ratings/netflix-details.py
```

**Navigate file system**

You can navigate the file system with the `cd` and `ls` commands. `ls` shows you the files in the current directory. `cd` changes the directory.

Some commands include `cd ~` go to home directory, `cd dir` enter directory, `cd ..` leave directory.

That's all you need to navigate your file system. Here you can find a large [list of commands](https://bsdnerds.org/what-is-linux-shell/) for Linux.