teleren/devto huggingface dataset:
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2021-09-07 12:00:12

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259427b3da.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ Why do all HTML emails get blocked?

___A:___ Because they are all `<span />`.
 -->
I am enjoying the AWS world.
Tags: devjournal
Published: 2021-09-07 11:57:38

In my last [post](https://dev.to/anjandutta/moved-my-blog-from-wordpress-to-serverless-k1h) I described how I moved from wordpress to serverless.

Though it is very early to say, but I am already seeing the benefits of it.

- Switched to a cleaner interface.
- No worries about performance drop every now and then.
- My site ranking is up.
- The hosting cost is down to 1/4th.

Yes, my hosting cost has been reduced to 1/4th of what I used to spend. Though the blog is not a massive one but I am really enjoying using all those cutting edge infra within this next to nothing cost.

The initial setup was a bit lengthy as few things are manual.

I have to be honest about it, even if AWS provides all possible documentation to tell us how to use their services, it's still far out of reach from the non techy bloggers.

I mean I can guide a non techy blogger to setup a wordpress blog in a single article and it goes like, Click! Click! Click! and you are done.

But in AWS you have to have familiarity with the terms. And basic knowledge to understand the what and why.

And if you are okay with that then the benefits are numerous.

First of all, the free tire plan includes more than what you need and you can actually run a site without even spending a penny on it for a year.

Yes, a year!

Of course that comes with it's own limitations (not so limited). But for a [blog](https://anjandutta.com) like mine, it's a win win. 

Will share some more insight in upcoming dev journal. Thanks for reading.
Why do Programmers quit on the way
Published: 2021-09-07 11:43:17

Yes, programming is difficult, whether you like it or not, you will feel low at some point. But this is not meant to discourage you, but during any journey, there are obstacles. Just like a normal quote, ‘Life is hard’, relate that to coding. Writing a completely functioning software and deploying it is something that requires strong techniques.

1.Imposter syndrome

For real, this has been a long-term problem for everyone. Of course, programmers experience this disease. These are moments when you feel discouraged by objects like failure to implement something. Or when you feel like others are ahead of you. Yeah, it might look like a minor problem, but it makes many people quit the software development journey.

2. Market Demand for new skills

If you are in this field, kindly be ready to learn even if you are an experienced engineer. But the best thing is that once you know the basics of one language like java, it will be easier to learn c++. The tech market demands that you be updated with trending technologies. Companies don't employ new skills, therefore you need to keep up. If you can't then you must accept the reality that programming is not our thing.

3. Lack of a Mentor

It might look like a joke, but know that having a mentor who you look up to and yearn to become like that person is awesome. A mentor will guide you on the steps to follow. Mentors have a mandate to update you on trending skills because they have been in the field for much longer. But when you just code without anyone guiding you, it's high time that people will give up when working alone.

4. Commitment time

Just like marriage, for you to be a good engineer, you need to spend maximum hours learning various concepts, the average minimum time for a good software developer is 1000. There is no shortcut. But remember, most of the stuff you will learn while on a job.

5. Computer science course over 6-month Bootcamp

Yes, both of these people will have skills in writing code. But most graduates will take other paths because they feel the self-taught programmers have taken their roles. Also, the Bootcamp people at some times feel less appreciated over the people with CS degrees. But what I believe in is hard work and consistency. Yes, the CS degree person has much knowledge compared to Bootcamp person. But that should not discourage you. Everyone has a share in this cake.

6. Difficult algorithm interviews

For real, interviews mainly from big companies are difficult. Trust me, even some data structures and algorithms from some interviewees are out of topic. These people want a person who can think out of the box and come up with an idea. For your information, the tasks you will be doing are much easier than those of interviews. Just prepare well. Don’t give up on one rejection.
Work! Work! Nice programming journey.
How to flatten array using Javascript
Tags: javascript, webdev, 100daysofcode
Published: 2021-09-07 11:38:37

## Problem

So you have some nested array but need to flattened it so you use it inside your codebase. There are actually a couple of ways to do it.

Here is what we are gonna take a look at;
- Array.prototype.flat()
- Reduce and Concat Solution
- Recursive Solution
- Stack Solution


## 1. Array.prototype.flat() Solution

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

- **Returns:** A new array with the sub-array elements concatenated into it.

```jsx
const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

// We can also give optional depth argument to flat function
console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]
```

Flat can  also work on nested arrays

```jsx
console.log(arr2.flat(Infinity))
// expected output: [0, 1, 2, 3, 4]
```

Or it can remove empty spots in the array

```jsx
const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]
```

## 2. Reduce and Concat Solution

```jsx
const flatten = (arr) => {
  return arr.reduce(function (flat, toFlatten) {
    return flat.concat(Array.isArray(toFlatten) 
			? 
			flatten(toFlatten) 
			: toFlatten);
  }, []);
}

flatten([[1, 2, 3], [4, 5]]); // [1, 2, 3, 4, 5]
flatten([[[1, [1.1]], 2, 3], [4, 5]]); // [1, 1.1, 2, 3, 4, 5]
```

## 3. Recursive Solution

We can also apply recursive solution with the help of concat function

```jsx
const flattenArray = (input) => {
  let result = []

  if (!Array.isArray(input)){
    return input
  }

  for (let data of input) {
    result = result.concat(flattenArray(data))
  }

  return result;
}

let arr = ["a", 0, [1, 2], 3, [[5, 6], [[8, 9]]]]

console.log(flattenArray(arr))
// ["a", 0, 1, 2, 3, 5, 6, 8, 9]
```

## 4. Stack Solution

We can also solve this by the help of stack data structure

```jsx
// non recursive flatten deep using a stack
// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
function flatten(input) {
  const stack = [...input];
  const res = [];
  while(stack.length) {
    // pop value from stack
    const next = stack.pop();
    if(Array.isArray(next)) {
      // push back array items, won't modify the original input
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // reverse to restore input order
  return res.reverse();
}

const arr = [1, 2, [3, 4, [5, 6]]];
flatten(arr);
// [1, 2, 3, 4, 5, 6]
```

## Links

- [Array.prototype.flat() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)

- [Flatten an array using javascript](https://dev.to/nandkk05/flatten-an-array-using-javascript-568l)

- [Merge/flatten an array of arrays](https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays)
Simple Log in form using pure css 
Tags: html, css, purecss, css3
Published: 2021-09-07 11:10:27

 How to build login form in html and using pure css in few lines of codes. Let's make today login form using pure css. 

1.First we need a code editor, 
  I am using VS code editor. 
2.Let's make index.html and 
  style.css file in our 
  working folder. 
3.Let's add following code in y our editor.
![reset code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe5tdae34iawf9x0j5pn.jpg)

4.Now,time to work on style 
  file. 
5.First, reset all auto margin 
  and padding of browser.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2pus2sk1pafrkhajoft.jpg)
6.Let's work on wrapper class 
  style,add following code in 
  css file. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tku05owjm34ig66wrq0v.jpg)
7.Now add style on inside 
  wrapper class elements, I 
  did it and code is below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tku05owjm34ig66wrq0v.jpg)
8.Now add some css hover effects to our code, let's add following code

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

Here, our simple login form is ready 
🙏 Thank you for reading
🙏 Share your feedback for 
   more improvement
👍 Like the article
Schedule Your Self-Reflection
Tags: growth, reflection, motivation, career
Published: 2021-09-28 11:02:15

---
title: Schedule Your Self-Reflection
published: true
date: 2021-09-07 11:02:00 UTC
tags: growth,reflection,motivation,career
canonical_url: https://x-team.com/blog/schedule-your-self-reflection/
---

 ![Schedule Your Self-Reflection](https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2021/09/Schedule-Reflection.jpg)

Self-reflection is crucially important for leading a healthy, productive life, but only when it's done right. All too often, what we consider "self-reflection" are simply unprompted moments of doubt and insecurity that give in to. These are not useful; they are damaging.

Consider what self-reflection actually is: It's the conscious consideration of our beliefs and actions. It means careful thinking to analyze our beliefs and actions so that we can grow as individuals. Self-reflection should produce an actionable result. A change.

This isn't something that you can do on a whim. You can't be writing JavaScript code, think _Is this really what I want to do my whole life?_, fall into a minor existential crisis, and call it reflection.

There's a time and a place for self-reflection. Schedule it and design a process around it. For one, figure out what you want to reflect about. Work? Relationships? Habits? Life? Hobbies?

Next, come up with the right questions. This needn't be hard. There are plenty of resources online to browse for inspiration. For example, when you're reflecting on your work, a few questions to ask yourself every Friday could be:

- What did you do well?
- What can you improve?
- What did I enjoy?
- What did I not enjoy?

That could be enough to get you going. If a question doesn't work for you, swap it out for one that does. The format needn't be fixed either. You could write down your answers in longhand, type them out, or record them. Whatever works for you.

When you're deliberate about your self-reflection, you'll be able to see through camouflaged insecurities. Instead of an excuse for self-doubt, self-reflection will become a powerful tool that will keep you on track and help you achieve your life's goals.
Full-stack? T-Shaped? Comb-Shaped? Developer or Engineer?
Tags: career
Published: 2021-09-07 20:08:51

---
title: Full-stack? T-Shaped? Comb-Shaped? Developer or Engineer?
published: true
date: 2021-09-07 10:49:27 UTC
tags: career
canonical_url: https://rachsmith.com/full-stack-t-shaped-comb-shaped-developer-or-engineer/
---

Whenever I come across a form field that asks for my occupation or profession, I hesitate before answering. I believe my official documented role title with CodePen and Active Theory is/was "Engineer", but I’m pretty sure that was just what it needed to be to satisfy the US Visa requirements they hired me under.

I think that software engineer probably describes what I do now and so I use that title in my bio, but I feel weird about it because I literally dropped out of a software engineering degree when I was 19. I dropped out because I thought it was "too hard" and I wasn't "smart enough". I was so very wrong on both points, but that decision still haunts me when I consider claiming the Engineer title.

I feel similarly hesitant about calling myself a full-stack developer. Yes, in the last 10 years I have been paid to do _basically everything_ from setting up cloud infrastructure, designing and creating databases, writing server side code through to animating interfaces, building JavaScript apps and styling HTML. And yet, the **full** in full-stack throws me. Can anyone really know the full stack, fully? I don't think I'm there yet.

Recently I learnt about the concept of the [T-Shaped Developer](https://letslearnabout.net/blog/what-it-is-a-t-shaped-developer-and-why-you-should-be-one/) and I thought hey, that sounds like me. But then I gave it some more thought and still wasn't sure if that was right. Even though I'm strongest in client-side tech, I have been writing the code for the [CodePen](https://codepen.io) backend for years, so am hardly a novice in that area.

So then after some more research on this topic, I discovered the [comb shaped developer](https://killalldefects.com/2020/02/22/specializing-vs-generalizing-careers/): who has "the breadth of a generalist and multiple specialisations that they’ve gravitated to throughout their career". Finally, this feels right. I am a comb. I am also, most definitely, overthinking this job title thing altogether.

I’m assuming as I'm thinking about this there’s a whole group of people walking out of 6 month dev boot camps, slapping on a full-stack software engineer title, and moving on their merry way, with nary a thought to whether that is appropriate. I should take a leaf out of their book. Instead, I’ll be here having an existential crisis the next time I’m asked to list my occupation on the patient intake form at the Dentist.
Filter FullCalendar and DataTables
Published: 2021-09-18 17:50:30

---
title: Filter FullCalendar and DataTables
published: true
date: 2021-09-07 10:31:08 UTC
tags: 
canonical_url: https://dcblog.dev/filter-fullcalendar-and-datatables
---

This guide will provide an outline on integrating a set of input filters with an instance of FullCalendar and DataTables on the same page.

## **Filters**

Don’t forget to add the `table-filters` class to your filter elements.

The filters are standard inputs, except these are not inside a form element, instead, this data will be sent via AJAX.

```

<div class="form-group">
    <label for='title'>{{ __('Title') }}</label>
    <input class="form-control table-filters" id='title' type="text" name="title" value="{{ old('title', request('title')) }}">
</div>

<div class="form-group">
    <label for='status_id'>{{ __('Status') }}</label>
    <select name="status_id" class="form-control select2Ajax table-filters" id="status_id" data-url="{{ route('admin.ajax.statuses.search') }}">
        <option value=""></option>
    </select>
</div>

```

## **FullCalendar setup**

Here is a simplified example of our main initialisation for our FullCalendar instance.

```

const calendarElement = document.getElementById('calendar');
const bookingsCalendar = new FullCalendar.Calendar(calendarElement, {
    headerToolbar: {
      start: 'prev,next today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    events: {
        url: '{{ route('admin.ajax.bookings.get-calendar') }}',
        method: 'GET',
        extraParams: function() {
            /*
              Here we will grab the values of each of our filter input
              These will then be sent to the server
            */
            return {
                title: $('[name="title"]').val(),
                status_id: $('[name="status_id"]').val(),
            };
        }
    },
});
```

## **DataTable setup**

This is our simplified DataTable setup.

```

const bookingsTable = $('#bookings-table').DataTable({
  processing: true,
  serverSide: true,
  responsive: true,
  searching: false,
  ajax: {
      url: '{{ route('admin.ajax.bookings.get-table') }}',
      data: function(data) {
          // this is the equivalent of the 'extraParams' method used in FullCalendar
          data.title = $('[name="title"]').val();
          data.status_id = $('[name="status_id"]').val();
      }
  },
  columns: [
      { data: 'title' },
      { data: 'status' },
  ]
});
```

## **Listening for filter actions**

Finally, we need to listen for updates on our filters, when we detect a change we will then manually reload the calendar and table with the updated data parameters.

```

$('.table-filters').on('change keyup', function() {
  bookingsTable.draw();
  bookingsCalendar.refetchEvents().render();
});
```
redis-traffic-stats
Tags: redis, go, opensource
Published: 2021-09-07 10:22:04

redis-traffic-stats is a live monitor and analyze RESP packets in your server. This tool does not touch Redis Server. Just monitors redis client request and response on the real time.

All redis stats exported as prometheus metrics so you can visualize analytics data on your favorite dashboard (like grafana).

Features:

    Live Monitoring
    Low CPU utilization
    Prometheus Exporter
    Basic-Auth protection
    Top commands of count
    Top command and keys count
    No dependencies
    No Redis performance degradation


https://github.com/c1982/redis-traffic-stats
Color 2 Areas underlines in Recharts without mixing colors caused by the Opacity
Tags: recharts, react, javascript
Published: 2021-09-07 10:17:51

This is how to separate the charts areas color when dealing with `recharts`, 

I'm using react with `material-ui` theme ( the useTheme line 🙄 )

U need to create 3 areas for the 2 lines,
this method work only when u know that 1 line is always on top

```
function RevenueChart({ data }: RevenueChartProps) {
  const theme = useTheme();
  return (
    <div style={{ height: 300, width: '100%' }}>
      <ResponsiveContainer>
        <AreaChart
          width={730}
          height={250}
          data={data}
          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
        >
          <XAxis dataKey="name" tick={{ fill: theme.palette.text.hint }} />
          <YAxis tick={{ fill: theme.palette.text.hint }} />
          <CartesianGrid strokeDasharray="3 3" />
          <Area
            activeDot={false}
            dot={false}
            strokeWidth={0}
            type="monotone"
            dataKey="diff"
            stroke={theme.palette.primary.main}
            fillOpacity={0.6}
            fill={lighten(theme.palette.primary.main, 0.2)}
          />
          <Area
            activeDot={{ r: 8, fill: theme.palette.primary.main }}
            strokeWidth={2}
            type="monotone"
            dataKey="incomes"
            stroke={theme.palette.primary.main}
            fillOpacity={0}
            dot
          />
          <Area
            activeDot={{ r: 8, fill: '#ea6b78' }}
            strokeWidth={2}
            type="monotone"
            dataKey="outcomes"
            stroke="#ea6b78"
            fillOpacity={0.6}
            fill={lighten('#ea6b78', 0.2)}
            dot
          />
          <Tooltip content={<CustomContent />} />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}
```

the data prop has the form of:
```
type data = {
  incomes: Array<Numbers>,
  outcomes: Array<Numbers>,
  diff: Array<Array<Number, Number>>,
}
```

the incomes & outcomes are clearly just your data,
the diff is an array of arrays, the `ith` inner array is formed by `[ incomes[i], outcomes[i] ]` as u can see incomes is on top so it's the start point & outcomes is in the bottom, the end.

the components are created in this form:

```
<Area
    ...
    strokeWidth={2}
    dataKey="diff"
    fillOpacity={0.6}
    fill={lighten(theme.palette.primary.main, 0.2)}
    ...
    />
```

the colored area between the lines has no stroke (strokeWidth = 0) but has a fill color (opacity != 0),

```
<Area
    ...
    strokeWidth={2}
    dataKey="diff"
    fillOpacity={0}
    ...
    />
```

the top line have no fill color (opacity = 0) but have stroke (strokeWidth != 0),

and the bottom line can have both

The main idea is that `Area` component can take data as an array of start & end limits
No politics at work
Tags: career, leadership, inclusion, politics
Published: 2021-09-07 11:29:26

---
title: No politics at work
published: true
date: 2021-09-07 10:17:00 UTC
tags: career,leadership,inclusion,politics
canonical_url: https://craignicol.wordpress.com/2021/09/07/no-politics-at-work/
cover_image: https://craignicol.files.wordpress.com/2020/03/wp-1583529282395.jpg?w=1200
series: we-can-do-better
---

_No politics at work._

_We’ve got these tabulating machines to send to Hitler._

_Talking politics doesn’t get us paid._

There are plenty of companies withdrawing into their shells of privilege because the founders are scared of [getting uncomfortable](https://dev.to/craignicol/get-uncomfortable-498p).

If you want a more uplifting picture of what happens when you talk politics at work : [you save lives.](http://naepasaran.com)

Whatever the antecedents of the recent wave of decisions to ignore people’s lives by “not talking politics”, the effects are defiantly anti-union, anti-women, anti-BLM, anti-trans and pro-christian-conservatism.

Even at companies who may have introduced these policies as a reaction against actual fascist viewpoints on their internal discussion boards (which I haven’t seen is the case, but I have heard some justify it that way), banning all politics supports the fascists.

It chills the speech of the oppressed, and gives fascists ammunition that “our free speech is under attack”.

There’s plenty of policies that allow you to talk about maternity leave and single payer healthcare without allowing blood and soul nationalism.

Companies that ban all politics are companies that have weak leadership who only want to align with the prevailing winds, in the most conservative way possible.

Companies, especially tech companies, can change the world. But too often they just reinforce the status quo.

Even companies that want to liberate us from the office, or liberate us from fossil fuels, or liberate us from Earth, still reinforce the power structures that led to the problems they claim to want to solve.

To summarise this, and other points,

_“we’re uncomfortable with you having a life outside work”_

* * *

Follow the prior discussion on twitter:

{% twitter 1386829447655997442 %}

{% twitter 1386807239957168128 %}

{% twitter 1386789529147817984 %}

{% twitter 1386791341636587521%}
1.13 Ensure there is only one activeaccess key available for any single IAM user
Tags: aws, security
Published: 2021-09-07 10:14:44

I am currently trying to automate this process; I understand that the 'aws iam list-access-keys' is usually followed by '--user-name Bob' however this would then require manual intervention to run through each user.

Is it possible to pull all users and active access keys into a single datasource and then return an escalation / email if more than one Active is found per user?