teleren/devto huggingface dataset:
CSS basics
Tags: css, beginners
Published: 2021-05-31 22:49:53

I've been fighting the battle to gain an understanding of CSS. If I may be honest, It has been difficult to grasp. The idea of basic selectors is an easy concept, but as with anything in the world of development, the road to mastery will take you some time. 

So.....basic selectors with CSS. You can select the element simply by the tag that you're wanting to manipulate.  A 'p' tag in html could be identified in CSS by simply referring to that element like so:

```
p {
text-align:center
}
```
This works but you would have to be satisfied with ALL text that sits in between an open and closed pair of p tags to have all the text centered. While this could work, if thats what you're aiming for, chances are you would want to be a bit more specific in which p tags you want to be affected by the written CSS. This could be achieved through and id attribute or a class attribute set to the tag.

```
<p class='make-me-pretty'></p>

or

<p id='make-me-pretty'></p>
```
The first example of the above code block shows the p tag having a class attribute. Since it's allowed to have multiple HTML tags with the same class attribute, this could result in a way for you to apply more changes to how the the HTML would appear with less lines of code. The other example shows the p tag with an id attribute. The id attribute is a bit more restrictive since an id can only be unique, meaning that there couldn't be two html elements with an id of make-me-pretty. They both have their uses. I've found that classes help make for less code when you want to affect many things in the same way.  An id attribute also has its use as well, given that you only want to apply a particular change to a particular element. Taking the plunge into CSS hasn't been too bad of a trial, and I know that at the other end of this I'll be a better, more rounded, developer. Next week we'll discuss some CSS combinators. I'll see you then and Happy Coding!.
Returning The Provided String With The First Letter Of Each Word Capitalized
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-31 22:40:10

* Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.
```
function titleCase(str) {
  return str;
}

titleCase("I'm a little tea pot");
```
* Answer: 
```
function titleCase(str) {
  let arrStr = str.toLowerCase().split(" ");
  for (let i = 0; i < arrStr.length; i++) {
    arrStr[i] = arrStr[i][0].toUpperCase() + arrStr[i].slice(1);
    console.log(arrStr[i])
  }
  return arrStr.join(" ");
}

titleCase("I'm a little tea pot"); // will display I'm A Little Tea Pot
```
How do tech interviews work in Pakistan?
Tags: discuss
Published: 2021-05-31 22:15:16

I hope there are enough people from Pakistan to answer the questions in this discussion. 

In big tech firms around Pakistan, how do tech interviews work?
- From the point of when you applied for the job or when you were contacted for a specific role, how was the whole interview process? 
- What type of technical question you were asked during the interview? 


In general, I just want to know how the whole process went?
Tips for new developers
Tags: beginners, programming
Published: 2021-05-31 20:40:06

When you start in the world of programming you discover that there is too much to learn and at first it can be a bit intimidating. We were all in that place, and the idea is to provide some tips that I learned while going down this road.



###Don't grab multiple tasks at the same time
This is one of the most common, you do not find the correct limits of your assignment and end up working on several related tasks at the same time, in the end, you didn't advance in any of them and blocking your teammates.
 
###Be methodological
Much of the daily tasks of devs are repetitive, try to have an order and a methodology. In the beginning, it could be useful to create a list of steps and validate it with your TL or a more experienced dev. 

For example, before starting to code a new task:
1. Check that your base branch is clean
2. Pull the latest changes
3. Create the topic branch

###Find at least one solution to the problem
When you are a jr dev, nobody expects you to solve everything on your own, and it is very likely that you will be blocked several times with the same task. But before asking for help, try to at least find a solution to the problem, even if it is the worst. Programming is largely troubleshooting, if someone solves everything for you, you won't notice progress very soon. You have to train yourself. 

###Don't assume
If you have a question about business logic or a block of code, don't assume, it can lead you in the wrong direction. I've been working as a dev for several years and I still usually make that mistake, so try to take it as a habit from the beginning. Better ask than do extra work.

###Solve the problem first, then make it beautiful
It is always easier to work on a problem that has already been solved, even if it was done in the worst way. Iterate your code, don't try to find the best solution the first time because you will probably block yourself,  make it work, then make it beautiful.

###Be open to criticism (valid for experienced devs too)
Our code is a part of us, but we don't always have the best solution, the most performant or whatever, hear the advice, move your ego away, even if you do not agree, it can be of help in the future.

###Add logs
Whenever I start a new project I tell myself: "this time start adding logs to everything you do" and clearly I never do. When your code has a problem in production and you don't have much idea what the problem might be, you will hate yourself for not adding logs. Whenever you can, add logging and comments. 

###Be honest
Please be honest about your knowledge, especially in interviews. If you can't answer the basic questions of a tech/concept, don't add it to your resume. Instead of including something that barely knows because you thought you knew it just by having read/heard something, in the interview, you can say: "I've been reading about...but never worked or did a PoC...".  


Probably there are more tips and advice for novice devs, if you have more ideas feel free to leave a comment.
Why to use useContext?
Tags: react, webdev, womenintech
Published: 2021-05-31 20:15:12

What made me use **useContext**? What would one normally do if they want to pass data down the tree to some component, they will achieve this by passing the data as *props* to the child components, I did the same thing until I got to know about *useContext*.

What if one wants to pass the *count* to the last child component in the tree, like in the below code from *App* component(Parent Component) to *About* component(Last Child Component).

**Without using useContext**

``` javascript
//App.js
import Home from "./Home";
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0);
return (
    <div className="App">
    <Home count = {count}/>
     </div>
  );
}

```


``` javascript
//Home.js
import React from "react";
import About from "./About";
const Home = ({count}) => {
 return (
    <>
      Home
      <hr />
      <About count = {count}/>
      </>
  );
};

export default Home;

```
``` javascript
//About.js
import React from "react";

const About = ({count}) => {
 return <>
About
<hr/>
{count}
</>;
};

export default About;

```
**With useContext**

When we are using *useContext* we don't need to pass data to *Home* component in order to make it available to *About* component and we can use the *count* in any component which comes down the tree and is child of that component which is enclosed in *Provider component*.

``` javascript

//App.js
export const CountContext = React.createContext();
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div className="App">
      <CountContext.Provider
        value={{ 
          count
        }}
      >
        <Home/>
      </CountContext.Provider>
    </div>
  );
}

```
``` javascript
//Home.js
import React from "react";
import About from "./About";
const Home = () => {
  return (
    <>
      Home
      <hr />
      <About />
    </>
  );
};

export default Home;

```

``` javascript

import React from "react";
import { CountContext } from "./App";
const About = () => {
  const { count } = React.useContext(CountContext);
  return <>About
   <hr />
      {count}
      </>;
};

export default About;

```
The code won't do anything it'll just display a count on the screen that is 0.

**Note**: *Context should be used to pass those data, which one wants to be displayed on every screen or common for all the pages like user name, theme, number of items in some cart etc.*
JavaScript Location.reload() 🔄
Tags: javascript, beginners, wecoded
Published: 2021-05-31 20:08:14

Before, I write a single word about Javascript, allow me to say one thing, it's a beast. 

Switching gears from Ruby to JS threw me for a loop, but after lots of practice and reading it all started to click. So,  speaking of clicking, let's explore Javascript and all that can be done in a single click. 

The beastly language was Phase four of Flatiron's curriculum, and with every phase comes a project. I was scrambling just to learn the language *in 2 weeks*, and now I had to make a single page application. *oof*. But, somehow, we managed, and here we are writing this blog post with some Javascript knowledge (*that will be expanded upon over time*), and a fully completed project. 

When creating my first JS application I encountered setbacks, as most new programmers will when coding, and that's okay! My biggest piece of advice for this, disregarding the language, is to read documentation! [Mozilla](https://developer.mozilla.org/en-US/) is what is used for Javascript, and thoroughly explains each and every concept there is. This will save you hours of time and frustration, and unlike some other documentation (I found) Mozilla is easy to read and understand.  

Out of all the setbacks, I found that not having my application reload/refresh after I made a submission of some kind was very annoying. The last thing I wanted was for a user to be confused about their submission, or have to manually refresh it after, each time. Upon some googling and research came [**Location.reload()**](https://developer.mozilla.org/en-US/docs/Web/API/Location/reload). This magic method reloads the current URL, similarly to a user manually refreshing the page. Exactly what I needed! 

Adding it into your code is simple. Wherever your input or button tags exist, add it in! See the following from my code as an example: 

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

And there you have it! An application that instantly reloads upon a click.
Verkauf Zugriff auf deine WordPress-Designs in der Kadence Cloud
Tags: wordpress, kadencewp, wordpressplugins
Published: 2021-06-01 12:50:10

---
title: Verkauf Zugriff auf deine WordPress-Designs in der Kadence Cloud
published: true
date: 2021-05-31 19:30:27 UTC
tags: Wordpress,KadenceWP,WordPressPlugins
canonical_url: https://bloggerpilot.com/verkaufe-zugriff-kadence-cloud/
---

![Verkaufe Zugriff auf die Kadence Cloud](https://bloggerpilot.com/wp-content/uploads/2021/05/kadence-cloud-zugriff-verkaufen.png)

 Du willst Zugriffe auf deine eigene WordPress Design Library in der Kadence Cloud verkaufen? Dann …

[Verkauf Zugriff auf deine WordPress-Designs in der Kadence Cloud](https://bloggerpilot.com/verkaufe-zugriff-kadence-cloud/)
Sort Excel Data Using Java
Tags: java, sortdata, excel
Published: 2021-05-31 08:16:49

Data sorting in Excel is to sort one or more columns of unordered data according to different needs, which helps to display the data in a more organized way and also helps people find the required data faster. This article will demonstrate how to sort data within a cell range using Free Spire.XLS for Java.

**Installation**
**Method 1:** Download the [free Java library](https://www.e-iceblue.com/Download/xls-for-java-free.html) and unzip it, then add the Spire.Xls.jar file to your project as dependency.

**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
        <repository>
            <id>com.e-iceblue</id>
            <name>e-iceblue</name>
            <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
        </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.xls.free</artifactId>
        <version>3.9.1</version>
    </dependency>
</dependencies>
```

**Sample Code**
```java
import com.spire.xls.*;

public class SortData {

    public static void main(String[] args) {

        //Create a Workbook object
        Workbook workbook = new Workbook();

        //Load the sample Excel file
        workbook.loadFromFile("test3.xlsx");

        //Get the first worksheet
        Worksheet sheet = workbook.getWorksheets().get(0);

        //Specify the column index and the sort mode. The column index starts from 0.
        workbook.getDataSorter().getSortColumns().add(0, SortComparsionType.Values, OrderBy.Ascending);

        //Specify the range to sort
        workbook.getDataSorter().sort(sheet.getCellRange("A1:D10"));

        //Save the document
        workbook.saveToFile("SortData.xlsx", ExcelVersion.Version2013);
    }
}
```

**Results**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2xt6ylcaa0jaswztroo.jpg)
Day 98
Tags: 100daysofcode, programming
Published: 2021-05-31 19:17:22

Day 98/200 of #200DaysOfCode #100DaysOfCode

I'm now a 3 kyū blue belt on @codewars! 
- Solved five problems on Codewars.

1 - The Prediction (5 kyu)

2 - Don't rely on luck. (6 kyu) 

3 - Multiplication table (6 kyu)

4 - Make the Deadfish swim (6 kyu)

5 - Valid Phone Number (6 kyu)
LeetCode 1029. Two City Scheduling (javascript solution)

Tags: algorithms, javascript
Published: 2021-05-31 19:11:55

###Description:
A company is planning to interview 2n people. Given the array costs where costs[i] = [aCosti, bCosti], the cost of flying the ith person to city a is aCosti, and the cost of flying the ith person to city b is bCosti.

Return the minimum cost to fly every person to a city such that exactly n people arrive in each city.

###Solution:
Time Complexity : O(nlog(n))
Space Complexity: O(1)

```javascript
var twoCitySchedCost = function(costs) {
    // Calculate the amount of people we need per city
    let n = costs.length/2;
    // Pointers and total cost
    let a = 0, b = 0, total = 0;
    // Sort costs by greatest difference
    costs.sort((a,b) => Math.abs(b[0]-b[1])-Math.abs(a[0]-a[1]));
    // Add costs of flights to the total
    for (let cost of costs) {
        if (cost[0] <= cost[1] && a < n) {
            total += cost[0];
            a++;
        } else if (cost[0] >= cost[1] && b < n) {
            total += cost[1];
            b++;
        } else total += a < n ? cost[0] : cost[1];
    }
    return total; 
};
```
Follow these easy steps to add favicons to your static webpages
Tags: frontend
Published: 2021-05-31 18:56:12

Favicons pronounced as (fave-icons) are small 16x16 pixel icon that serve as branding for your website. It's main purpose is to help visitors locate your page easier mostly when they have may tabs open. A favicon gives you an advantage over websites that don't use one.

Well designed favicons are styled to match the logo or them of your website, that way users have a quick and easy way to recognize your website at a glance.

You might be wondering what type of image is a favicon, well most browsers recognize PNG ,GIF and JPG formats for favicons,  internet explorer currently doesn't. It is recommended to use the Microsoft ICO format which works on all browsers. The ICO format contain multipke favicons of different sizes in one ICO file. It is best to have, at minimum, a 16x16 pixel version of which I recommend.  

Below: 16x16, 32x32, and 48x48 versions of a site favicon. Each image is embedded in one favicon.ico file.


![fav1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622464207890/UtRpqtMsp.png)

The most common sizes for favicons are:


- 16x16

- 32x32

- 48x48

- 64x64

- 128x128

### How to create a favicon

There are many ways to create favicons,  you can use an online tool to create one.  We happen to have  [favicon.io](https://favicon.io/) which is an online favicon generator that quickly generate your favicon from an image by uploading your image, this could be a company logo too. favicons can be generated from texts and even emojis which ever one suits your taste.

### How to link your favicon 
Now that you've created a nice little favicon, you need to tell web browsers and other applications where to find it. First place the downloaded favicon file in the root directory of your website and then add this line to the 
`<head>` section of your HTML 

`<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`

As long as the `href` attribute is accurate then you've got your favicon right up on your webpage. 

Thats all you need to have your favicon up. Pretty Simple.  


click the like button if you find this post interesting.
Part 7 video of pair programming a Perl web app
Tags: perl, database, mojolicious, webdev
Published: 2021-05-31 19:18:17

---
title: Part 7 video of pair programming a Perl web app
published: true
date: 2021-05-31 18:36:32 UTC
tags: Perl,database,Mojolicious,webdev
canonical_url: https://phoenixtrap.com/2021/05/31/part-7-video-of-pair-programming-a-perl-web-app/?utm_source=rss&utm_medium=rss&utm_campaign=part-7-video-of-pair-programming-a-perl-web-app
series: Live-coding a web app in Perl and Mojolicious
---

{% youtube JQfHGdRDN8M %}

This week we considered a [viewer’s pull request](https://github.com/szabgab/course-management/pull/6), added [administrator login](https://github.com/szabgab/course-management/commit/afd83e7095f2aa596a0503a5b3d6851abf28b4b5), and started on [adding the SQLite database](https://github.com/szabgab/course-management/commit/9e1a9facd7c0b203c898b0a07bcaffcc43afbb13) that will store the administrator’s acceptance of assignments. We also shored up [file upload permissions for authenticated users](https://github.com/szabgab/course-management/commit/fc0dafde5b61cac828803492afdab2ef6956018b) only and [added a logout link](https://github.com/szabgab/course-management/commit/dd73d5ef3b9a6db73b65ef0211c47cc2cdc0994a), learning about some more [Mojolicious helpers](https://docs.mojolicious.org/Mojolicious/Plugin/DefaultHelpers).

You can find [the whole series here](https://perlmaven.com/course-management-app-in-mojolicious).
Humble Book Bundle: Web Development & Design by O'Reilly
Tags: javascript, webdev, mysql, angular
Published: 2021-05-31 18:28:08

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

**[Humble Book Bundle: Web Development & Design by O’Reilly](https://www.humblebundle.com/books/web-development-design-oreilly-books?partner=indiekings)**

We spend hours of our lives on countless websites that help us connect with each other, catch up on the latest news, buy stuff, and much more. Isn’t it about time we started making websites of our own? O’Reilly thinks so, which is why they’ve teamed up with Humble Bundle for the newest eBooks bundle!

Enjoy learning the ins and outs of web development and web design with eBooks like Learning JavaScript, Laws of UX, and Learning PHP, MySQL & JavaScript.

Your purchase of this bundle helps support Code For America, who use the principles and practices of the digital age to improve how the government serves the American public, and how the public improves government.

This bundle launched on May 31 at 11:00 am PST and lasts through June 21, 2021. Pay what you want and support charity!
JavaScript Data Structures and Algorithms (Recursion, Part 1)
Tags: datastructures, algorithms, codenewbie, javascript
Published: 2021-07-10 20:10:01

---
title: JavaScript Data Structures and Algorithms (Recursion, Part 1)
published: true
date: 2021-05-31 18:14:07 UTC
tags: datastructures,algorithms,codenewbie,javascript
canonical_url: https://medium.com/codex/javascript-data-structures-and-algorithms-recursion-part-1-fb2c33ccbc17
---

[![](https://cdn-images-1.medium.com/max/2600/0*eQftGgfyrTG9NDnY)](https://medium.com/codex/javascript-data-structures-and-algorithms-recursion-part-1-fb2c33ccbc17?source=rss-be00f566a88f------2)

Hello, and welcome! If you’re not a first-time reader, then I’m hoping you have read the previous installment in this series that covered…

[Continue reading on CodeX »](https://medium.com/codex/javascript-data-structures-and-algorithms-recursion-part-1-fb2c33ccbc17?source=rss-be00f566a88f------2)
Who am I | Hafiz Muhammad Attaullah
Tags: attaullah, machinelearning, cybersecurity, portfolio
Published: 2021-05-31 18:12:03

My name is Hafiz Muhammad Attaullah, a Junior Machine Learning Engineer and Cyber Security Enthusiast.

WHAT I DO:

I help businesses automate their daily activities, detect anomalies, predict outcomes and improve daily sales while reducing cost, all by leveraging the power of machine intelligence. Also able to work on web Penetration Testing.

I have been able to build:
- Stock prediction models
- Cancer detection model
- Diabetes prediction model
- Rainfall prediction model.
- Penetration Testing.
- Bug Bounty
 Etc.

I am still learning as my field expects continuous training and practice.

HOW I DO THIS:

I use tools such as:
Python programming language
Pandas, for exploratory data analysis
MATLAB for ML toolbox and other Engineering solutions
Numpy, for scientific computing
Seaborn and matplotlib for visualization
Scikit-Learn for machine learning
Tensorflow for Deep learning
Kali Linux for Ethical Hacking
Ubuntu
GNS3
 etc.


WHY YOU NEED ME:

Considering the continuous need for an automated society where we need, less to do more, earn more and live happier and healthier. My field embodies and empowers this process by building a learning pipeline through which machines could be taught to carry out traditional activities humans are known to do. E.g in healthcare system my field can help doctors predict the cause of an individuals ailment by going through the symptoms revealed by the data collected from such person.

Traditional programs may not be able to recognize image patterns. But my field enables this process with the like of programs such as facial recognition systems, self driving cars etc.

Facebook's text limitation may not grant me lease to explain what my domain demonstrates. But I believe I'm saving lives and working on problems that are beyond the scope of traditional software development.

I am Hafiz Muhammad Attaullah
Day 1
Published: 2021-05-31 17:49:39

Started the day off with a virtual contest, could solve only 1 but should have been able to solve 3. Could not even see the test cases where the solutions stuck. That was frustrating. 
Then I had to go get my covid-19 vaccine, after which for 5 to 6 hours, everything was fine. Then I decided to take a nap and boom! Can't even move a muscle. Could not even get up to drink a glass of water by myself, let alone coding on my laptop. Not a good start to my challenge but I hope it motivates me to try better. 

Cheers!