teleren/devto huggingface dataset:
Blackboards, for all tastes and budgets
Tags: blackboard, projectmanagement, teamwork, remotework
Published: 2022-08-23 20:41:28

Over the past couple of years, we've all been experimenting with new ways of working. 

We have had many meetings with colleagues, clients and consultants all over the world and it is not always easy to explain yourself only in words.

I want to share with you the best tools I have discovered and tried.

## 1. Miro
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg8lpd96ihlv9f16oa6s.png) 
It is a digital whiteboard that allows you to create different projects and organize notes. You propose a series of predefined templates but you can define your own in a very easy way. Miro has a very convenient feature to allow users to stick notes as PostIt.
See: [miro.com](https://miro.com)

## 2. Mural
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onzxqkl4594jqu64q9mh.png) 
Like Miro, it's a digital whiteboard. Also in this case it is possible to use the proposed example templates or model your own. The board can be accessed by several people at the same time and the work is shared in real time.
Like a Miro, you can stick notes as PostIt in a very simple way. 
When working with large groups of people, a Mural feature called "Summon" comes in handy, which allows the facilitator can force all participants to look at his own view.
See: [mural.co](https://www.mural.co)

## 3. Trello
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m72cn5v8zhx8e099meti.png) 
This is a tool that allows you to organize projects and everything related in message boards. The organization is structured with respect to the instruments listed above.
Through cards and lists it allows the subdivision of activities organized into checklists, assigned to different people. Thanks to this tool you can keep track of deadlines, assignments, progress.
See: [trello.com](https://trello.com)

## 4. Azure Boards
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7a6c3ctruv3ug5w3z2e.png)
Azure Board allows you to create workflows, problem types, epics and many other typical components of Application Life Cycle Management (ALM). It allows you to monitor the capacity of the team, plan development sprints, create and update activities efficiently, collaborate with team members through real-time updates thanks to the use of an interactive and versatile dashboard, obtain a personalized reporting experience based on customer needs.

## 5. Excalidraw
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxucta3radbi9p93azml.png) 
Last but not least, this is a virtual whiteboard for sketching hand-drawn. For example, it makes it easier to share diagrams during meetings.
See: [excalidraw.com](https://excalidraw.com)
Use a narrowed focus to complete big projects
Tags: work, productivity
Published: 2022-09-13 20:13:13

---
title: Use a narrowed focus to complete big projects
published: true
date: 2022-08-23 20:40:00 UTC
tags: work, productivity
canonical_url: https://rachsmith.com/use-a-narrowed-focus/
---

### Link: [# Dr. Emily Balcetis: Tools for Setting & Achieving Goals | Huberman Lab Podcast #83](https://youtu.be/7YGZZcXqKxE?t=700)

I was listening to this Huberman Lab podcast where the guest Dr. Emily Balcetis was talking about the mental strategies elite runners use to finish their races. Her initial assumption was that they'd be hyper aware of everything going on around them in the race: the other competitors, how far they'd travelled, how far they have to go. It turned out they were doing the opposite. They were actually narrowing their focus to the next few steps. By reducing the scope of what they were focused on they were able to perform better across the race, whether that be a short distance or a long distance.

As I was listening, I realised that this is the same strategy that I use to stay motivated at work.

At CodePen we are working on a big upgrade to the product. Well, it is less of an upgrade than a tear-down-and-rebuild. It is an enormous amount of work, like a years-long undertaking. When I think about how long I've been working on it, and how much work there is to go, it is completely demoralizing. So I don't think about that. I narrow my focus to _today_. What can I get done today? How can I be most effective today?

The more I put my "blinders" on, put my head down and focus on what is immediately in front of me, the more I achieve over a longer time period. When I get in to this zone, I am like a lazer beam blasting through the work. The thing about lazer beams is that you want to make sure they are pointed in the right direction! I help with choosing a direction, but ultimately that is the decision of the founders.
I need Flutter open source Apps, medium to large in size so I can learn from them
Tags: flutter, flutterbloc, android
Published: 2022-08-23 20:38:31

I'm working on a data collection App, with a little bit complex use-cases, I have already built its backend, and it should support temporarily offline data storage, I need you to point me to some Open source Apps that are

**Still active and regularly updated, medium to big in size, and should be of the type that is professionally designed for the real world with clean architecture in mind**

not those samples that were built just to show some simple techniques and don't care about structure, design pattern or clean-Architecture. I found [Invoice_Ninja_App](https://invoicing.co/) which is large enough to incorporate professional design techniques, I learned from it a lot, but it uses Redux for state management, I need more examples like it but incorporating other state management techniques e.g bloc, getX, streams ... etc, I searched on GitHub and all I found are small chunks of old projects or small in size not cleanly built. The net is saturated with such apps that do not add new ideas to my knowledge anymore.

Please, any help would be greatly appreciated.
Github contributions for beginners
Tags: github, programming, problemsolving, beginners
Published: 2022-08-23 20:36:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zglvzm6wysivmthqb420.png)

**Want to make your first contribution on Github. I've got a repo for you.**

[github.com/callofcode](https://github.com/ademclk/callofcode)

**First go to Issues section of the repo. Choose a problem want to work on. Then submit your solution. It's super easy to get started using Github.**

**_How to contribute?_**

1. Clone the repository first. (Forked to your profile.)
2. Create your own branch.
3. Add your files.
4. Make a pull request.
5. After your solution reviewed it will be merged to main branch.

Any questions? Feel free to send me an email, ademonurcelik@icloud.com
Article Review from "My Dumbest CSS Mistakes"
Published: 2022-08-23 20:26:15

Im very new to the coding world, so a lot of the stuff that I have been looking at has been fairly intimidating. However, after reading the article "MY Dumbest CSS Mistakes" by Geoff Graham, it had some reassuring moments. For instance, it is very common to make errors with typos or forgetting to use "var()" around a CSS variable. But, a good thing about making those types of mistakes, as stated in the article, is that CSS is very forgiving because it will keep looking up the cascade in search for a potential match. Also, I always assumed how people name certain variables and always have a clean and pretty code. But, it is not easy naming them and in fact they can quite often be difficult because it is common to use an incorrect version of a variable that has been named, for example "color-primary" and "primary-color". I know this has probably been talked about a lot throughout the coding world and may be common knowledge, but as I am starting this coding bootcamp in about a month, I thought maybe this could help out someone else and reassure them that those little details are in fact multiple failures that have been perfected time and time again.
Simplest way to center a div
Tags: html, css, webdev, productivity
Published: 2022-08-23 20:23:00

As a web developer sometimes centering a div is the toughest job ever.
**So I am here with a coolest and the easiest way to center a div.**
_So here's the html code_

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
    </style>
</head>
<body>
    <div id="parentContainer">
        <div id="childContainer"></div>
    </div>
</body>
</html>
```

> I have made two divs in the body. One is with id **parentContainer** and the other one is **childContainer**.
_Let me share you the css code._

```
#parentContainer{
    width: 400px;
    height: 400px;
    background-color: brown;
}
#childContainer{
    width: 100px;
    height: 100px;
    background-color: black;
}
```
_I just simply gave **height of 400px** and **width of 400px** and the **background-color brown** to the **parentContainer**_
_Similarly I gave **height of 100px** and **width of 100px** and the **background-color black** to the **childContainer**_
**Our div is not centered yet, lemme show you guys**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f023u5q29bvvvel349r3.PNG)

Position property in css is used to set how element is positioned on the page. The default value for position element is **static**. The other values for position element are **relative, absolute, fixed and sticky.**
Now if we set **position: absolute;** to a DOM element it becomes absolute with respect to whole page. This would be useful if we want to center the div with respect to whole page.

On the other hand giving **position: relative;** to the parent element, makes the children element (with **position: absolute;**) absolute, **related to the parent element , not to the whole page.**
**Now if we mention _top: 0;_, _left: 0;_, _bottom: 0;_ and _right: 0;_,** with **margin: auto;** and position elements in containers, **it centers our div.**

```
#parentContainer{
    position: relative;
    width: 400px;
    height: 400px;
    background-color: brown;
}
#childContainer{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/057cy6y2mv2pzvasv28h.PNG)

**Congratulations You have set your div to center.**
Take the DEV Community Satisfaction Survey!
Tags: meta, announcements, feedback
Published: 2022-08-23 20:18:10

---
title: Take the DEV Community Satisfaction Survey!
published: true
description: 
tags: meta, announcements, feedback
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeyg0nsybxkkscfamy32.png
---

Hey there, DEV Community members!

This is a quick note to let you know that we just published a brand new **[DEV Community Satisfaction Survey](https://us12.list-manage.com/survey?u=85076d6fb7eea423ec9b0de34&id=46f95e37dd&attribution=false).** 

The goal of this brief questionnaire is to learn what you love about the platform, what could be better, and how you use DEV. Our team looks forward to reviewing your responses so we can make DEV into the best place it can be. 

### [>> Take the DEV Community Satisfaction Survey](https://us12.list-manage.com/survey?u=85076d6fb7eea423ec9b0de34&id=46f95e37dd&attribution=false) 

The survey will remain open through September 23, 2022 (11:59 PM UTC) but we'll explore reissuing it on a regular basis in the future. 

<mark>As an added bonus, you'll have the option to opt-in to our raffle as a thank-you for taking the time to share your feedback. We'll be randomly raffling off five codes worth $50 towards the [Forem Shop](https://shop.forem.com).<mark> 🎉

- - - 

Thank you for being a member of this community and thank you _in advance_ for sharing your valuable thoughts with us in [the survey](https://us12.list-manage.com/survey?u=85076d6fb7eea423ec9b0de34&id=46f95e37dd&attribution=false).
Run a Power Automate flow with an HTTP request
Tags: webdev, productivity, cloud, tutorial
Published: 2022-08-23 19:34:53

Hey, there! In this tutorial, we will learn how to create a web API from Power Automate, so that we can use it from any application.

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

## **Part 1. Create the Power Automate flow.**

As a first point, let's create an empty workspace of type _Automated Cloud Flow_:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpbhdokqdp647x0xsevs.png)
 
Now, let's look for the trigger called: _When to HTTP request is received_, which will allow us to activate the flow when an HTTP request is made to this process.

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

Then, we will need to define the JSON format of our schema for the API. For this, we can use an example by using the option: _Use sample payload to generate schema_:

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

```json
{
    "emailAdress": "daniel@esdanielgomez.com",
    "emailSubject": "Hi from Power Automate",
    "username": "esdanielgomez"
}
```

By accepting, the schema will have been generated according to the example and now we can use those variables in subsequent actions of the flow.

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

Since in Power Automate it is a requirement that there is a trigger, and at least one action, now we are going to add an action that allows you to send an email according to the data received in the web API:

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

Finally, when saving the flow, the endpoint of the web API will be visible:

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

## **Part 2. Test Power Automate flow**

With all this, now we can call our flow through HTTP post from any application. Here we can see an example from Postman and email as a result:

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

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

## **Thanks for reading.**

I hope you liked the article. If you have any questions or ideas in mind, it'll be a pleasure to be able to communicate with you and together exchange knowledge with each other.

See you on [Twitter](https://twitter.com/esDanielGomez) / [esDanielGomez.com](https://esdanielgomez.com)!

Regards!
Off the rails
Tags: beginners
Published: 2022-08-23 19:17:05

I joined an apprenticeship program that offers a free bootcamp and locks participants in a 2-year low-pay contract (25k fine for breaking agreement). 

As bad as their terms are, it seemed like a sure-fire way to get industry experience. I was willing to lock myself into this situation because I wanted to start out my tech career with training wheels. 

There is safety in having someone else set my benchmarks, curriculum and expectations. That way, if I end up focusing on the wrong things I can blame someone else.

I found out yesterday that the bootcamp is delayed anywhere from 1 to 10 months. My bills aren't taking any time off; so it's time to get a job. 

In my free time; I'll be working towards my goal of making that predatory apprenticeship unnecessary.
rollertoaster - A gamified Discord bot for advanced task management.
Tags: productivity, node, mongodb
Published: 2022-08-23 19:01:00

Hey DEV,

Since many organizations have shifted their work to social platforms such as Discord in the last two years, organizing events now come with the newfound challenge of effectively assigning tasks and keeping track of the work being done. Being a part of various organizations ourselves, two common issues we noticed were mismanagement and lack of coordination.

To combat this, I, along with @mihiraggarwal bring to you, rollertoaster, a gamified discord bot that helps effectively and efficiently assign tasks based on discord roles and keeps a track of all the work done. You can check it out on [github.](https://github.com/mihiraggarwal/rollertoaster)

Few key features:
- Roles-based tasks assignment
- Individual user profiles
- Todo status
- Personalised verification of tasks
- Gamified leaderboard based on points earned by members to act as incentives

Don't forget to upvote our product on [producthunt.](https://www.producthunt.com/posts/rollertoaster)

We'd really appreciate feedback and would love to answer any questions!

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

![Bot Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qorww2bgxgs82azisow.png)

![Tasks Addition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8r7zo12i1lbq445xhweb.png)

![Task Assignment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdzd4u9tm5cb19aewkkm.png)

![Todo Status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zslhiyg4jao5r5g2xp3u.png)

![Leaderboard and User Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntpimskrp4i3uet7ek8x.png)
Buy Apple Pencil 2nd Generation
Tags: apple, pencil, 2nd, buy
Published: 2022-08-23 18:52:16

Today we will show you how you can buy Apple Pencil 2nd Generation and will give its review too.Apple Pencil sets the standard for how drawing, note‑taking, and marking up documents should feel.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctijgdbgc1zru2qravt5.png)
Read more at:
https://hecodesit.com/buy-apple-pencil-2nd-generation/
Two Sum - I
Tags: javascript, leetcode
Published: 2022-08-23 18:43:34

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.


Example 1:

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].

```js
var twoSum = function (nums, target) {
  let index = [];
  let map1 = new Map();
  for (let i = 0; i < nums.length; i++) {
    map1.set(nums[i], i);
  }

  for (let i = 0; i <= nums.length; i++) {
    let compliment = target - nums[i];
    if (map1.has(compliment) && map1.get(compliment) !== i) {
      return [i, map1.get(compliment)];
    }
  }

  return index;
};

console.log(twoSum([2, 7, 11, 15], 9));

```
Why should you get a laptop acer predator helios 300
Tags: acer, gaming, product, pc
Published: 2022-08-23 18:42:42


![laptop acer predator helios 300](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3emmsnkq1oyzeu5ve74v.jpeg)

So, why should you get a laptop acer predator helios 300. Well, in this article we will see the reasons why you should get one!

let’s think this the following way, you are searching a laptop to game on, or atleast a really good laptop and powerful. well the laptop predator has all you need! to play at 1080p 120 fps! or even more.

## What games can I play in the laptop acer predator helios 300

So, to start you need to know that you can play any game, and probably the most of them at 120 fps and 1080p!

## Where can I get one?

So now that you know why you should get one, where can I get one? 
Well, we did the hard work for you! and we found some good deals on amazon.com !

link: [amazon](https://amzn.to/3w6ddwZ)
Responsive design and how I utilize it in my Blog
Tags: css, webdev, design, bootstrap
Published: 2022-08-23 18:38:02

##Did this ever happen to you?
You visit a website on your phone and some of the information is cut off or displayed in a manner that no human would ever think was a good idea. Then you go have a look on your desktop or laptop computer at the same website and it looks fine. No cut off data or rearranged elements. This is a lack of responsive design. 


##Well what is responsive design?  
An approach to web design where the site renders well on a variety of screen sizes and devices. You might have noticed if you visit this very web page on a desktop vs a mobile device it will look different but still look good and function well. That is responsive design at work. Responsive design is so prevalent in today's internet that most people only notice when it's not there.

##A majority of web traffic is from mobile devices.  
According to statista 58.99 percent of web traffic in q2 of 2022 is from mobile devices. While this a majority there is still 41.01 percent from tablets, laptops and desktops. The same user might use your website on both mobile and desktop. They expect the site to look and feel mostly the same both times. If it's not, they might get frustrated and leave the site. This really exemplifies the importance of responsive design.

##How do I implement responsive design for my blog?   
I use SVGs (scalable vector graphics) for my logo and icons. This means they look the same regardless of size. Any size attributes use relative units like %, em, vh or vw and not pixels. This way everything is relative to other elements or screen size and your page should look relatively the same on a mobile device or a large gaming monitor. The most important part is the framework I use that does a lot of the heavy lifting for me

##bootstrap
This front-end framework is set up with mobile first responsive websites in mind.  Originally released in 2011 by developers at Twitter. The framework was the blueprint for Twitter's front end since 2010 and still powers it to this day. Using a grid system with breakpoints that change the display based on screen size. Bootstrap is an incredibly powerful tool with way more functionality than I utilize in my little blog website. Anyone interested in front-end development or UI/UX design should consider using bootstrap.
The framework has the option  to use compiled css or to customize the framework using your own  sass pipeline. This is the approach I took so as to reduce the file size of my css because as I said before bootstrap has a lot more functionality than I plan to utilize. 

##In conclusion 
Responsive design is imperative to have in any modern web application in my opinion. The variety of devices people use is only growing larger. Just look at the new folding smartphones. So the need for responsive design will only grow. Next time I'll talk about hosting in more detail and how I plan to actually get this project online.