teleren/devto huggingface dataset:
Why do the wordpress docs suck so incredibly much?
Published: 2021-06-14 22:53:58

---
title: Why do the wordpress docs suck so incredibly much?
published: true
description: 
tags: 
---

I, like most developers, dread having to work with wordpress. It is, however, what all the clients ask for. And as long as the request is something simple it's usually pretty easy. However, as soon as something requires me to look at the wordpress docs, well your website price just doubled.

The worpress codex gives us half-assed, barely explained concepts, no or irrelevant examples (most of the examples are in the form of user comments), a light smattering of internal links and if you ever find a page that actually lists what you can expect one of these functions to _do_ or what data they _return_, well please email me, I'll pop open a bottle of champagne.

The worpress REST API docs are incrementally better, being at least written in grammatically correct english, but again the demo data provided is incorrect, the endpoints are described incorrectly and the code samples are hit and miss.

How, in 2021, with over a third of all websites on the web using wordpress, with all of their staff and community, do the wordpress docs suck so _incredibly_ much?
Getting started with Progressive Delivery
Tags: cicd, video, podcast, devops
Published: 2021-06-15 13:57:08

---
title: Getting started with Progressive Delivery
published: true
date: 2021-06-15 00:00:00 UTC
tags: cicd,video,podcast,devops
canonical_url: https://jhall.io/archive/2021/06/15/getting-started-with-progressive-delivery/
---

The latest episode of Tiny DevOps has landed!

{% youtube Wmtndkw_tzI %}

Olaf Molenveld, former CTO of Vamp (now part of CirlceCI), joins me to explain the concept of Progressive Delivery, when it makes sense, and what homework every team should do before getting started with canary deployments, red/green deployments, and other progressive strategies.

Or [listen](https://share.transistor.fm/s/299d3d0a) to this episode as a podcast.
* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to create or draw a rectangle using SVG in HTML?
Tags: html
Published: 2021-06-15 00:00:00

---
  title: How to create or draw a rectangle using SVG in HTML?
  published: true
  tags: HTML5
  date: Tue Jun 15 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-rectangle-svg-html
  cover_image: https://melvingeorge.me/_next/static/images/main-cc103343774753879a38b0dc939ed01a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-rectangle-svg-html)
  
To create a rectangle, you can use the `rect` element inside the `svg` element in HTML.

### TL;DR

```html
<!-- Create rectangle in SVG -->
<svg>
  <rect x="0" y="0" width="30" height="20" />
</svg>
```

For example, to make a `30*20` (width and height) rectangle, first we can define the `rect` element inside the `svg` element like this,

```html
<!-- Create rectangle in SVG -->
<svg>
  <rect />
</svg>
```

But this alone wouldn't show anything on the screen since it doesn't know how to draw the rectangle on the screen. For that we have to set some attributes on the `rect` element like:

- the `x` attribute, which tells where to start drawing in the `x-axis`. It is called the x-coordinate.
- the `y` attribute, which tells where to start drawing in the `y-axis`. It is called the x-coordinate.
- the `width` attribute, to define the width for the rectangle in our case it is `30px`.
- the `height` attribute, to define the height for the rectangle in our case it is `20px`.

So it may look like this,

```html
<!-- Create rectangle in SVG -->
<svg>
  <rect x="0" y="0" width="30" height="20" />
</svg>
```

So in the end, we will have a rectangle drawn to the screen like this,

![svg-rectangle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1cvjx3fih2eypy4ptb8.png)

And we have drawn a rectangle successfully using SVG in HTML. Yay 🎊!

See the above code live in [JSBin](https://jsbin.com/rufifoyufa/2/edit?html,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Portainer.io
Tags: container, containermanagement, kubernetes, portainer
Published: 2021-06-14 23:40:57


Do you manage containers in your daily workflow? Then you might want to check out Portainer.io. We here at Lagoon use the free and open-source community edition of Portainer. It’s a container management tool, and you install it into the cluster you want to manage - or locally into Docker. 

Here’s what the dashboard looks like on my local machine:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6o9km7029zirhxcvd0g.png)

You can see in the menu on the left that there are a lot of options for viewing what’s going on in your containers. 
 
And here’s the view of my containers:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv3yi4krdf8ux8czb3l2.png)

Portainer is especially useful for folks who don’t have an in-depth knowledge of container management or Kubernetes, but still need to work with containers. 

Vincenzo, one of our system engineers, had this to say:

>“It's the only UI for an easy management of Docker and Docker swarm. Plus it gives you some metrics and insights out-of-the-box without fighting with Prometheus+Grafana.”

Toby, our Product Lead, first introduced us to Portainer a few years ago, and still uses it every day:

>"For someone who works regularly testing releases, updates and changes across a number of Docker Compose stacks (usually more than 6, don't ask!), Portainer is invaluable in keeping tabs on it all."

If you don't believe him, here's his current stacks...
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxkrb791pze6f5pvrr4i.png)
 

As an open source project ourselves, it's really exciting to be able to love another great open source tool (especially one from NZ!) 

Head over to https://www.portainer.io/products to find out more, or join their team in one of their chat/social channels.
Second-week blog post for PSF, GSoC 2021
Tags: opensource, python, gsoc
Published: 2021-06-14 23:22:17

**Hi everyone!** This is my second post for [Google Summer of Code](https://summerofcode.withgoogle.com/) (GSoC) 2021. The coding period has started and so far my experience has been most enjoyable. As I stated in my [first post](https://dev.to/leocumpli21/first-week-check-in-for-psf-gsoc-2021-1kfe), this week I began working on my first milestone, and I can say I've done wonderfully.

### What am I working on?
This week, a fellow collaborator ([Ybrahin](https://dev.to/ymartinez)) and I worked on fixing the existing `python` quizzes of the project [Python para Zombis](https://github.com/PyAr/PyZombis). We divided the number of quizzes each one would fix; I get to fix 7. From those, I've completed 5. So far, I've done **5 PR's**, 4 of which have been merged into the master branch, and 1 awaiting review. Completing a quiz fix also involves making a web test with `pytest-playwright` for an exercise in that quiz. Moreover, this weekend I did some research about Runestone [supporting SQL](https://github.com/RunestoneInteractive/overview/blob/main/_sources/ActiveCode/sql.rst) language. This is relevant to us because there is a lesson in the project that is currently in standby due to the `sqlite3` python module used in there. To be clear, Runestone doesn't support that module, and that's why this lesson isn't working. 

Do you remember I talked about `flake8` in my first post? Well, Ybrahin introduced me to another tool to automate code formatting, named [Black](https://github.com/psf/black). 
> *Black* is the uncompromising Python code formatter. 
*Black* makes code review faster by producing the smallest diffs possible.

### What have I struggled with this week?
I had no bigger problems than trouble understanding git commands. I am still getting used to working with GitHub, and sometimes I don't know the exact sintax, nor the correct time to execute them. Regarding `python`, I haven't struggled.   

### What solutions have I found? 
If any doubts come to me while programming I tend to do one of two things: 
- Ask my workmates and mentors.
- Try to find an answer from Google. 

Get tunned for the next post.
Explicit ESM in Node.js with .mjs
Tags: node, webdev, javascript, beginners
Published: 2021-06-14 21:40:43

---
title: Explicit ESM in Node.js with .mjs
published: true
description: A brief explainer on the usage of .mjs and .cjs in Node.js.
tags: node, webdev, javascript, beginner
series: "ESM in Node.js"
---

A while ago, Node.js introduced support for ECMAScript Modules (ESM). ESM is the **standardized** modules implementation that's been built-in to JavaScript. This differs rather significantly from CommonJS (CJS), which is the module system that Node.js has shipped with for over a decade that make them _relatively_ incompatible.

There are a number of different components of Node.js that have been intentionally structured to allow you to use **standard** (as in, how the ECMAScript Specification defines it) ESM by default and extend/augment that experience if you'd like to.

Today, I want to get into one of the baisc elements of ESM in Node.js: the `.mjs` and `.cjs` extensions.

## Why `.mjs` (and `.cjs`)? 

### The Quick Answer

The straightforward answer to this is that having different file extensions allows you to be explicit in how you want to run your code - `.mjs` will always be run as ESM, `.cjs` will always be run as CommonJS.

### The Answer With Context

Because of the differences in how ESM and CommonJS work, Node.js runs them differently by default. This results in the runtime needing an indicator about which way you want to run your code - as ESM or as CommonJS.

There's three different ways that this indicator could be expressed: explicitly, implicitly, and by default.

To not break over a decade of projects and over a million modules that are expecting to Just Work, the default the project landed on was CommonJS - sensible, especially when you consider millions of lines of code and multitudes of applications already running in this way.

The way to _explicitly_ assert that the code you're running is ESM and should be run as such is to just use the `.mjs` file extension (which, if you're concerned, is also supported in web browsers as long as the `Content-Type: text/javascript` header is sent and is actually [recommended by V8][V8]). The official overview of this is documented in the [determining module system][packages-documentation] section of the Node.js Packages documentation.

When you use `.mjs`, Node.js _knows_ that you've written ESM and will parse your JavaScript as such. The same is true for `.cjs` - Node.js _knows_ that `.cjs` should run as CommonJS, and will parse your JavaScript as CommonJS.


[V8]: https://v8.dev/features/modules#mjs
[packages-documentation]: https://nodejs.org/api/packages.html#packages_determining_module_system
Salary Negotiation Techniques
Tags: salary
Published: 2021-06-14 20:52:07

This is a full outline of how you can become a top negotiator when interviewing for a job.

When I was starting out I always negotiated better compensation plans than others in the office, even when they were smarter, had a more formal education, or had more years of experience.

Although I started programming when I was 14 years old, my career and passion was sales from the age of 18 to 30.  Being a bit OCD I studied everything I could to be a great salesperson. Zig Ziglar was my idol.  When I switched careers at 30 to software development, those negotiating tactics really paid off.

I used these techniques to negotiate top pay, virtual office, travel and extensive fringe benefits for positions from software developer up to Chief Technology Officer but this works for any job position.

This video shows how to find out how much your job position pays.  Then goes over **basic** negotiating strategies and lastly **advanced** negotiating tips to not only getting more money but a better quality of life.

{% youtube aEA7HvJqGJs %}
Try Resurface. Get a hat.
Tags: api, devops, devsecops
Published: 2021-06-14 20:49:35

What every API business needs is a system of record for their API calls – someplace Devs, DevOps, DevSecOps or PMs can go to quickly answer any question they have about your API traffic, even if no one knew they would have that question when you developed your application.

Try Resurface's free-forever version and we'll send you a cool Pepper the whale hat.  https://resurface.io/join-the-pod
Installing Microsoft SQL Server on your Mac with docker
Tags: sql, mac
Published: 2021-06-14 20:39:45

https://www.londonacademyofit.co.uk/blog/installing-sql-server-on-mac-using-docker
From Terminal run command –

```docker pull microsoft/mssql-server-linux
docker run -d --name MySQLServer -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=Password123@jkl#' -p 1433:1433 microsoft/mssql-server-linux```
Name can be any custom name of your choice
Password can be of your choice provided it is the combination of uppercase, lowercase, numbers and special characters
Download azure data studio from https://docs.microsoft.com/en-us/sql/azure-data-studio/download?view=sql-server-2017

Open azure data studio and provide connection parameters:
host: localhost
authentication type: SQL Login
user: sa
password: Password123@jkl#

Or use tablePlus:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyrcnr2detriltrnmtxr.png)
Debugging 
Published: 2021-06-14 20:23:02

Using primarily Google Chrome's Debugger tool

Tutorial: https://developer.chrome.com/docs/devtools/javascript/

To open - Inspect Element on webpage
- Sources to see all the files associated with webpage
- You can make breakpoints and filter them with using 'Event Listener Breakpoints'

* Step over function call to go skip to different functions

* Local -> Scope + Breakpoints can be an efficient tool to see how your variables are progressing within a function

* **Watch** can be useful when seeing what the variable CURRENTLY is.

* Use "Console" as a whiteboard test

* You can edit code directly in the 'Sources' then hit save.
EDUCATION SOFTWARE DEVELOPMENT SERVICES

Published: 2021-06-14 20:19:30

It goes without saying the education is a significant part of any country that intends to support own youth and provide it with top-quality capabilities. The modern world is impossible without innovative technologies. That’s why it is very important to unite them with education to satisfy the needs of people.

Education Software Development

These days, young people can’t imagine their daily life without using various gadgets. They know how to chat with friends, share photos, search for information and perform other operations that simplify their existence. Young people use smartphones, tablets, and laptops every day and it would be foolish not to take it into consideration especially if talking about the education industry. This is the main reason why colleges, schools, and universities need to think about education software solutions. Implementing gadgets in the learning process is definitely a great idea.

Read more: [https://itmaster-soft.com/en/education-software-development-services](https://itmaster-soft.com/en/education-software-development-services)
Dynamic snitching
Tags: cassandra
Published: 2021-06-14 20:19:20

By default, all snitches also use a dynamic snitch layer that monitors read latency and, when possible, routes requests away from poorly-performing nodes. The dynamic snitch is enabled by default and is recommended for use in most deployments. For information on how this works, see Dynamic snitching in Cassandra: past, present, and future. Configure dynamic snitch thresholds for each node in the cassandra.yaml configuration file.

For more information, see the properties listed under Failure detection and recovery.
Reason Why React Is So Popular
Published: 2021-06-14 20:17:55

It’s SEO-Friendly 
One of the most known features of React is its ability to leverage the benefits of Search Engine Optimization (SEO). By using React, businesses can considerably reduce page load times and start ranking higher in search engines (a.k.a. Google, Bing, Yahoo, etc). How is this possible? Well, it’s all thanks to React’s focus on rendering speed. 

You see, Reach lets you use similar code for both the client and server-side of an application (this is what many people describe as isomorphic). This means that any website using React immediately has an advantage in terms of speed and, thus, is more attractive for both users and crawlers. 

Read more: [https://itmaster-soft.com/en/react--js-development-services](https://itmaster-soft.com/en/react--js-development-services)
Python Testing 201 with pytest
Published: 2021-06-14 20:13:46

{% youtube fv259R38gqc %}

For Python Frederick's September presentation, I presented on Python testing. In the presentation, I explained more of the features of pytest that went beyond the basics that we explored in March.

The recording from the talk is available on YouTube. [Check it out!](https://www.youtube.com/watch?v=fv259R38gqc&list=PLFcKEo4b_n1wMFhbiedpMgh2VRT5uICuF&index=2)

<!--more-->

In this presentation, I focused on a few big areas:

* Creating tests with a wide variety of example data using `@pytest.mark.parametrize`.
* Advice on organizing your test suite as the suite grows.
* Exploring fixtures as a tool for setup and reuse.
* Examining some useful built-in fixtures.

Questions? Feel free to mention me on Twitter at [@mblayman](https://twitter.com/mblayman) so I can try to respond to your question.
100 algos in 100 days (Day 14)
Published: 2021-06-14 20:00:56

##Longest Substring that is a Palindrome

https://leetcode.com/problems/longest-palindromic-substring/submissions/

I managed to get the brute force quite quickly. Double iteration getting all the substrings. Greedily add them if longer than current longest substring.

How to make a more efficient solution... that is the question!

I quite like this recursive helper function I used for string reversal:
<code>
function reverseString(str) {
  if (str === ""){
    return "";}
  else{
    return reverseString(str.substr(1)) + str.charAt(0);}
}
</code>
The finite uses of Infinity
Tags: javascript
Published: 2021-06-14 19:45:17

To my knowledge there a few tricks that you can pull off with `Infinity`

A number larger than any number is actually pretty useful, as the negative sign and you negative number is then larger than any negative number.

``` js
Infinity;
-Infinity;
typeof Infinity; // number
```

``` js
// 1.
"Hello World".substr(4, Infinity);

// 2.
"Hello World".substr(4, -Infinity);
```
1 outputs `o world`, usually that's a tiny bit harder, you need to know the length of the string do some bad thing like use an arbitrary large number such as `9e9` although unlikely, it will still fail to account for cases where the string was 9e9 + 1 long, I can't live with that...

2 outputs nothing, because well negative numbers in second position arg of substr

Okay so Infinity is pretty useful for ummm.... Not much let me know what you use it for, I know I have used it from time to time to simplify some problems 🔬
How to successfully fail a personal project
Tags: gamedev, motivation, learning
Published: 2021-06-14 19:41:23



I've always enjoyed creating things. I get a lot of pleasure from starting something new and building on top of it until I can sit back and enjoy the result. It doesn't really matter whether it's drawing, cooking, painting, building with legos, coding, filming or my day job as long as I get to make things.

A few weeks ago I was working on a game called *Campfire*. A short role playing game set in a forest with a simple objective consisting of picking stuff up and lighting a fire before reaching the end. It was fun to work on until it just stopped being fun. I gather this is quite common with personal projects. I started out making the game confident that I would finish it but after a couple of weeks of intense coding I put the project on hold.

To be honest when personal projects go "on hold" it usually means they won't be revisited. The problem with Campfire was that the concept started to sound boring and like it wouldn't be worth it for the amount of work it would've required. It was a simple idea that got burdened with all sorts of aspirations and would've probably taken the rest of this year to finish. While it would be nice to share a finished game I didn't want to put myself through something I didn't feel like doing. After consideration I gave up and took a break from game development for a bit.

I felt like a failure afterwards.

For a couple days I couldn't shake the feeling of being bad at everything and how I wasted my time on yet another unfinished game. I was in a bad mood and felt like creative work just isn't for me. I was considering giving up on game development altogether.

I've been working as a web developer for over 5 years now. After creating dozens of websites I've noticed one thing in common with every project: **Finishing a huge project—while satisfying—is usually incredibly underwhelming while the process of designing and coding is the most rewarding and fun part.** 

After a few days of feeling defeated I was able to look at Campfire with a fresh perspective and remind myself how much fun I had working on the project. How much fun the process was and how little in mattered that I didn't finished it. 

Success is all about framing: *I wasn't successful in making a game but at least I successfully failed to make one.*

I learned many new things I set out to learn, I refreshed my knowledge of Lua (the programming language), I studied pathfinding algorithms and came closer to understanding what is a good idea for a game as a solo developer. I think next time I'll be less ambitious and more appreciative, prepared and ready to take on a game project.
easy way to create css grid with web responsive!
Tags: css, html, vscode
Published: 2021-06-14 19:24:22

Try this way to use grid

HTML CODE:

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

CSS CODE:

![pic2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v7b82cgz4mpypaorm2m.png)
_________________________________________________________________
*GRID-AUTO-FLOW:(ROW OR COLOUMN;) < EITHER
 GRID-TEMPLATE-COLUMN:33% 33% 33%;
__________________________________________________________________
OUTPUT
easy way to use css grid
normal web

![grid css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpsszwj50om7l3umskur.png)

min-width 567px
and see the responsive

![web responsive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/145l4fib5jiicpcm7wud.png)

thanks to kevin powell
for this important source