teleren/devto huggingface dataset:
A code update or an extension? An important question when you have to give an ETC
Tags: productivity, programming, webdev, php
Published: 2021-04-18 12:05:09

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50aqwqp2sa3fox59gq4h.jpg)

I'm a freelancer and I often have to give an ETC for my customers. They pay me per hour so I must learn how to give a precise development time.  

I work with Shopware Plugins (an e-commence system from Germany) and I made a big mistake with a task time estimation last week. I had a task with some changes in a plugin and I assumed that I should update my customer's plugin, but I was wrong.  

My customer gave me access to the project and I discovered that I have to create a new plugin to change the original plugin's behavior. This takes of course more time, because I had to extend Php and JS classes. I did it, but I exceeded the deadline and I wasted my time. I could have worked on other projects during that time.  

Fortunately, my customer paid me more money when I explained to him, why I needed more time.  

So if you have to give an ETC, you should always ask yourself a question: should I customize some code, or I should expand it?  

This question should help you avoid many troubles.


Photo by George Becker from Pexels
Wordpress
Tags: awesomitylab, codeofafrica, wordpress
Published: 2021-04-18 12:03:36

We're nearing the end of the Task Force and we're as enthusiastic as we were the first week.

Personally, this week has been especially challenging for me as my teammate and I had a wordpress task that tested and is still testing my skills. 

Basically what we had to do was make it so that the client could be able to change logos on different pages specifically without affecting other pages. At first we used a plugin called `Logo or Image replace by mycore.global`. What this plugin does is add a meta box on a page with two fields, one for the the `src` for an image on the page, and another for the `src` of an image to replace that. This worked kinda good enough for the time but it had a flaw which was that the replacement process was done by client javascript and hence happened after the page was rendered. The problem this creates is that when the page loads, for a split second you can see the original logo before it is replaced, depending on a person's connection, this can go up for multiple seconds if the loading is slow.

Another problem is too much plugins are not a best practice in wordpress as they can cause maintenance, copyright and version compatibility issues. I have since used my own custom implementation which is an improvement to the plugin but there was still the issue of rendering.

The solution for this is, theoretically, to make it so that the replacement happens before the page is rendered. I have tried to achieve this by trying to add a filter after the user has entered the replacing logo image address which will replace the logo before the page loads but so far it's not working for some reason. If anyone has any ideas you can reach out in the comments and [here is the link to my question on Stack Overflow.](https://stackoverflow.com/questions/67148565/wordpress-filter-to-dynamically-change-the-logo-on-certain-pages).

So, this week was generally about that task and we are currently working to implement it better according to the client's feedback. Let's hope it works eventually.
Daily Developer Jokes - Sunday, Apr 18, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-04-18 12:00:14

---
title: "Daily Developer Jokes - Sunday, Apr 18, 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=Sunday%2C%20Apr%2018%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/5e12591442e48.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:___ When do front end developers go out to eat?

___A:___ On their lunch `<br>`.
 -->
Information about countries on the map
Tags: vue, javascript
Published: 2021-04-18 11:24:43

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/159798fjc2njaav2rrjp.gif)

This project is a project I made to learn about countries. While doing this project, we follow a way in which we can improve ourselves as a general culture. We see where the country you enter country's name is on the map and the country's information with a pop-up.

In this project, I used the open-source leaflet map and the population API by making fetch. It is a simple project that will write input in the name of the desired country and show it with a pointer to the country you want on the map.



Source Code: https://github.com/cihat/capitals
Live: https://cihat.github.io/capitals/
Dynamic Dimension React Container with Transition Effect - Part 1
Tags: css, react, javascript, transition
Published: 2021-04-18 10:54:26

## The Issue
Sometimes, we want our container to dynamically fit the size of its content, such as navigation bar with dropdown menu. 

The size of the content may not always be a fixed value, and CSS transition hates that. 

We know CSS style like this will create a smooth transition.
```css
.menu{
  height:0;
  transition: 0.3s;
}

.menu:hover{
  height:300px;
}
```

However, this will not work since css transition needs a numeric value to work with.

```css
.menu{
  height:0;
  transition: 0.3s;
}

.menu:hover{
  height:fit-content;
}
```

## Method 1

We can use `ref` and `getBoundingClientRect` to get the content's dimension

Here is a demo: 
{% codesandbox p13vj%}


and the code of the container:
```javascript

function DynamicContainer({ children, className, style }) {
  const content = useRef(null);
  const [rect, setRect] = useState({ width: 0, height: 0 });

  useEffect(() => {
    setRect(content.current.getBoundingClientRect());
  }, [children]); //Only update dimension when children change
  return (
    <div
      className={className}
      style={{
        transition: "0.3s",
        height: `${rect.height}px`,
        width: `${rect.width}px`,
        overflow: "hidden",
        ...style
      }}
    >
      {/* The inter container for calculating the content dimension*/}
      <div
        ref={content}
        style={{
          width: "fit-content",
          height: "fit-content"
        }}
      >
        {children}
      </div>
    </div>
  );
}


```

Noted: This container will only work well when the dimension of each child is static.

We will talk how to handle child components with dynamic dimension next time.

Thanks All.
A Really Simple Intro to React Router
Tags: react, router, navigation, webdev
Published: 2021-04-18 10:45:28

If you want to create a multi-page React app, the easiest way to navigate between pages is by using React Router. In this post I’ll take you through the steps of setting up a navbar for a simple app.

We’ll start off with three different components which will be three different pages in our app. You can call them whatever you like and put whatever content you like in each component. I’m going to call my components ‘Home’, ‘Products’ and ‘Contact’.

You can find the starting code [here](https://github.com/LauraToddCode/using-react-router/tree/starter-code/src).

To begin, install React Router by typing ‘npm install react-router-dom’ in your terminal.
![react-router-dom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5nvnsalgyw2o2s31kr8.png)

Once it’s installed, go to your index.js file and import { BrowserRouter } from react-router-dom.

![Add Browser Router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la88e2uqgcjp55cqn57h.png)

Then wrap the whole app with `<BrowserRouter>` tags so that that every component has access to React Router.
![Wrap app in Browser Router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hp74baeot10sjnt4f8p.png)

Next, go over to your App.js file and import { Route } and  { Switch } from react-router-dom.

![import Route and Switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnz5s83ztus7j77bhx25.png)

Now add a Route for each page of your app and wrap them with `<Switch>` tags. The path should be the url path for your page and the component property takes in the imported component. The exact property ensures that the route only works if the path used is exactly the same as the given path property.

![Add routes for each page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p4cylkvbzd53p8naix9.png)

Now let’s make our navbar by creating a new file called Navbar and adding a functional component as you would normally.

![Add navbar component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkqnp7adyp1afhabo7tt.png)

Now import { Link } from react-router-dom.

![Import Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py3kmb1nfnrhjpvoj8vs.png)

Add the links to the Navbar using <Link>. The to property should match the path you set up for each page in the App component.

![Add Link tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hga7155sdx25vc2meo2c.png)

Finally, go back to the App.js file, import the Navbar component and add it to the App component.

![import navbar component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi57amtz5cka6z7vxuqi.png)

That’s it! Now when you open your app, you’ll have a Navbar with links to each page.

You can check your final code [here](https://github.com/LauraToddCode/using-react-router/blob/master/src/App.js).
Pure CSS Tic-tac-toe
Tags: codepen
Published: 2021-04-18 10:28:29

<p>I have seen demos of pure CSS Tic-tac-toe games, but I was unable to find a version that truly works. If I have missed it, please send me link, so I can see how another dev has created it.</p>

{% codepen https://codepen.io/ziga-miklic/pen/Fagmh %}
What tech/programming communities are you in?
Tags: discuss, communities, tech
Published: 2021-04-18 10:25:37

If you plan on following a career in software engineering, and if you want to learn more and get better every day, it is essential to not go at it alone. Having a group of people with the same interests, ambitions, and goals as you, will not only help you progress a lot faster by interacting and learning with people above your level, but it will also provide you an opportunity to give back to the community. That is why I started blogging and being active on [dev.to](https://dev.to/) ;)

I am interested in knowing more about some online communities related to **tech blogging**, and also **programming** in general: Discord servers, Facebook groups, etc.

Are you active in any community? Please let me know in the comments!

Have a nice day! :)
Hello World ( Noob to Pro )
Tags: python, python3, helloworld, print
Published: 2021-04-18 10:20:34

# 👨‍💻: Code

```py
# noob ( beginner )
print("Hello world!")

# pro ( advance )
import __hello__
```

- What Do you think ???
- its like **Easter Egg** in python

- Printing "' Hello world! '" Using module

- or you can do it like this also
- `from __hello__ import *`


# 🏃‍♂️: Run

- Try Executing yourself
- https://www.sololearn.com/compiler-playground/cnua426gepaJ


# 😁: LOL

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yofr92wwabi99h7uifq6.png)
Day 35 of 100 days of Swift UI
Tags: swift
Published: 2021-04-18 10:16:35

I just completed day 35 of 100 days of Swift. I worked on building the multiplication game app. 

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

You can find the source code on [github](https://github.com/sanmiAde/Edutainment-)
Tools for InfoSec
Published: 2021-04-18 10:02:13

<sub>Photo by <a href="https://unsplash.com/@enzo74">Henry Hustava</a> on <a href="https://unsplash.com/s/photos/knight">Unsplash</a></sub>

[This tweet](https://twitter.com/sh_timmy/status/1383458752129474560) gives me info for some tools.

- [BurpBounty](https://twitter.com/BurpBounty)
- [Burp_Suite](https://twitter.com/Burp_Suite)
- ffuf/Dirsearch
- [SpyseHQ](https://twitter.com/SpyseHQ)
- httprobe
- httpie
- (masscan)[https://github.com/robertdavidgraham/masscan]
- Arjun
- Subfinder
- Findomain
- [Amass](https://github.com/OWASP/Amass)
- [Nuclei](https://github.com/projectdiscovery/nuclei)
- Aquatone
- Joplin
- Gau
- Waybackurl
- [PrettyRecon](https://twitter.com/PrettyRecon)
- [sqlmap](http://sqlmap.org/)
- [Zaproxy](https://github.com/zaproxy/zaproxy)


Hope this help !
Optimizing an SQL Server query
Tags: mssql, database, programming
Published: 2021-04-18 09:54:26

---
title: Optimizing an SQL Server query
published: true
date: 2021-04-18 09:40:37 UTC
tags: mssql,database,programming
canonical_url: https://siderite.dev/blog/optimizing-sql-server-query/
---

Original at https://siderite.dev/blog/optimizing-sql-server-query/

OK, so I played a little with SQL and I found an interesting flow for analysing queries. It uses the SET STATISTICS PROFILE functionality, but the results of this are usually hard to read and handle in any meaningful way. There are applications that help out with this, but this blog post is trying to show you a method that doesn't need any extra software (for when you are working for a paranoid company that doesn't allow you to install what you need to do your work, for example).

This works in the query itself, so no need of any extra tool except SQL Server Management Studio and Excel:

- Add SET STATISTICS PROFILE OFF at the start of the query (because you don’t need to profile the setup)
- Add SET STATISTICS PROFILE ON just before the SELECT that you want to optimize
- Clear cache and stats - this is optional, but good practice. There are multiple ways of doing this and it depends on your environment and preferences, so I am not covering this here.
- Execute the query - in the query results you will get the results of the query, but also the profiling statistics of the query execution, also in table form
- Copy the entire statistics table **with headers** and insert it into a new Excel sheet
- Add a new column right after Parent, call it IsLeaf
- Fill the IsLeaf column with a formula to see if the value in NodeId exists in the Parent column
    - Write "=COUNTIF($F$2:$F$10000,E2)=0" as the first value of the column
    - Keep pressing Shift, then press End and Down arrow (and release Shift) – you should have the entire column selected
    - Press Ctrl-D
- Select the header row of the table
- Click on "Sort and Filter"
- Select "Filter"
- Click on a random cell, click on "Sort and Filter" again
- Click on "Custom sort"
- Select _TotalTreeSubcost_ and "From largest to smallest"
- Now click on the filter on the IsLeaf column and filter on value TRUE (only the leaves)

You should now have the rows of the final tree branch nodes, ordered descending by the cost to the query.

Here you can look at the IO cost, CPU cost and Rows columns to find the places you need to work on. These values need to be as small as possible.

I hope this helps.
Are you using these Code Editors?
Tags: html, javascript, frontend
Published: 2021-04-18 09:26:02

Are you using these Code Editors?

{% youtube eC8mO6iqUCk %}


// Nr.3
CodePen.io
CodePen is an online community for testing and showcasing user-created HTML, CSS, and JavaScript programs. It functions as an online code editor and open-source learning environment, where developers can create programs and test them. It was founded in two thousand twelve. CodePen is one of the largest communities for web designers and developers to showcase their coding skills, with an estimated three hundred thirty thousand registered users and over fourteen million monthly visitors.

// Nr.2
Sublime Text
Sublime is a very popular code editor. There you can choose from many programming languages like HTML, CSS, JavaScript, Python, PHP, and much more. I used Sublime Text for a long time. And I can say it is very good and very easy to use. If you need it you can find many plugins for it. Sublime Text contains 23 different visual themes with the option to download additional themes. Sublime Text will offer to complete entries as the user is typing depending on the language being used. It also auto-completes variables created by the user. There is Auto-save too, which attempts to prevent users from losing their hard work. You can download Sublime Text for free for Linux, macOS, and Windows for 32 or 64 bits.


// Nr.1
Visual Studio Code
Visual Studio Code is a source code editor that can be used with a variety of programming languages, including Java, JavaScript, Go, Node.js, Python, and C++. Visual Studio Code is also called VS Code. Do you want even more features? Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won't slow down your editor. You can download Visual Studio Code Community edition for free or you can buy it.

// End
Don't forget to watch one of these videos, like, share this with your friends and subscribe! See you next time!
UiKit Responsive Starter Template
Tags: css, html, tutorial, webdev
Published: 2021-04-18 08:22:03

Starter templates are ready-made layouts for making a website. Just you have to customize it with your own information. So here we made responsive starter template layouts in UiKit.

In these templates, we used the UiKit framework with customizing the CSS class. Here we used navbar, slider, off-canvas, card, and also used form components to contact us. Also, we made a beautiful footer using gird and list-type components. This fully responsive for mobile and tablet-side.

Make it yours now by using it, downloading it, and please share it.

[Source Code](https://w3hubs.com/uikit-responsive-starter-template/)
Nginx Cheatsheet
Tags: tutorial, nginx, devops, beginners
Published: 2021-04-18 08:09:56

Nginx is open-source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. In this post, I will mention few Nginx configurations which we use frequently.

### Index
* [Listen To Port](#listen-to-port)
* [Access Logging](#access-logging)
* [Domain Name](#domain-name)
* [Static Assets](#static-assets)
* [Redirect](#redirect)
* [Reverse Proxy](#reverse-proxy)
* [Load Balancing](#load-balancing)
* [SSL](#ssl)

<hr>
 
## Listen To Port

``` nginx
server {
  # Standard HTTP Protocol
  listen 80;

  # Standard HTTPS Protocol
  listen 443 ssl;

  # Listen on 80 using IPv6
  listen [::]:80;

  # Listen only on using IPv6
  listen [::]:80 ipv6only=on;
}
```

## Access Logging

``` nginx
server {
  # Relative or full path to log file
  access_log /path/to/file.log;

  # Turn 'on' or 'off'
  access_log on;
}
```

## Domain Name

``` nginx
server {
  # Listen to yourdomain.com
  server_name yourdomain.com;

  # Listen to multiple domains
  server_name yourdomain.com www.yourdomain.com;

  # Listen to all domains
  server_name *.yourdomain.com;

  # Listen to all top-level domains
  server_name yourdomain.*;

  # Listen to unspecified Hostnames (Listens to IP address itself)
  server_name "";

}
```

## Static Assets

``` nginx
server {
  listen 80;
  server_name yourdomain.com;
  
  location / {
          root /path/to/website;
  } 
}
```
## Redirect

``` nginx
server {
  listen 80;
  server_name www.yourdomain.com;
  return 301 http://yourdomain.com$request_uri;
}
```

``` nginx
server {
  listen 80;
  server_name www.yourdomain.com;

  location /redirect-url {
     return 301 http://otherdomain.com;
  }
}
```

## Reverse Proxy

``` nginx
server {
  listen 80;
  server_name yourdomain.com;

  location / {
     proxy_pass http://0.0.0.0:3000;
     # where 0.0.0.0:3000 is your application server (Ex: node.js) bound on 0.0.0.0 listening on port 3000
  }

}
```

## Load Balancing

``` nginx
upstream node_js {
  server 0.0.0.0:3000;
  server 0.0.0.0:4000;
  server 123.131.121.122;
}

server {
  listen 80;
  server_name yourdomain.com;

  location / {
     proxy_pass http://node_js;
  }
}
```

## SSL

``` nginx
server {
  listen 443 ssl;
  server_name yourdomain.com;

  ssl on;

  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/privatekey.pem;

  ssl_stapling on;
  ssl_stapling_verify on;
  ssl_trusted_certificate /path/to/fullchain.pem;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_connection_timeout 1d;
  ssl_session_cache shared:SSL:50m;
  add_header Strict-Transport-Security max-age=15768000;
}

# Permanent Redirect for HTTP to HTTPS
server {
  listen 80;
  server_name yourdomain.com;
  return 301 https://$host$request_uri;
}
```


<hr>

## Thank you for reading
### If you like what you read and want to see more, please support me with  [coffee or a book](https://www.buymeacoffee.com/vishnuchi)  ;)
Mint 🍃: 0.12.0 
Tags: mintlang, webdev
Published: 2021-04-18 07:35:55

**Mint 0.12.0 is released!**

- Language Server Support
- Asset directive
- New app template
- Additions to the standard library
- A lot of bugfixes!

Head over to the read the blog post on the official site: https://www.mint-lang.com/blog/mint-0.12.0

You can check out the actual change log here: https://github.com/mint-lang/mint/releases/tag/0.12.0
Product Demonstration
Tags: taskforce, awesomitylab, codeofafrica, demo
Published: 2021-04-18 06:06:27

Greetings,

My week at task-force went quite well, starting the week together with my fellow teammates we reviewed the WordPress work we were given to create a popup model for the client as everyone tried to implement the challenge in his own way, we then took the decision the one had to be presented to the client, we tried our best to inspect all the possible perspectives that may lead to a bad user experience resolved them then we thought everything was fine we thought we were ready for the demo with the client.

Things did not go as planned reaching in the demo while presenting to the client we found out the application was not responsive this taught a lesson before demonstrating to the client it's better if we take someone from another team or someone within us developers and pretend to be the client we do a demonstration to him or her then he or she gives feedback this will increase the quality of the app. We also received feedback from the client suggesting we should not use the plugins and suggested us to code everything from scratch, I am an engineer I took this as a good thing because I love challenging myself.

As we finished preparing for the demo on Monday I took my chances for the rest of the week to level up in java and I am proud of myself that I was able to create my first endpoints using servlets, tomcat server, and ArrayList.

Being a part of the task-force is one of the biggest opportunities I have ever had in this career I am upskilling both in technical and soft skills, I like the way I am being challenged, and I believe it’s transforming me into one of the best in this career.