teleren/devto huggingface dataset:
Top 6 Responsibilities of a Hire Flutter Developers
Tags: flutter, dart, ux
Published: 2021-05-19 12:57:42

Understanding the main responsibilities of a Flutter Developer

 
1. Designing and developing applications

A Flutter developer will provide you with consistent performance from designing the application, planning a timeline, and developing any complicated application within a short time compared to any other native apps out there. They will likewise be able to include the important features at the time of development and predict potential bugs.

 
2. Write clean code

It is a fact that an expert Flutter developer will write a readable and comprehensive clean code. This will help scale the app faster, allowing the development team to invest significantly less time in its operation.

 
3. Take part in the development lifecycle

While creating an app, it will be imperative for a Flutter developer to work with QA engineers, UI/UX designers, project managers, and others. Consequently, a competent Flutter developer is imperative for producing better results, and he should be able to cooperate with all the other members. Apart from this, they should also function as specialists for predicting timeline estimations for the production of the project.

 
4. Fix bugs

The QA engineers will conduct several tests to identify any malfunction or bug after completing the production of every single feature. Working with a competent Flutter developer will enable you to fix any issues once identified during the testing stage.

 
5. Investigate technologies

At present, the IT industry is making continuous advancements while innovations are being introduced from time to time. In this way, it would be possible for the Flutter developers to provide you with their knowledge plus creativeness for expanding and enhancing your application design.

 
6. Follow innovative trends

Every developer must go on learning continuously. However, Flutter was initially released in 2017, as many as three significant modifications have already been made to these frameworks. Consequently, a Flutter developer can assist you with several updates for various platforms.

Learn more here: https://www.rlogical.com/blog/top-6-responsibilities-of-a-hire-flutter-developers/
"Am I a bad developer?" - A question developers commonly face
Tags: css, javascript, html
Published: 2021-05-19 22:00:41

Being a developer is hard, no doubt about it.
Software development is a field where nobody knows everything. Everyone in this field loves to share and talk about the technology they are working on or they have explored. **Everybody wants to learn some sort of technology they are lacking because nobody wants to become a bad developer.** If you are a beginner or experienced understand that technology is a never-ending thing so there will be always something to learn and you can’t learn all the technology, frameworks, tools which are coming out every day. Accept that when you see someone’s proficiency in a certain domain or technology it doesn’t mean he/she knows everything. They are also like you and they also don’t know something in tech that you know. Today everyone in software development needs help from StackOverflow or other resources so you’re not alone with this feeling. **Just because someone knows a framework or library which you don't know doesn't mean you're a bad developer!**



> A good programmer understands that that they have to continue to learn and grow. They strive to do their best at every effort, admit to failures and learn from them. A good programmer loves to program, and would do so in their spare time even if they already spend 80+ hours a week programming.
[(Source)](https://softwareengineering.stackexchange.com/questions/41473/how-can-i-know-whether-i-am-a-good-programmer)

Here's a couple of tips for you:

* **Don't judge yourself** - People tend to undervalue themselves. Ask a mentor instead
* **Learn the basics first** - React, jQuery, Vue might be wonderful technologies, but remember, they are all based on JavaScript! Learn the fundamentals first before going on to the frameworks/libraries. It will make life easier!
* **Don't try to learn everything** - If you know at least 2-4 programming languages (With frameworks included), that's awesome! There are over 700 programming languages. Don't try to learn them all
* **Be passionate** - Yes, you should *want* to learn more. *Wanting to learn more makes you a very good programmer!*
* **Work on personal projects** - (ok, well, I'm still in school, and I dont have a job yet), but still, have personal projects. It makes coding fun!!!

Hopefully you found this useful
It's time to talk WWDC21 Wishes
Tags: wwdc, apple, podcast
Published: 2021-05-25 05:45:18

---
title: It's time to talk WWDC21 Wishes
published: true
date: 2021-05-19 15:17:12 UTC
tags: WWDC, apple, podcast
canonical_url: https://www.compileswift.com/podcast/s02-e21/
---

{% spotify spotify:episode:27k5aQTS5a4wHWuOgGft7U %}

Spoiler… I’m not really concerned with any new hardware, but I’ll take anything you want to throw my way for free Apple.

In this episode I have a few thoughts on some nice treats that I surely would appreciate from the announcements this year.

What would you like to see? [Let me know](peterwitham.com/contact) and we can compare after they keynote.
Destructuring.....with objects
Published: 2021-05-19 23:22:26

Last week I posted about destructuring assignment. The post was mainly centered around destructuring with arrays. The only fair thing to do with this post is to talk about how destructuring could also be used on objects. Our example will make use of the summoner Yuna once again and her aeons. Since we need a key-value pair we'll have the aeons be the value and the key will be the temple she received them.

```
let yuna = {besaid:"Valefor", kilika:"Ifrit", djose:"Ixion", macalania:"Shiva", bevelle:"Bahumaut"}
```

Already with this, we can access the aeons through dot notation.

```
yuna.besaid 
return "Valefor"
```
Since we have only three aeons that deal elemental damage, let's assign the elements to the respective aeon.  

```
const { kilika:fire,  djose:lightning, macalania:ice } = yuna

``` 
That line of code sets the proper element variable name seen above to the correct aeon. Fire would return Ifrit, lightning would return Ixion and ice would return Shiva. Take this and try it yourself. 


Learning about destructuring has kept me pretty busy but its something I look to make more of a habit as I continue to code.
Cómo agregar un vídeo de YouTube en Dev.to
Tags: devto
Published: 2021-05-20 02:32:37

Para insertar un vídeo de YouTube lo primero es tener el enlace, del enlace solo vamos a necesitar el id del vídeo.

por ejemplo. 

> https://www.youtube.com/watch?v=1QZHT9by2xo

el id esta entre `v=` hasta `&`, ósea que el id es `1QZHT9by2xo`
pero si el enlace es así https://youtu.be/1QZHT9by2xo el id es la parte final de la url, después del `.be/` es decir  `1QZHT9by2xo` 
una vez identifique el id del vídeo solo debe copiar este código en la publicación de dev.to
```
{% youtube 1QZHT9by2xo %}
```
 
y quedaría así

{% youtube 1QZHT9by2xo %}

fuente 
[https://dev.to/issuehunt/boost-your-productivity-using-markdown-1be](https://dev.to/kazz/boost-your-productivity-using-markdown-1be)
Codebytes: provide / inject is a bliss in vue3
Tags: vue, vue3, javascript, codebytes
Published: 2021-05-20 16:29:37

---
title: Codebytes: provide / inject is a bliss in vue3
published: true
description: small introduction about provide/inject helpers in vue3 
tags: #vue #vue3 #javascript #codebytes
---

Before the existence of these wonderful helpers **provide / inject** from the vue3 [composition apis](https://v3.vuejs.org/guide/composition-api-provide-inject.html#scenario-background), if we have to pass props from a top-level component to the child-level components, we have to ensure that the props are passed all the way down or we should rely on state managers like vuex to avoid passing props.

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

But these new helpers allow us to consume the props in the child components easily from the parent component without passing them redundantly.

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

Let's look at the below example where the parent component provides the title prop and the child component utilizes the title prop by simply injecting it.

```javascript
// article-component.vue (ancestor)
import { ref, provide } from 'vue';
....
setup() {
  const title = ref('Article Title');
  provide('title', title);
}

// article-title-component.vue (child)
import { ref, inject } from 'vue';
....
setup() {
  const title = inject('title');
  return {
     title
  }
}
```

And what if the child component wants to update the injected prop? Let's provide the update callback as well.

```javascript
// article-component.vue (ancestor)
import { ref, provide } from 'vue';
....
setup() {
  const title = ref('Article Title');
  provide('title', title);
  provide('updateTitle', (newTitle) => title.value = newTitle);
}

// article-title-component.vue (child)
import { ref, inject } from 'vue';
....
setup() {
  const title = inject('title');
  const updateTitle = inject('updateTitle');
  
  updateTitle(`Draft: ${title}`);
}
```

See, that's why it's a bliss!

PS: Used [https://www.figma.com/figjam/](https://www.figma.com/figjam/) for the quick flow diagrams.
Sharing contracts
Tags: javascript, node, typescript, startup
Published: 2021-06-03 06:32:18

This is a concept that really drives home how nice it is when your entire stack is written in the same language. I am using node/typescript on the backend which means I can share stuff between the ui and api.

I have a separate repo that holds common stuff like error codes, request payloads and response payloads:

```ts
// Contracts
export interface SearchProductsRequest {
  page: number;
  q: string;
}

export interface SearchProductsResponse {
  nextPage: number;
  products: Product[];
}
```

Then I can use that to bridge the gap between api and ui:

```ts
// API
async function searchProductsApi(
  req: Request<void, void, void, SearchProductsRequest>,
  res: Response<SearchProductsResponse>
) {
  // req.query is strongly typed
  const result = await search(req.query);

  // res.send will throw a ts error if result doesn't match the response
  res.status(200).send(result);
}
```

```ts
// UI
// (driver is a simple wrapper around the fetch api)
async function searchProducts(args) {
  // data will be strongly typed
  const { data } = await driver<SearchProductsRequest, SearchProductsResponse>({
    url: "/products",
    // will throw a ts error is args doesn't match the request
    data: args,
  });
}
```

Now both sides of my application can have confidence that they will be receiving/sending the same payloads!
Future in 3D animation
Tags: animation, 3danimation, animationinfuture, animatedvideos
Published: 2021-05-20 18:38:25


Have you wondered how 3D animations can cure people's illnesses? 

Yes. With augmented reality and virtual reality, psychological syndromes are being treated efficiently. 

Thanks to 3D animators who spend hours to render and master the exact situation so that the patients do not cross the thin line between virtual reality and virtual video. 

Over the past two decades, 3Danimation has developed to such an extent that various other industries depend upon 3Danimation. Right from medicine to mining, it can change the game in these fields. 

**Huge applications of animation in industries**
Some of the fields where 3D animation can be used in the near future are medical, traffic engineering, efficient building modeling, earthquake analysis, architectural walkthroughs, Space exploration, automobile designs, the education sector, Films, digital signboards, and much more. It's keenly seen that 3D animation comes in hand with digitalization.

Industries like architecture, interior designing, mechanical engineering, and corporate companies are using animations to visualize their design. In the future, the adaptability of 3D will be augmented and tailored to particular needs. 

**Animated video marketing is the future** 
Future entrepreneurs utilize 3d animation as a tool in digital marketing for promoting brands or firms. Even in the retail business, 3D animation can be used as a powerful selling tool demonstrating the uses of products visually to the clients. 

With Covid-19 impacting worldwide, online education can be empowered with 3d animated demonstrations. This in turn develops strong visual knowledge to the students.

**Monster growth in Film Industry**
One of the most common applications of 3D animation is films. The most successfully executed 3d animation movie "Avatar" has created a milestone worldwide. People are enthralled by top animation projects from Walt Disney, Dreamworks, etc. 

**Closing Note:**
There is always room for improvement and demand for creative 3D animators in this industry. Therefore, 3D animation is being widely used around the world yet it is not used to its full potential.
How to improve problem solving skills ?
Tags: help, career
Published: 2021-05-21 05:28:09

So I have been learning web Development and I have been giving interviews since almost 5 months now . I have been rejected in the some of the interviews due to my bad problem solving skills and the problems they give are mostly related to arrays or strings only . I want to know how you people learned problem solving and if you can suggest some resources or give some tips then it would be really helpful. 
( This is my first post here , looking forward to connecting more and making most out of this community ) .
Day 9/30 : Dropmorphism using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-05-28 12:19:43

Welcome to Day 9 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Dropmorphism](https://1.bp.blogspot.com/-MxGioWk1lk4/YKOe08dbOII/AAAAAAAAACc/SbDFRxBI2jYIgVI6nA_-mCm4I8PWASpnACLcBGAsYHQ/s600/p9.gif)

**➜ Video Tutorial :**

{% youtube 1FygYA8bUIY %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/05/dropmorphism-using-html-and-css-water.html


**➜ Instagram Post and Reel for Day 9 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

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

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
Docker Compose for Prometheus + Grafana
Tags: docker, prometheus, grafana, devops
Published: 2021-05-21 13:45:24

It becomes important that with all the tools you have in production, you can test the same flows end to end on local with very fewer efforts. The rationale behind such is the reduced feedback cycle that saves a dev from taking a long time to achieve the desired outcome.

I was working with sending some telemetry data from my Golang web application to Prometheus and then create a Grafana dashboard out of it. But to test the flow I needed a local setup of Prometheus + Grafana so that I can check if the metrics are right and that I am building the right PromQL query to create the dashboard.

I am maintaining a Github repo for all the docker-compose setup I require for my local testing and now Prometheus + Grafana is a new addition to it. If you also need a similar setup and save your setup time in future and focus more on building things refer to this post or my Github Repository.

Clone the repo: `https://github.com/ninadingole/docker-images`

Then go to `prometheus-grafana` folder and run `docker-compose up -d`.

This will start Prometheus on `http://localhost:9090` and Grafana on `http://localhost:3000`.

![Prometheus running on localhost:9090](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x2q0o6tq9vi9zov75ia.png)

![Grafana settings to connect to local Prometheus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj2r8jwkg8jk1gc5qx79.png)

There is also a `prometheus.yml` configuration file which you can use to add the local apps that you want to scrape, a note: if your application is running inside a docker then use host.docker.internal as your hostname with the port to scrape the target.

Once you have added the configs to connect Grafana to Prometheus like above image, you are ready with an end-to-end setup on your local.

I hope you will find this docker-compose configuration pretty useful and saves your time.

Happy Coding!

---

## Reference:
- https://github.com/ninadingole/docker-images

## cover image credits
- [Dominik Lückmann](https://unsplash.com/@exdigy) | Unsplash

---
> Originally published on [iamninad.com](https://iamninad.com/prometheus-grafana-docker-compose/)
Common Linux Commands for Newcomers
Tags: linux
Published: 2021-05-21 23:49:36

While many [Linux distributions](https://distrowatch.com/) (e.g., [Ubuntu](https://ubuntu.com/)) include graphical interfaces, it can be useful—and fun—to learn how to navigate the command line.

One of the questions I get from students most often is: what are some good commands to learn on Linux? 

It took me a long time to learn Linux commands (along with tmux, ssh, vim, pgp and many other programs). Now I would recommend learning the command line by [exercise](https://www.practicelinux.com/) because that saves a lot of your time.

## Commands

While there are many different answers to this question, here are some that I recommend to all new users.

`date` - show the current date. Always good to know

`pwd` - When you're connected to a server via ssh and want to make sure you know exactly where you are, pwd (print working directory) lets you view the directory you are currently located in.

`cd` - change directory, files are organized into directories starting from the root `/`.

`ls` - You're probably familiar with this command in other operating systems. Simply put, ls(short for list) is used to show the contents of a directory or if run at the command line, the contents of your current directory.

`./program` - start program

`cat` - displays the contents of a file.

![linux command line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfhkwrppzzb4z80akdzb.png)

## Why command line?

As a linux user, you may frequently use the command line to accomplish tasks. The command line lets you do things very quickly.

Sometimes you might need to do something simple, like open a file in your text editor of choice. Learn [vim](https://www.vim.org/) because it's a very powerful editor

Other times, you might be crafting complex commands that automate a specific task. There are many [linux commands](https://bsdnerds.org/what-is-linux-shell/).
About DOM (Document object model) in HTML
Tags: html, javascript, css, webdev
Published: 2021-06-08 17:18:47

---
title: About DOM (Document object model) in HTML
tags: html, javascript, css, webdev
author: Saketh Kowtha
---
### What is DOM ?

DOM (Document object model) is the tree structured data representation of the objects that comprise the structure and content of a document on the web page.

### Who will create this DOM ?

Browser's will generate DOM from HTML.

Here is a simple example
![Dom tree example](https://media.geeksforgeeks.org/wp-content/uploads/DOMExample-3-1.png "Dom tree example")

### Why do we need DOM ?

We can't manipulate HTML directly. There is a way to manipulate i.e extracting the entire HTML of the page, modifying it and replacing the entire HTML document. But this is very complicated and expensive w.r.t performance. So using DOM we can manipulate styles, content and attributes quickly with the help of javascript.


We can see DOM object in browser inspector. This is how it look like

![Dom In Browser](https://www.easeout.co/images/uploads/dom-devtools.png "Dom In Browser")

### How to manipulate DOM ?

Using javascript api's we can manipulate DOM object. Some of them are

- createElement
- appendChild
- removeElement
- querySelector 
- querySelectorAll
- insertBefore
- addEventListener
- removeEventListener
- removeChild
- replaceChild
- cloneNode
- setAttribute
- getAttribute
- removeAttribute

Here are some DOM manipulation api examples
```javascript
   const btn = document.createElement("button");
   const onClick = () => alert("clicked");
   btn.textContent = "Creating Node";
   document.body.appendChild(btn);
   btn.addEventListener("click", onClick);
   btn.setAttribute("disabled", true);
   btn.removeEventListener("click", onClick);
   document.body.removeChild(btn);
```
[Try in Codesandbox](https://codesandbox.io/embed/eloquent-shtern-vt623?fontsize=14&hidenavigation=1&theme=dark)

![Hope you enjoyed](https://media.giphy.com/media/KqZW4NMpogrB0UN6VU/giphy.gif)
Get started with Snowpack, React and Typescript in <1 min
Tags: react, snowpack, typescript, template
Published: 2021-05-22 06:55:29

I wanted an easy and (very) fast way to get a frontend project started so I could demo things. I wanted to be able to focus on a business case and not the boilerplate, so I created a github template that allows you to get started in less than 1 minute with a fully setup project.

Go check it out: https://github.com/nexys-system/boilerplate_snowpack_bootstrap
Learning resource how browser loads js?
Tags: beginners, javascript, reactnative, webdev
Published: 2021-05-22 23:21:17

Hello I want to learn exactly how a browser renders a page and how javascript is loaded. Which events run first like onload type thing.

can someone point me in right direction? I tried to google but nothing relevant comes up just general posts by people =/ what would the source documentation be

any advice apprecaited.