teleren/devto huggingface dataset:
Web Design for Web Developers
Tags: webdev, design, podcast
Published: 2022-07-28 20:07:19

{% spotify spotify:episode:09ZrMGbUlSDUeDvzG8vhcn %}

## What is HTML All The Things?

HTML All The Things is a [web development podcast](https://www.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

---





## What's This One About?

This week, Matt and Mike discussed the differences and similarities of web design and web development from the perspective of a web developer. When you go to work on a website as a web developer, you may soon find yourself outside of your comfort zone since web design is so closely intertwined with web development. Should you have design skills as a developer? Can you fill your design skill gaps with templates? 

## Topics & Timestamps
This week we came up with a collection of questions that we think may come across a web developer's mind when it comes to web design. The questions and their timestamps can be found below.

Do you need both web design and web development skills? | 00:02:08
- In an agency? As a freelancer?
Do you need design training in order to do web design? | 00:16:30
- What about illustrations?
Does the public (prospective clients) know the difference between web design and web development? Does it matter to them? | 00:26:25
How close is web design and web development? | 00:35:42
- Separate teams needed? How close do they work if separate?
Using templates and UI frameworks | 00:45:16
- Do you ask clients about templates? Show them templates as an example, don't mention the templates?
- Do you offer discounts for templated designs?
- When clients ask for big changes on static templates, how do you handle it? Inform them before proceeding?




## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok](Html All The Things)
Workflows Tips #31: Email User’s Manager, Search Calendar, and 10 Tips Meetup Recording
Tags: nocode, workflows, video, ipaas
Published: 2022-09-01 17:54:24

---
title: Workflows Tips #31: Email User’s Manager, Search Calendar, and 10 Tips Meetup Recording
published: true
date: 2022-07-28 20:05:48 UTC
tags: NoCode, Workflows,Video, ipaas
canonical_url: https://maxkatz.net/2022/07/28/workflows-tips-31-email-users-manager-search-calendar-and-10-tips-meetup-recording/
---

Welcome to another Okta Workflows Tips post. Read all other tips ⤵️
{% embed https://dev.to/oktaworkflows/okta-workflows-tips-57bj %}

In this post:

- Send an email to user’s manager
- Search Google Calendar for future events
- Online meetup reply: Discover 10 Helpful (and Awesome) Okta Workflows Tips 

## Send an email to a user’s manager

If you need to send an email to a user’s manager when a user is activated (or deactivated), here is how to get manager’s information:

[![Reading user’s manager information](https://katzmax.files.wordpress.com/2022/07/workflwos_tips31_managers_email.png?w=872)](https://katzmax.files.wordpress.com/2022/07/workflwos_tips31_managers_email.png)
<figcaption>Reading user’s manager information</figcaption>

## Search Google Calendar for future events

When you need to search a Google Calendar for future events, use **Date & Time – Now** and connect it to **Google Calendar – Search Events** card **Time Min** field.

[![Searching Google Calendar for future events](https://katzmax.files.wordpress.com/2022/07/workflows_tips31_google_calendar_search.png?w=929)](https://katzmax.files.wordpress.com/2022/07/workflows_tips31_google_calendar_search.png)
<figcaption>Searching Google Calendar for future events</figcaption>

## Online meetup reply: Discover 10 Helpful (and Awesome) Okta Workflows Tips 

In this video you will learn about 10 helpful (and awesome) Workflows tips to help you become a better automation builder. Bonus: we covered 5 more tips for a total of 15 Workflows tips!

{% youtube BsOGresgX20 %}



* * *

**Two resources to help you learn more**: 

🎥 Short how-to [Workflows videos](https://youtube.com/playlist?list=PLIid085fSVdvyK8F4xuk49EchBPmAVNHG) to help you become a better automation builder.

📘 Read our [Workflows How-To Guides](https://maxkatz.net/okta-workflows-how-to-guides/) based on community member questions.
What is a bug?
Tags: discuss, testing, softwareengineering, swe
Published: 2022-07-28 19:57:00

# Error, bug, defect, failure and fault [swe]

## tl;dr
An Error/Mistake in code generates a Defect/Bug, if the system does not perform as intended then it is a Fault, and if the user notices the fault, it is a Failure.

error/mistake   -> defect/bug/fault -> failure

## Differences
“When a developer commits a mistake in code it is called Error, when the error is found during tests it is called Defect, when a defect is  sent to production then it is called Bug, when the system doesn't perform as intended due to lack of resources or invalid data then it is a Fault and when the user perceive the fault or bug/defect then it Is Failure”

### Error
A mistake, misconception or misunderstanding from the developer (dev, sw, qa, etc) that leads to a bug/defect or a fault.

### Bug/Defect
Variance between expected and actual. The requirement is: wrong, missing or extra.

### Fault
Incorrect step, process or data definition that causes the program to perform unintended.
Ex: lack of resources or invalid data

### Failure
Not perform functions within specified performance and/or requirements.

### Issue
It means any activity in the software development cycle where
the source is some anomaly or flaw that need to be fixed. Ex: documentation, bug fix and requirement change.

### Technical Debt
A technical debt is an action in the software development life cycle that was intentionally delayed (that can or cannot generate a bug later).
How is really like to be a self-taught dev (harsh truth)
Tags: javascript, webdev, beginners, programming
Published: 2022-07-28 19:54:00

Well, as the title suggest I am actually a self-taught dev, so through this post, I will try to explain from my perspective the pros and cons of being one.

## Pros

![pros of being self-taught developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wsda4molu2qdcelmelh.gif)

- You become more disciplined (generally talking, even in life)

- You learn whatever you want, without being subjected to following any scholarly path with unnecessary topics

- You can study at whatever time of the day

*** *I didn't explain any of the points above simply because they are self-explanatory***

## Cons


![cons of being self-taught developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/797ym3q6yck0aeklecri.gif)
- You don't have tutors and even classmates, which makes it very difficult to determine your own capabilities and weaknesses

- You don't have any guide, so you keep learning unnecessary stuff, and wasting your time

- You get frustrated after a time of being self-taught because when you explore a topic you almost always find out that there are a lot of other issues you don't know and even complete ignore, which makes really hard to know if you are able to fit in a job position (finally declining in impostor syndrome)

- If you are completely self-taught and you don't have any related diploma, you have to be the best developer while trying to search job, otherwise you are not going to be taken seriously by anyone (mainly, while trying to find your first job)

***Being entirely self-taught is harder than it seems, and I don't really recommend *** 

### Conclution

If you are able to study at a university, or even a Bootcamp do it. You will surely avoid a lot of troubles, and if you decide to go self-taught, good luck and keep strong even if it is a hard way to get the knowledge I have to say that it is gratifying.
Always there’s the next
Tags: webdev, productivity
Published: 2022-07-28 19:29:15

“Always there’s more than us” and on tech, I think will be always there’s next, based on what I see for 5 years it’s anything new every day. Especially I talk about software development, with growth tech, community, and all companies also about what people need during the pandemic.

---
Some references we will see here :

1. Stackoverflow Survey 2021
you can see [here](https://insights.stackoverflow.com/survey/2021?_ga=2.236209345.190202062.1628102352-126161871.1625855113#section-most-popular-technologies-programming-scripting-and-markup-languages) and see what the popular for 2021. As developers, we know StackOverflow is a place you can find solutions, for many new people want to learn and get any error will every time try to find here
The survey is from many correspondents, you can see what the popular from any kind of tech.

2. Rising Star JS org
you can see [here](https://risingstars.js.org/2020/en#section-nodejs-framework) another one about Javascript and what the popular on it. we now for current software development the most programing language is Javascript, after NodeJs launch and the growth of JS it’s more than client-side.

---
Another thing I want to share it’s how we can adapt to that growth as personally, I think we can learn all of the new stacks but I also believe we can just concert on one of the stacks.

How to be an in the middle on that of all, it means we must have strong on one stack and we keep learning for what new, it will not easy but we must do that, if not you will go to the back and the other will go away pass us.

One more what I know is if we have strong on one language than we want to learn another it's easier than we want learn all thing together.

Thanks, and keep exploring the universe~

republish by author, first publish here : https://medium.com/@ekonurarifin/always-theres-the-next-61c51d18bef2
Sabi JavaScript if else for Pidgin English
Tags: javascript, pidgin, nigeria, youtube
Published: 2022-07-28 19:28:26

This is part of my Web Development series for beginners — In Pidgin English
If you can’t undertand what I am saying… that's because It’s not 100% English, but fun to learn HTML CSS, and Javascript in Nigerian Pidgin English.

{% embed https://www.youtube.com/embed/fqxYKi5gCjk %}

🚨 Linktree: https://linktr.ee/realdeejaydev

If this content was very helpful or you have issues with your code, don’t be shy to ask in the comment section of the video, we always reply there.
Fetching data with Nested Objects
Published: 2022-07-28 19:22:53

  So, I've decided to create this blog because I've seen several articles with people experiencing the same issue I dealt with. fetching data with nested objects.
  For people new to programming, such as myself, I think we often find ourselves running into hundreds of problems a week as we learn new skills. The most frustrating part about this, at least for myself, is running into an issue you've once resolved. For me, that is this blog topic.
  I first ran into this issue during my bootcamp course, but I was able to resolve it fairly quickly(maybe a few hours, up to a day). It was also from a public API. The next time I experienced this issue, the data was created from scratch, and when fetching the data, I would get a response that looks like the following:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w85gz90y2zy5gvwsr4s.png)
  When trying to access the data, I often ran into a few recurrent errors. Here are the most frequent ones I've encountered:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5mpxcc9717igszg1j8q.png)
- The server would try to identify the "id", and would fail to read it, despite console logging and confirming data being returned is correct.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekdkxyzjlpzqoiop5xh4.png)
 - The server cannot access the route. Assuming the route is setup correctly, this error occurs because the path to access the route,

```
http://localhost:3000/data/`${data.id}`
```
 cannot access the id of the data. This would work if there was a numerical value that represents the value in the first image above. The path would look something like 

```
http://localhost:3000/data/0/`${data.id}`
```

  What eventually worked for me, was using the Object.values and data.filter methods. Another important factor I discovered, was knowing how to Google(I'm still not good at it, getting better though). I didn't find a specific article or solution for this problem, I put pieces together from different articles, kept trying until I produced a result that allowed me to keep going. Heres what the code looks like:

```
useEffect(()=>{
      fetch(itemURL)
      .then(res => res.json())
      .then((allItems) => Object.values(allItems).filter((value)=>{
        return setItems(value)
      }))
      
     },[])
```
   Although I was able to resolve the issue to an extent, I still am left with questions. How does the data return as nested objects? Is it due to the amount of data being fetched? How can we fetch promise data from nested objects, and access them? Thank you if you read this far. If you have any questions, answers, or input, feel free to reach out. I am always open to learn something new.
Setup MongoDB Test Environment With Docker
Tags: webdev, beginners, mongodb, tutorial
Published: 2022-07-28 18:30:47

This tutorial helps you quickly setup a MongoDB instance so you can start learning this topic right away.
We are going to use MongoDB 5 in this series. I haven't tested with other versions so if you are from the past or the future, make sure you use the correct version as in this post.
## Running MongoDB with docker
If you have Docker installed, running MongoDB is really easy:
```sh
docker run -dit --restart=always -p 27017:27017 mongo:5.0
```
Here, I mapped the port 27017 of MongoDB to the port 27017 of the host. If your host doesn't have the port 27017 available, change that number to a different number.
You only need to do the port mapping if you want to connect to the instance using clients such as MongoDB Compass. If you use the shell (as I'm going to), you just need to run this:
```sh
docker run -dit --restart=always mongo:5.0
```

I run the container in detach mode and make it always restart for convenient.
Let's check if the instance is running:
```sh
docker ps
```
![Running mongoDB with docker](https://datmt.com/wp-content/uploads/2022/07/image-35-1024x567.png)
As you can see, I have already setup one instance and it's available there.
You should be able to see your instance as well.
## Connect to the MongoDB Shell inside Docker container
As mentioned above, I'm not going to use a client but the MongoDB shell inside the docker container. From the docker ps command's output, I know that the container id is: bbc5....
So, I can execute inside the container by issuing the following command:
```sh
docker exec -it bbc5a637b0e6 bash
```
![](https://datmt.com/wp-content/uploads/2022/07/image-36.png)
Inside the container, type mongo and you can access the mongo shell
![The mongo shell](https://datmt.com/wp-content/uploads/2022/07/image-38.png)
## MongoDB Hierachy
In MongoDB, at the top level, you have databases. Inside databases, there are collections. Inside collections, you have documents.
Documents are JSON objects that contain keys and values.
![MongoDB hierachy](https://datmt.com/wp-content/uploads/2022/07/image-41.png)
## Basic MongoDB commands cheat sheet
To clear the screen type:
```sh
cls
```
And hit enter
To show available databases, type:
```sh
show dbs
```
![Show mongo databases](https://datmt.com/wp-content/uploads/2022/07/image-39.png)
To use a particular database, type:
```sh
use <dbname>
```
![Use a database](https://datmt.com/wp-content/uploads/2022/07/image-40.png)
One important note here: There is no create database command in MongoDB. You can "create" one by simply using the use command.
To show all documents in a collection, type:
```sh
db.<collectionName>.find()
# For example:
db.friends.find()
```
![Listing documents in MongoDB collections](https://datmt.com/wp-content/uploads/2022/07/image-42.png)

## Conclusion
In this post, I've shown you how to setup MongoDB and do some basic queries. We are going to learn more about MongoDB in the next articles.
VIDEO: How do you assess software engineering skills? skill assessment in 3 steps
Published: 2022-07-28 18:26:00

If you’re searching for the best solution to assess software engineering skills or how to evaluate a software developer, keep watching this video to get info on the developer assessment tools, what are the skills required for a software developer, and get software engineer coding (test). 

🔗USEFUL LINKS: 
🎯Developer skill matrix template free (65+ tech roles)  https://cutt.ly/skillmatrix_free
🔍Engineer coding test free https://cutt.ly/skill_tests 
🚀Start 1st review with Ace - SIGN UP: https://bit.ly/3yiLycy

-------------------------------------------------

00:22 - Best solution to assess the skills of a tech team (360-degree review)
00:37 -  3 steps of software developer skills assessment
00:48 - Ace, a developer assessment tool
02:46 - What skills should a software engineer have?
03:30 - Engineer coding test free

-------------------------------------------------

Help your team grow with Ace!

FREE ebooks for engineering management & tech leads: https://www.getace.io/ebooks?utm_source=devto&utm_campaign=ebook_promo
Ace's blog: https://blog.getace.io/
Grow This Grow That podcast: https://community.getace.io/
Instagram: https://cutt.ly/vectorly_inst
Twitter: https://twitter.com/VectorlyHQ
Linked List Part-2
Tags: beginners, programming, tutorial, python
Published: 2022-07-28 18:07:28


Linked List Insertion at the front--

![Insertion at the front](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa7hkyqojzmy3eq2gbgl.png)

```
class Node:
    def __init__(self, data):
        self.data=data
        self.ref=None 
class LinkedList:
    def __int__(self):
        self.head=None
        
    def begin(self,new_data):    
        q1=Node(new_data)
        q1.ref=self.head
        self.head=q1
```
Insertion at the Middle--

![Insertion at the Middle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvwps4o1og24za0zqpkm.png)

```
def inbet(self,prev,new_data):
        if prev.ref is None:
            print('LL is empty')
            return
        q4 = Node(new_data)
        q4.ref=prev.ref
        prev.ref=q4
```
Insertion at the End--

![Insertion at the End](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bodb63481sz0cv7zggs5.png)

```
def last(self,new_data):
        q2=Node(new_data)
        if self.head==None:
            self.head=q2
            return
        temp=self.head
        while(temp.ref):
            temp=temp.ref
            
        temp.ref=q2
```

Printing Of Linked List--

```
def print_ll(self):
        if self.head is None:
            print("Linked list is empty")
            return
        n=self.head
        while n:
            print(n.data)
            n=n.ref
```

Function Calling--

```
h1=Node(2)
h2=Node(3)

k1=LinkedList()
k1.head=h1
h1.ref=h2

k1.begin(1)
k1.inbet(k1.head.ref,5)
k1.last(8)

k1.print_ll()
```
What web dev jamstack for a site with 400+ pages and 50+ users
Tags: webdev, react, jamstack
Published: 2022-07-28 17:43:16

We are using the big 3 CMS as we speak (Drupal, Wordpress, Typo3), and plan to migrate to headless.

We have no app project in the think tank. Most published content need minimal page / text styling, but some content does. Content are mostly text image, search directory, structured info.. pretty standard. No extranet.

First, would you go headless?

If yes witch stack would be the fastest route and the better for needs I stated in title?

If you dont, what CMS would you use?
Create a Cryptocurrency finder with React
Tags: react, javascript, webdev, design
Published: 2022-07-28 17:27:00

This is me being relaxed home on weekend and writing this little yet powerful application that find the price, capital market, crypto and other data for any cryptocurrency you search for.
I have used React js using react hooks useState and useEffecthooks.

{%youtube coIMCnHRp00%}

I am not professional with React, but the apps that I create and I find interesting to share and help the community with, I don't hesitate to do so.


This is the App.jsx code - if you're interested to take a look to the code [ with comments :) ] 

```javascript
import './App.css';
// install axios
// npm i axios
import Axios from 'axios';
import {useState, useEffect} from 'react';
// https://documenter.getpostman.com/view/5734027/RzZ6Hzr3?version=latest

function App() {
// Setting up the initial states using react hook 'useState'
const [search, setSearch] = useState("");
const [crypto, setCrypto] = useState([]);

// Fetching crypt data from the API only 
// once when the component is mounted
// i forgot to tell you that you may
// want to know about React  life cycle.

// code here to fetch API using useEffect
useEffect(() => {
  Axios.get(
`https://api.coinstats.app/public/v1/coins?skip=0&limit=100¤cy=INR`
  ).then((res) => {
    setCrypto(res.data.coins);
  });
}, []);


  return (
    <div className="App">
      <h1 className='title' >Cryptocurrency Finder</h1>
      <input 
      type="text"
      placeholder='search (only small letters) ...'
      onChange={(e)=> {
          setSearch(e.target.value)
      }}/>
      <table>
        <thead>
          <tr>
          <td>Rank</td>
            <td>Name</td>
            <td>Symbol</td>
            <td>Market Cap</td>
            <td>Price</td>
            <td>Available Supply</td>
          </tr>
        </thead>
       {/* Mapping all the cryptos */}
      <tbody>
      {/* filtering to check for the searched crypto */}
      {/* ------------------------------------------ */}

      {crypto
      .filter((val)=> {return val.name.toLowerCase()
      .includes(search)})
      .map((val, id)=> {
              return (
                <>
                  <tr id="id">
                    <td className="rank">{val.rank}</td>
                    <td className="logo">
                      <a href={val.websiteUrl}>
                        <img 
                        src={val.icon} 
                        alt="logo"
                        width="30px"/>
                      </a>
                      <p>{val.name}</p>
                    </td>
                    <td className="symbol">{val.symbol}</td>
                    <td>{val.marketCap}</td>
                    <td>{val.price}</td>
                    <td>{val.availableSupply}</td>
                  </tr>
                </>
              )
            }
          )}


      </tbody>
      </table>
    </div>
  );
}

export default App;
```
#100DaysOfCode
Tags: programming, flutter, 100daysofcode, mobile
Published: 2022-07-28 17:17:26

I'm publicly committing to the **100DaysOfCode** Challenge starting today!

Let's see what I'm able to achieve in these 100 days. I'll try to post my work every 2 days to focus more on coding than other things.

I will be focusing on _Flutter_ development and technical writing.

#100DaysOfCode