teleren/devto huggingface dataset:
I have trick draw line with text
Tags: css, trick
Published: 2020-06-09 11:45:38

---
title: I have trick draw line with text
published: true
description: CSS Draw line with text align center
tags: CSS, Trick

---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wrrgl6pp4sw3i1j68ht9.png)

Look at screenshot the red Circle line just draw a line with text **Here** sometimes UX design UI just like that. how to achieve the effect?

This is simpley requirement just need CSS Pseudo-class full code

```scss
@mixin line-with-text($text) {
  text-align: center;
  position: relative;
  border-bottom: 1px solid #ccc;
  margin: 100px 0;
  &::before {
    position: absolute;
    top: 100%;
    left: 50%;
    content: $text;
    color: pink;
    display: inline-block;
    background: white;
    transform: translate(-50%, -50%);
    padding: 0 10px;
  }
}
.line {
  @include line-with-text("Here");
}

```

You can copy the Snippet to you project and replace the argument `Here` all is done. also you can custom all the `mixin`  attributes.

Here is [line-with-text](https://codepen.io/ihavecoke/pen/pogjyRK) online dem, Hope it can help you :)
Road to Genius: beginner #1
Tags: javascript, beginners, computerscience
Published: 2020-06-09 11:44:07

This is the first post of my "Road to Genius" series. Each day I solve several challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, but you will learn a ton of new and interesting things as you go.

![programming challenges intro](https://dev-to-uploads.s3.amazonaws.com/i/zvr80im80lbszy0xewii.png)

I've created a brand new account with username "IlyaDEVto", now let's click play and get started.

![programming challenge](https://dev-to-uploads.s3.amazonaws.com/i/pq0bs1userrdjybo0gm5.png)

The first challenge is pretty simple, the number of answers we can choose from is limited, making our life easy. Now let's have a look at the code, the first line creates an array with name `arr` with certain values (5,0,4,9,0), then we have a variable `R` which is zero. Then we have a `while` loop whose condition is based on the array's length. This loop executes the next line of code as long as `arr` is not empty. The challenge is to fix two bugs (indicated by 🚀 and ☃️).


To find 🚀, we must look at the question (which is the comment on the very last line), it says `such that R=18 (number)`. We know that initially the `R` value is zero, so the code must be changing `R` such that it eventually becomes 18. If you take the sum of all the values in `arr` you will notice they sum up to 18. And if you already know a little bit of coding you can see that 🚀 should be `R`, because that line of code under the while-loop does exactly that.


To find ☃️ you can take a peek at the answers these are (R, arr and pop). R and arr are both variables, and it does not make sense to use these because for instance the code `🚀 += arr.arr();` is incorrect and will throw an error, the `()` parentheses indicate a function call, so the only function we have is `pop`. This removes the last item from `arr` and returns its value. That value is added to 🚀, which we already know to be `R`. 

So that buggy line becomes: `R += arr.pop();` And just like that we have solved our first challenge.

![programming challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/pfxkpp2fifgcgyuwoexn.png)

If you already know a little bit of programming, solving this should take you no more than 10 seconds, writing this whole description is just for the purpose of having a detailed explanation to non-programmers.

---
If you feel inspired and motivated to upgrade your coding + debugging skills, join me on the Road to Genius at https://nevolin.be/codr/
Demystifying React Hooks vs Redux
Tags: redux, reacthooks, javascript, react
Published: 2020-06-09 11:37:16

---
title: Demystifying React Hooks vs Redux
published: true
description: What is the difference between Redux and React Hooks? In this article, you'll find a walkthrough into these features and how they fit in each use-case.
tags: redux, reacthooks, javascript, react
cover_image: https://images.unsplash.com/photo-1561736778-92e52a7769ef
---

What is the difference between Redux and React Hooks? <a href="https://www.imaginarycloud.com/blog/react-hooks-vs-redux/" target="_blank" rel="noopener">In this article</a>, you'll find a walkthrough into these features and how they fit in each use-case.
Enterprise Risk Management
Tags: enterprise, riskmanagement, riskmanagementplan
Published: 2020-06-09 11:29:29

<a href="https://www.stayinbusiness.com/resource/risk-management/" title="Risk Management"><strong>Risk management</strong></a> provides organizations a mechanism for controlling uncertainty, loss or any other occurrence that could jeopardize the company's interests. Business operations are always prone to risk exposure which is why leadership and management teams adopt a software enabled approach to <a href="https://www.stayinbusiness.com/resource/enterprise-risk-management/" title="Enterprise Risk Management"><strong>enterprise risk management</strong>.

<strong>Enterprise Risk Management Software – Core Purpose</strong> 

The prime objective of using an enterprise risk management software is to curtail the impact of risks that an organization's operational landscape is exposed to through a series of interconnected systems that provide interfacing and reporting capabilities. The software allows you to detect patterns from historical data in order to forecast future risks and identify the preventive measures that need to be taken. Short and long term risk mitigation efforts can also be identified which increases the return on investment. 

The tool lets you manage risks arising from commonly encountered commercial as well as compliance related issues.

<strong>Enterprise Risk Management Software Benefits</strong>

<ul>
<li>Identifying and integrating all possible risks into business strategy and planning procedures </li>
<li>Better response measures across all operational segments</li>
<li>More detailed understanding of the risk factors that disrupt business and damage resources </li>
<li>Safeguarding the company's businss interests and public perception</li>
<li>Better resource utilization and capital expenditure to increase ROIs</li>
<li>Getting rid of process related inefficiencies and redundancies</li>
</ul>
Flutter : How to draw with custom painter
Tags: flutterwidget, flutter, flutterpaint, flutterappdevelopmen
Published: 2020-06-20 14:29:44

---
title: Flutter : How to draw with custom painter
published: true
date: 2020-06-09 11:29:27 UTC
tags: flutterwidget,flutter,flutterpaint,flutterappdevelopmen
canonical_url: https://medium.com/innovation-incubator/flutter-how-to-draw-with-custom-painter-e64d1c57eca9
---

### Flutter : How to draw with custom painter

### What is custom painter ?

Custom painter is used to draw standard as well as custom shapes on the screen and is very powerful, it let’s you draw anything that you can think about.  
All you need is a little imagination and a little maths.

Here is a simple basic quick run so you don’t need to worry about technicalities and get straight to painting.

![](https://cdn-images-1.medium.com/max/380/1*wYPyLrt-6e1WGul4S0Ip2A.png)<figcaption>Created with custom painter.</figcaption>

#### 1.Custom Paint.

In widget tree, we only have to add the **CustomPaint** widget and give it a painter.

![](https://cdn-images-1.medium.com/max/600/1*IDXY6cRoGpMTwGMAicfLTw.png)

#### 2.Custom Painter.

Create **MyCustomPainter** class and add two required methods.

![](https://cdn-images-1.medium.com/max/585/1*LBSRsJlZmQlRSSKQxucZmA.png)

**Paint** method defines what we want to draw or paint on the canvas.

**ShouldRepaint** method defines when we want to repaint the canvas.

Shown below is a simple breakdown image of the canvas:

![](https://cdn-images-1.medium.com/max/554/1*C6hen6Bvd2P63bYiq_o2jw.png)

#### 3. Draw Circle

To draw a circle specify the center, radius and the color of the circle.

![](https://cdn-images-1.medium.com/max/596/1*jSyTocmENaJp41bL3mvwhA.png)

![](https://cdn-images-1.medium.com/max/270/1*dOQQEVKt0li3kLTWwWfcgQ.png)

#### 4. Rectangle

To draw a rectangle specify center height and width.

![](https://cdn-images-1.medium.com/max/592/1*kzEdvGYeaGcWeB_u3-POwg.png)

![](https://cdn-images-1.medium.com/max/262/1*OOkirBcrmnuWPdt-4n3Kfw.png)

* * *
Using Angular to get rid of your ordinary text resume! Code on GitHub 📌
Tags: career, news, protfolio, resume
Published: 2020-06-09 11:21:57

As a **Web Developer**, it's crucial to make your mark on the market. Thinking about that, and trying to get the best out of the social isolation caused by the global pandemic. I have decided to create an open-source **Web Application** (available on [GitHub](https://github.com/guilhermeborgesbastos/live-resume)), fully customizable that would provide to _Web Developers_ like me an easy way of creating a **Personal Resume**.

### Application Preview:
[![Live Resume Preview](https://assets.guilhermeborgesbastos.com/live-resume/LiveResumePreview.gif)](https://github.com/guilhermeborgesbastos/live-resume)

### Online Preview:
A demo application is deployed [here](https://guilhermeborgesbastos.com/?source=dev.to).

#### Common questions:
- Does it have a documentation? _Yes, open it [here](https://github.com/guilhermeborgesbastos/live-resume/wiki)_.
- How to get started? _Just a few steps, read more [here](https://github.com/guilhermeborgesbastos/live-resume/wiki/getting-started)_.
- Is it portable/responsive? _Yes, know more [here](https://github.com/guilhermeborgesbastos/live-resume/wiki/responsivity)_.
- How to contribute? _Improvements are always welcome, know more [here](https://github.com/guilhermeborgesbastos/live-resume#contribute)_.

**Thank you!**
6 Unix tools you need to know about
Tags: ubuntu, unix, terminal, linux
Published: 2020-06-09 11:08:42

# 1. column

I, as a programmer, do not mind those nastily formatted tabular data, like...

```
Pid Name %CPU
1230 Firefox 15
600 Code 12
809 Terminal 1.2
```

But when I learnt about column, I was pretty fascinated by how easy it is to make it neat!
```
column <file_name> -t

Pid   Name       %CPU
1230  Firefox    15
600   Code       12
809   Terminal  1.2
```

# 2. less

How many times did you feel disgusted by the mess you made on your terminal screen? Maybe you printed a huge file or did ps aux. I have been there.
A very neat solution is to use less. The text is displayed upon applying a filter for paging through text one screenful at a time.

You don't have any clutter on your terminal once you exit less.

# 3. sort

Imagine having a file with ID and Names like this. 

```
16  Siri
20  Cortana
13  Mithil
9   Jarvis
```

A quick sort on the IDs would be super helpful right?

```
sort <file_name> -n

9   Jarvis
13  Mithil
16  Siri
20  Cortana
```

# 4. tr

I can't really think of a better situation to use this right now, but hey it works.
Say you have to replace the occurence of a character. tr (translate) does this for you.

```
echo "This is a sentence" | tr " " "\n"

This
is
a
sentence
```

# 5. head and tail

Head and tail themselves are pretty solid tools, but together they have their own use case.

Say you want the 11th line in a text file. You can do this by : 
```
head <file_name> -n 11 | tail -n 1
```

#### That was all for this post. What are your preferred helpful Unix tools?

`Photo by Karl Pawlowicz on Unsplash`
Array Set Operators in Ruby
Tags: ruby
Published: 2020-06-09 11:01:26

Ruby comes equipped with a bunch of amazing operators for Arrays. 

Let's say I am working on lists of animals.

```ruby
animals_list = %w(duck tiger snake)
other_animals_list = %w(wolf duck tiger)
```

I might want to merge both lists, without duplicates.

```ruby
master_list = animals_list.concat(other_animals_list).uniq

#=> ["duck", "tiger", "snake", "wolf"]
```

Semantically, it feels too heavy to do two method calls for something so intuitive as a list without duplicates. Gladly, Ruby gives us the union operator

```ruby
master_list = animals_list | other_animals_list

#=> ["duck", "tiger", "snake", "wolf"]
```

How neat is that?

I might also want to extract which animals are common to both lists. Let's say I do something like

```ruby
all_animals = animals_list.concat(other_animals_list)
common_to_both = all_animals.keep_if { |animal| all_animals.count(animal) > 1 }.uniq

#=> ["duck", "tiger"]

common_to_both = all_animals.select {|animal| all_animals.count(animal) > 1 }

#=> ["duck", "tiger"]
```

Both approaches are heavy-handed and require two variable declarations. Again, Ruby has us covered with the intersection operator

```ruby
common_to_both = animals_list & other_animals_list

#=> ["duck", "tiger"]
```

We also can use the subtraction operator to compare arrays and see elements that are not shared

```ruby
uniq_to_animals_list = animals_list - other_animals_list
#=> ["wolf"]

uniq_to_other_animals_list = other_animals_list - animals_list
#=> ["snake"]
```

Another neat thing is that we can combine these operators with the equals operator. Let's say I want to update a list with elements of other lists, but I don't want to keep any duplicates.

```ruby
dirty_animal_lists = [["dolphin", "duck", "duck", "duck"],["lemur", "snake", "snake", "snake"]] 

dirty_animal_lists.each_with_object([]) { |list, clean_list| clean_list |= list }

#=> ["duck", "tiger", "snake", "dolphin", "lemur"]
```

The only downside to this approach is that animals_list gets reassigned every single iteration and it might be too inefficient if you are working with huge things. For such cases, take a look at the [Set documentation](https://ruby-doc.org/stdlib-2.7.1/libdoc/set/rdoc/Set.html).
Digital Marketing Strategies For Small Business | Best Digital Marketing Agency | Prism Digital UAE
Tags: digitalmarketingstrategies, educativeinformation
Published: 2020-06-09 10:44:14

With the help of this video, you will get an in-depth knowledge of how to make use of various digital marketing strategies to grow your business and reap profits. Visit https://youtu.be/MlR0wOjIQjI

If you are a small business owner and wish to learn a few digital marketing tips to leverage your brand and generate profits, then watch our video on the latest digital marketing strategies for 2020. Here is a good video on how to use Digital Marketing to grow your own business. This video covers the different strategies business owners can make use of, in order to grow their business and increase their leads.  As a well-known digital marketing company in Dubai, UAE we have put together a detailed video on the latest digital marketing strategies for 2020 that businesses can learn from and incorporate in their own brand. This video also trains you on how to use each social media platform to its best potential.  At Prism, we offer a wide range of customized low budget online advertising to small business owners that want to achieve big results with small to medium budgets. Know more about our digital marketing services in Dubai at https://www.prism-me.com/digital-marketing-agency-dubai/
 
Free Training Video With Lovetto Nazareth Client Services Director At Prism Digital.
This video covers: How to improve your website for SEO or Search Engine Optimization 
1. Secured sites
2. Mobile friend websites
3. Quality/ Keyword-rich content
4. Page speed
5. User experience or UX
6. Schema markups and much more
What we have just improved for smaller teams and test users
Tags: webanalytics, showdev, privacy, webdev
Published: 2020-06-09 10:35:56

We develop a **fair alternative to common web analytics tools.** Operators gain insights while their users have full access to their data. All self hosted, open source and free.

Our app is called [Offen](https://www.offen.dev/) and in the works since the end of 2019. We have made the following improvements for smaller teams and test users with milestone 4.

**Meeting the needs of teams**
We have taken the time to bring our account management to a new level. Our updates aim to satisfy setups like smaller dev shops or agencies. Offen now features read-only users, fine-grained controls for sharing access, and other management options.

**Testing, 1, 2, 3**
We have done research to prepare for the upcoming integration test coverage of all our user-facing features. We ended up choosing and implementing a setup using Cypress. A popular MIT-licensed tool that can run tests in multiple browsers like Chromium and Firefox.

**UX improvements**
There are some UX improvements and corrections regarding the operator facing Auditorium. They mostly originate from experiences with the operation of our own Offen instance. Among other things, we upgraded the referrer statistics, improved the mobile UX for tabular data and fixed problems with the user flow for resetting password.

**Try demo**
We want to give you an idea of what Offen feels like without you having to do a proper installation. In order to protect the usage data of our real world users, sharing the credentials for a demo account is not an option

Therefore, we have created a downloadable demo of Offen that you can run on your local machine. This demo has been around for a while, but we have significantly improved the features. 

It is now automatically filled with randomly generated usage data at startup, so you don't have to do it yourself. We have also added a special landing page to help you better understand the workflow of Offen from both a operator and user perspective.

Try using the demo yourself by running the following snippet. Head to our [websites demo section](https://www.offen.dev/try-demo/) for further details.

`curl https://demo.offen.dev | bash`

**Up next**
Episode Five - Resilience and Documentation includes an accessibility and security audit and will prepare Offen for your contributions. Stay tuned.

Read our [detailed milestone 4 report](https://www.offen.dev/blog/managing-data/) on our website.
vim: Buffers, Windows, Tabs - Part 1
Tags: vim, buffers, windows, tabs
Published: 2020-06-09 10:27:54

Any developer involved in a large software developement project is actively editing multiple source files. There are multiple factors that makes such a developer efficient in the task of editing multiple files. Generally speaking such efficiency depends on:

* navigating from one active file to another seamlessly
* and active viewing area

**vim** provides way to do this using **buffers, windows and tabs**. In this article we will focus on **buffers and windows**

Before we get to the details lets understand the terms **buffers and windows** in **vim**.

* A **buffer** is the in-memory text of the file that was opened using vim. It may be visible or hidden. It is identified by a buffer number and has flags to indicate whether it is current, has been modified or not etc.
* A **window** is a view port on a buffer whereas
* A **tab** is a collection of **windows**

When vim opens a file, a buffer is associated with it. 

`vi server.js`

Not every buffer is associated with a file. We will see an example later.

Once in vim. Enter the following command in normal mode

`:ls`

which will show buffer information as below:

`  1 %a   "server.js"                    line 1
Press ENTER or type command to continue
`
* The integer `1` refers to the buffer number
* The `%a` is a flag indicating that this is the active buffer
* `"server.js"` the filename and 
* `line 1` indicate the current line on which the cursor is positioned

Lets now open two more buffers. While in vim you can open another file by:
`:edit config.json`

Lets also create a buffer without any file associated with it:
`:enew`
and list all the buffers using `:ls` vim command. 
` 1      "server.js"                    line 1
  2 #    "config.json"                  line 1
  3 %a   "[No Name]"                    line 1
Press ENTER or type command to continue
`
**Note:** buffer number 3 has "no name" and is active.

Switching between buffers is easy. Use `:bn` where `n` is buffer number `:b2` will switch to buffer 2, makin it active. 
Switching between buffers will work if the changes to a buffer is saved.

To view all buffers enter the following command in vim
`:ball`

You will now see three horizonal windows. You can switch from one to another by <Ctrl-W> followed by any of the arrow keys.

Try `:ls` to check all buffers are now active as they are all visible.

You can close the the current window by <Ctrl-W> followed by 'c' or by entering `:q` command. The window closes but the buffer is still there.

for more information on vim buffers enter the following command in vim

`:help buffers`

Next week look out for more on windows and tabs in Part-2 of this post.
No content to map to Object due to end of input.
Tags: restapi, json, linux
Published: 2020-06-09 10:10:46

You might face this issue while trying to perform REST API executions with the JSON input. This could occur if you are not passing the header along with the request [-H "Content-Type: application/json"]. 

However, this problem also occurs when we miss the -T argument while we are passing the JSON file along with the request.
The Ultimate Guide to Serverless Monitoring Platforms
Tags: serverless
Published: 2020-06-09 10:10:12

Original article here: [https://dashbird.io/blog/ultimate-guide-to-serverless-monitoring-platforms/](https://dashbird.io/blog/ultimate-guide-to-serverless-monitoring-platforms/)

Technology touches almost every corner of the world economy. Even when it's an indirect relation, in many cases tech is an essential, vital part of our societies. It just can't fail without causing too much distress and losses. Not only financially, but especially to the human aspect.

As the world is increasingly reliant on technology, software developers, cloud architects, and DevOps practitioners bear a responsibility similar to that of the health industry or to airplane pilots, for example.

In this reality, cloud monitoring isn't optional, it's a matter of being professional. What optional, however, is what solution to go for. Obviously, the one that best fits your specific needs but which one is it? Starting from the very basics, we recently [compared Dashbird against AWS CloudWatch](https://dashbird.io/blog/dashbird-vs-aws-cloudwatch/).

To contribute a little more to this decision-making process, the table below covers some of the most prominent serverless monitoring tools out there. To be fair, they are all amazing services with outstanding teams behind them and we're proud to be on this market alongside them. If you'd like to find out more about each directly from the makers, check out this [Serverless Observability Special webinar](https://youtu.be/SD3b9w44yng), hosted by Serverless Nordic.

The purpose of this table is to help you identify what better suits the particular needs of your team and application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/srzb2agnl3oxogc16e1x.png)
Must I use Nextjs Data Fetching Methods?
Tags: discuss, javascript, nextjs, react
Published: 2020-06-09 09:49:19

[Nextjs](https://nextjs.org/) is a react-node framework *(i.e. it combines reactjs and nodejs so that your project is all in one place)*. 

If you have tried [Data fetching](https://nextjs.org/docs/basic-features/data-fetching) with Nextjs, then you will notice that there are recommended methods. These are `getInitialProps`, `getStaticProps`, `getStaticPaths` and `getServerSideProps`.

I am coming from a react background and implementing these methods are still giving though time - they are not working. However, using the regular `react` fetch method *(i.e. componentDidMount())* works for me perfectly.

So I am curious. I want to know if this is okay or must I use the recommended nextjs fetching methods?