teleren/devto huggingface dataset:
Does Dev Methodology Matter? w/ Chris Downard
Tags: devops, devteam, methodology, leadership
Published: 2021-07-14 17:53:43

Every software [development method](https://linearb.io/blog/dev-methodology-doesnt-matter/) has its own rules your team is supposed to adhere to, but how flexible are these rules and what’s best for your team?

Chris Downard, VP of Engineering at GigSmart, doesn’t let Agile or any other methodology define what’s right for his team. In this episode of [Dev Interrupted](https://devinterrupted.com/podcast/does-dev-methodology-matter/), we discuss how dev processes are changing in a remote world, why Chris got rid of dev teams altogether, and how to create your very own dev methodology.

#**Listen to the full episode**
{% spotify spotify:episode:1GgSDWA592DNEbXJzJsIPC %}

#**Episode Highlights include:**
* How dev methodology has changed in the past year
* Why Chris made the decision to get rid of his dev teams
* Advice for other leaders following strict methodologies
* Creating your own methodology for continuous improvement

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
cannot run an app test in XCode IDEDebugSessionErrorDomain
Published: 2021-07-14 17:45:30

![2021-07-15 at 12.39 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qxrviiha01kzl50nr74.png)
 
In my case, I ran the following command in the terminal
```
sudo DevToolsSecurity -enable
```

and boom! the problem got fixed
nigerian richest musician
Published: 2021-07-14 17:28:50

Nigerian music industry in recent days have been faced with the question of who is the <a href="https://bit.ly/2U17zwE">Nigerian richest musician</a>, until recent days where a great statistical analysis have been made. Thanks to this amazing site with great contents, I found this site to be one of the best have ever visited with great post, very helpful, educating and informative.  Thanks for sharing more quality contents. <a href="https://bit.ly/2U17zwE">https://bit.ly/2U17zwE</a>
The Secret to Getting More Done
Tags: productivity, startup, devjournal, programming
Published: 2021-07-14 17:23:45

It was a cold and rainy day as I sat alone in my home office debugging Webpack config errors. No matter what I tried, the errors would not go away. My natural inclination was to "just get through most of them" before eating lunch. But as I fixed errors, more emerged. Do you know what eventually got me through these hang ups?

### Taking a break.

As my hunger grew stronger, I decided to give in and went to lunch. Being able to step away and temporarily detach my mind from the task at hand was just what I needed to approach this problem with a fresh approach full of new things to try.

Time and time again, the act of taking a break has helped immensely both for getting meaningful work done and for my overall mental state.

![sander-dalhuisen-nA6Xhnq2Od8-unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhfok0l45ztij2l2evhg.jpg)
 
Photo by <a href="https://unsplash.com/@sanderdalhuisen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sander Dalhuisen</a> on <a href="https://unsplash.com/s/photos/lunch?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

My top three activities while taking a break throughout the workday are:

1. Take a walk outside if weather isn't too bad.
2. Change my surroundings. This could mean working at nearby coffee shop or moving from a desk to a couch. The context switching required to get up and move also helps to refocus.
3. Read a book. Bonus points if it is a physical copy or on an e-reader. It's important to not stare at the same screen all day.

[Some companies](https://fortune.com/2021/07/06/kickstarter-four-day-work-week-2022/) are planning to take this idea a step further and are piloting a four day work week. Personally, I'm really interested to see how the rise of remote/hybrid workplaces as a result of the COVID-19 pandemic affects workers' break frequency. Curious to see if it goes up or down. In the meantime, I'm happy I get to work on a [team](https://www.koan.co/company/about) that facilitates working with purpose, built on a culture that supports transparency, autonomy and inclusivity.

**Four-day weeks and hybrid workplaces don't mean less work—just a more honest accounting of what already goes on.** The standard work week in the USA is currently 40 hours, but no one is actually productive that entire time. I set up a poll on Twitter to get some data points on this and here's the results.

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

Remembering to take breaks has helped me to get more done while working fewer hours, and I can support my teammates better by bringing my best self to my work. Maybe it can help you too. What are some of your favorite activities to do when taking a break during the work day?
If you're experimenting with pcntl_signal, don't use sleep()
Tags: php, firstpost
Published: 2021-07-14 16:28:25

I've been tinkering with my own PHP micro framework (yes, everyone does, it's a right of passage) and wanted to make some nice queue listener functionality. I've been playing with the likes of AMQP and Kafka, and wanted the listener to shutdown gracefully. I'd never used the `pcntl` library before, so it seemed like a good time to learn.

This isn't a post about the inner workings of [pcntl](https://www.php.net/manual/en/book.pcntl), but it does reveal a gotcha that caused me do doubt my sanity.

In brief, the `pcntl_signal` command allows you to intercept a CTRL-C from the command line. You use it like this:

```php
pcntl_signal(SIGINT, function () {
    // This will be executed on a CTRL-C, and the script won't terminate
});
```

The general goal is you switch to a graceful shutdown state, finish the active queue job, and then terminate. I didn't have any real code behind this, so the job worker was a simple `sleep(5)` to simulate a real-world process. Everything looked good, but it just would not work. As soon as I tried to terminate the script, it actually terminated, it didn't finish the job. No matter what I fiddled with or changed, it just would not finish that job.

Except.. well... it was doing...

What I hadn't realised was this buried away in the [PHP docs](https://www.php.net/manual/en/function.sleep.php)

> If the call was interrupted by a signal, sleep() returns a non-zero value.

The signal was being picked up by my custom `pcntl_signal` handler, but it was also immediately ending the `sleep` command. It was the placeholder code that was failing.

So, if you want to learn `pcntl` (and I may just post some more about what you can do with it), use a snippet like this:

```php
$now = microtime(true);
$target = $now + 5;

while (microtime(true) <= $target) {
    // noop
}
```

That will cause your script to wait for 5 seconds and won't be interrupted by the CTRL-C.
HTML Semantic Tags, Why is it important to use Semantic HTML?
Tags: webdev, html
Published: 2021-07-14 16:27:17

Often times I come across this jargon word **Semantic** in HTML, Here I am gonna explain this **Semantic** word and also what it is used for in HTML, So first and for most let's understand the meaning of **Semantic** word, As Wikipedia says, **Semantic** means syntactically valid string, so we can say that **Semantic** tags mean syntactically valid tags or in simple words, we can say that **Semantic** elements are those elements that convey some specific meanings and indicate what type of content they contain and what role that content plays in the document.

![Semantic VS Non-Semantic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbn4blzkjo4br6zz6vdg.png)


### Why do we need to use semantic HTML tags?


But why bother writing **Semantic** HTML, If you design all the `div` correctly then you won't see any difference in the UI of your webpage. However, remember one thing that you are not just dealing with humans, there are  [Web Crawlers](https://en.wikipedia.org/wiki/Web_crawler) and search engines spiders too, they read web pages automatically, without prior knowledge of what they might find. These are dependent on the **Semantic** clarity of web pages they find as they use various techniques and algorithms to read and index millions of web pages a day and provide web users with relevant results and obviously, leads to a better search engine ranking.

**Semantic** elements also increase the  [web accessibility](https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines)  of the web pages and help screen readers and as we know the number of smart devices keeps growing. It also simplifies page navigation for assistive technologies as well.

**Semantic** elements also improve the code structure and make code more readable.


### Some Semantic HTML tags


There is pleather of **Semantic** tags that exist in HTML but most of them are not that much used on most websites. Some **Semantic** tags that are mostly used and popular too are : 

- `Header`
- `nav`
- `section`
- `aside`
- `main`
- `figure`
- `figcaption`
- `article`
- `details`
- `footer`

You can learn about roughly 100 Semantic tags examples on  [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) or [HTML Standard](https://html.spec.whatwg.org/), and yeah if you want a detailed article on these tags and how they work internally then let me know and I will surely come up with one more article on that too.


> 
**Semantic** HTML is not only about using the new **Semantic** tags but about using the correct tags for each element so that it is easy to navigate for all users.

In the end, I just want to say that learning **Semantic** markup will make your life easier, your code cleaner, and your website better. 

Thanks for reading 🙏
GraphQL - Why you should be using it in 2021.
Tags: graphql, react, webdev, javascript
Published: 2021-07-14 16:24:37

It would seem that every day, more and more companies have been pushing to introduce GraphQL in their modern applications, but what exactly is GraphQL and why should you be using it in your projects in 2021?

###What is GraphQL?
GraphQL is a query language for reading and mutating data in APIs. It provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

###What problems does GraphQL solve?
Traditionally, Front-End Developers have consumed APIs using REST, where data entities exist on a group of URLs on a server. When a request is received the API responds with the full data payload of that entity. Although that sounds simple, there are two big disadvantages here. 

The first disadvantage, is that we could need multiple entities at one time, in which case each request is under fetching the actual data we want.

The second disadvantage, is that we may only want a small part of that data (in which case we need to over fetch from the API and that is both costly, and bad for the environment). 

GraphQL provides Back-End Developer's with a type system where they can describe a schema for the data, in turn this gives us Front-End Developers the power to explore and request the exact data we need from the API. With GraphQL, instead of multiple URLs an API has a single entry point where data is queried (or fetched) by describing it with a syntax that replicates its return shape in JSON. As Front-End Developers we can describe exactly the data we want while the Back-End Developer writes code to resolve the request. Best of all, everything happens in a syntax that can work agnostically with any programming language.

###What is so amazing about types?
GraphQL APIs are organized in terms of types and fields, not endpoints. Using the type syntax in this way allows you to access the full capabilities of your data from a single endpoint. GraphQL uses types to ensure Apps only ask for what’s possible and provide clear and helpful errors. Apps can use types to avoid writing manual parsing code.
Add more variant to Material-UI Typography
Published: 2021-07-14 16:24:28

Hey there,

You know that Material-UI Typography component has variant props that include 15 default types such as: `h1 ~ h6`, `subtitle1`, `body1`, and so on. you can see options here https://material-ui.com/api/typography/
now, if you want to add some more to your Typography component and have more design for it you must create a custom typography component like below.

this is `MyTypography.tsx` that is in my components directory.
```
import { TypographyProps, Typography } from '@material-ui/core'
import classNames from 'classnames'
import React, { ElementType, FC } from 'react'
import useMyTypographyStyle from './MyTypography.styles'

interface IMyTypography extends Omit<TypographyProps, 'variant'> {
  variant:
  | TypographyProps['variant']
  | 'h2Bold'
  | 'subtitle1Bold'
  component?: ElementType
}
const MyTypography: FC<IMyTypography> = (props) => {
  const classes = useMyTypographyStyle()
  const isCustom = Object.keys(classes).indexOf(props.variant) > -1
  return (
    <Typography
      {...props}
      variant={isCustom ? undefined : (props.variant as any)}
      className={
        isCustom
          ? classNames(classes[props.variant], props.className)
          : props.className
      }
    >
      {props.children}
    </Typography>
  )
}

export default MyTypography
```
In this case we made a component that it variant get undefined or default Material-UI Typography variant based on `isCustom` value and this value is the props when we pass to `MyTypography` component.
Also you must have a style file for add your design to your custom variants.
```
import { makeMyStyles } from 'theme'

const useMyTypographyStyle = makeMyStyles(
  ({ typography }) => ({
    h2Bold: { ...typography.h2, fontWeight: 700 },
    subtitle1Bold: { ...typography.subtitle1, fontWeight: 700 },
  }),
  { name: 'myTypography' },
)

export default useMyTypographyStyle
```
Thats it. we done it. now you have 17 values for your variant props and when you want to use Typography component you must use it like this
```
<MyTypography variant='h2Bold'>heading 2 with custom styles</MyTypography>
<MyTypography variant='subtitle1Bold'>subtutle 1 with custom styles</MyTypography>
```
Closure Explained!
Tags: javascript, webdev
Published: 2021-07-14 16:23:04

## Let's Define Closure
A closure is a function that makes use of variable defined in outer functions that have previously returned. What does this mean, Let's quickly look at an example.

```javascript
function outer(a){
    return function inner(b){
        return a + b;
    }
}
outer(5)(5); // 10
```
In the above code snippet, the function inner uses the variable "a" declared in a function named "outer," and when the function inner is called, the function outer returns the function called "inner," and this is called as a closure!

## A few things to note:

- We have to 'return' the inner function for the above example to work.
- We can call the inner function right away by using an extra ().
- We don't have to name the inner function (we just called it "inner" for learning purposes)


## How Closures Work

Only variables used in the inner function are stored!
Closures don't remember everything from an outer function - just the variables they require!

## Why do I need to know this?

### Private Variables

Variables that cannot be updated externally are supported in other languages. These are referred to as private variables, although they are not included in JavaScript. No need to be concerned - closures can assist!

```jsx
function counter(){
    let count = 0;
    return function(){
        count++;
        return count;
    }
}
```

```jsx
const counter1 = counter();
counter1(); // 1
counter1(); // 2

const counter2 = counter();
counter2(); // 1
counter2(); // 2

counter1(); // 3 this is unaffected by counter2.

console.log(count); 
// Uncaught ReferenceError: count is not defined - because it is private!
```

## TL;DR

- Closure is when an inner function makes use of variables declared in an outer function that has previously returned. 
- JavaScript will only remember values that are being used inside of the inner function, not all variables defined in the outer function.
- Closures allow us to define private variables and write cleaner code that separates our logic from our application.

_Thank you for making it till the end!_
What is CRM in a bank for?
Published: 2021-07-14 15:55:24

Orderliness, organization and high efficiency - this is how you can briefly describe what CRM is for in a bank. CRM (Customer Relationship Management) is an IT solution that increases the quality and speed of service through an individual approach to the client and automation of most of the processes. The experience of the bank operator itself fades into the background, so any division, even a very young one, can become a leader.


Main goals
Not all banking products are of interest to a particular client. The implementation of CRM will help the employee of the financial department not guess what the person wants - the system itself will select the services that interest him, analyzing gigabytes of data. It will be easier for the operator to interact with the customer who has addressed, having all the information in front of him. The manager will be able to see the general picture of the bank's work with details in the context of each process.


CRM systems for a bank https://apiway.ai/categories/crm-for-banks  are able to streamline work with clients, organize the selection of products and simplify control over processes, which will increase profits. CRM solutions can be divided into three types, based on the tasks:

analytical CRM;
operational CRM;
front office.

Analytical CRM
Clients make various transactions that are difficult for the operator to keep track of. CRM analyzes all financial actions in order to understand what the client is more inclined to do - take a loan, put a deposit, etc. This forms his financial preferences, as well as the "client image", highlights more promising clients. The system allows building analytical models for classifying customers, predicting purchasing behavior and helping the bank to make a better offer to the customer.
Simple Profile Card using Tailwind
Tags: tailwindcss, css, webdev, tutorial
Published: 2021-07-14 15:48:40

We will try create a simple profile card component that consist an image section of the people covering 3/4 height of card from top to bottom and remaining 1/4 for the text section for the name and the role. Let's open [https://play.tailwindcss.com/](https://play.tailwindcss.com/) to play this.

## Base Canvas

We will wrap the card later within this element that center any element inside it:

```html
<div class="min-h-screen flex justify-center items-center">
</div>
```

## Base Card

The card component base that has `w-48` width, `h-64` height and all edges rounded `rounded-xl` and has `bg-gray-200` background color for the visibility.

```html
<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200">
  </div>
</div>
```

## Adding Flex and Column Direction to the Card

On the card base, we add `flex` display and make it `flex-col` so we can create two element inside that start from top to bottom for image and text section later.

```html
<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col">
  </div>
</div>
```

## Adding Image Section

Inside the card base, we add an image element with the `w-auto` auto width of the parent, make it rounded like the base card but only on top edges `rounded-t-xl`. For the image source, we use our github profile image link.

```html
<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col">
    <img class="w-auto rounded-t-xl" src="https://avatars.githubusercontent.com/u/16485031?v=4" alt="avatar" />
  </div>
</div>
```

## Adding Text Section

Then below the image, there is an element that contains two text. the element wraps the text with `flex`, makes them start from top to bottom with `flex-col`, center them with `text-center`, and has padding `p-2` to keep them off from the image. The first text has `font-bold` with the base size of current screen `text-base`, and the second text is smaller with `text-xs` and emphasized with `italic`.

```html
<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col">
    <img class="w-auto rounded-t-xl" src="https://avatars.githubusercontent.com/u/16485031?v=4" alt="avatar" />
    <div class="text-center flex flex-col p-2">
      <span class="text-base font-bold">Dendi Handian</span>
      <span class="text-xs italic">Software Engineer</span>
    </div>
  </div>
</div>
```

## Adding Shadow

To make it less flat, we add `shadow` to the card.

```html
<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col shadow">
    <img class="w-auto rounded-t-xl" src="https://avatars.githubusercontent.com/u/16485031?v=4" alt="avatar" />
    <div class="text-center flex flex-col p-2">
      <span class="text-base font-bold">Dendi Handian</span>
      <span class="text-xs italic">Software Engineer</span>
    </div>
  </div>
</div>
```
Kratos: Digital Marketing Portfolio Case Study
Tags: tailwindcss, writing, portfolio
Published: 2021-07-14 15:45:02

[Kratos](https://nwosu-ihueze.github.io/kratos-tailwind/) Kratos is a digital marketing company based in Atlanta Georgia with between 10 - 20 employees who are mostly strategists, UI/UX designers and software developers. Their brand colors are black, gold and blue.

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


[Kratos](https://nwosu-ihueze.github.io/kratos-tailwind/) project was born during my internship at HNG where our test of knowledge in frontend was done in 2020 during the pandemic. I was a newbie without prior experience in HTML, CSS and Javascript. This was the beginning of my journey into the developer world. Though a fictitious company to test my skills as an intern, it still remains my most proud moment project as a developer. 

##Goal:
The primary idea was to promote a small and upcoming company that is centered on digital marketing by designing a website for wider reach. 

Kratos dwells in responsiveness across all screens, minimal design and little or no animation not to distract the visitor and simplistic as the visitor to the site at a first glance knows what the company is all about for enhanced user experience. 
![mobile screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1bcsjccvz6cvnph9uth.png) 

##Process:
Kratos was made possible using the following

#### Design

- Figma

#### Frontend

- Tailwind CSS

##Result:
The outcome includes having a functional and dynamic website for a wider reach and optimized engine search to drive more traffic to their page.

https://youtu.be/x8ISJLLJ2ss

##Role:
Kratos was engineered by Jibola being the designer of the project and me being the frontend developer.
My role was to implement the already designed file from figma and optimize it for great usability.


![Do More screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86msmx9qdepff1zieev5.png)