teleren/devto huggingface dataset:
Text wrap with SkiaSharp
Tags: skiasharp, csharp, wordwrap, example
Published: 2020-06-15 09:49:40

---
title: Text wrap with SkiaSharp
published: true
description: How to add wordwrap to SkiaSharp text rendering.
tags: skiasharp, csharp, wordwrap, example
cover_image:  https://morepuzzles.com/assets/img/thumbnail_wordsearch.png
---
**Context**

I am working on https://morepuzzles.com/ where we are drawing our puzzles with SkiaSharp. More on that in this post: https://medium.com/@brianelete/a-brief-experience-with-skiasharp-20478ca05ef2

**How to wrap text lines**

My main issue when displaying text with Skia was that the lines were sometimes long and went out of the canvas or the current column. Skia’s DrawText method works like that it starts at the given position and draws the text in one line with the given paint (what is containing the text size). Lucky for us we can measure text and break lines where we need them to be wrapped. That may be the edge of the page or at the start of a new column (we can add margins too).

We use bounding boxes inside the document to determine the position and the relative size of things. You can measure the text height and length using a given font size so you can calculate what font size fits the box and where you should wrap each line.

```charp
void WrapLines(string longLine, float lineLengthLimit, SKCanvas canvas, SKPaint defPaint)
{
    var wrappedLines = new List<string>();
    var lineLength = 0f;
    var line = "";
    foreach (var word in longLine.Split(' '))
    {
        var wordWithSpace = word + " ";
        var wordWithSpaceLength = defPaint.MeasureText(wordWithSpace);
        if (lineLength + wordWithSpaceLength > lineLengthLimit)
        {
            wrappedLines.Add(line);
            line = "" + wordWithSpace;
            lineLength = wordWithSpaceLength;
        }
        else
        {
            line += wordWithSpace;
            lineLength += wordWithSpaceLength;
        }
    }
    var x = 0;
    var y = 0;
    foreach (var wrappedLine in wrappedLines)
    {
        canvas.DrawText(wrappedLine, x, y, paint);
        y += paint.FontSpacing;
    }
}
```

This is a slightly modified example to fit this post’s topic. You can of course separate the line wrapping and the drawing itself if it better fits your needs.
How Can You Make Your Site Faster 🚀 Using A CDN?
Tags: cdn, devops, webdev, speed
Published: 2020-06-15 09:46:58

Hello, In this post we will be covering what is a CDN and why should consider it used on your website


## What is a CDN?😀
A CDN or content-delivery network refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content.

A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

## Why Should you use a CDN?🤔
Basically a CDN faster your site by 10%(depends on the CDN network)
1. Improving website load times - By distributing content closer to website visitors by using a nearby CDN server (among other optimizations), visitors experience faster page loading times. As visitors are more inclined to click away from a slow-loading site, a CDN can reduce bounce rates and increase the amount of time that people spend on the site. In other words, a faster a website means more visitors will stay and stick around longer.
2. Reducing bandwidth costs - Bandwidth consumption costs for website hosting is a primary expense for websites. Through caching and other optimizations, CDNs are able to reduce the amount of data an origin server must provide, thus reducing hosting costs for website owners.
3. Increasing content availability and redundancy - Large amounts of traffic or hardware failures can interrupt normal website function. Thanks to their distributed nature, a CDN can handle more traffic and withstand hardware failure better than many origin servers.
4. Improving website security - A CDN may improve security by providing DDoS mitigation, improvements to security certificates, and other optimizations. Note: only some CDNs prove this function

## My Top CDN Recommendations
1. [Cloudflare](https://www.cloudflare.com/ ) is one of the free and used by top companies like [Discord](https://discord.com/), [FontAwesome](https://fontawesome.com/)
2. [KeyCDN](https://www.gogamic.com/ref/key-cdn)(Use this link to get a free 10$ credit)
3. [BunnyCDN](https://www.gogamic.com/ref/bunny-cdn) is one of the cheapest CDN
4. [StackPath](https://www.stackpath.com/) is also one of the Top Most used CDN
5. [Fastly](https://www.fastly.com/) is the best CDN for Enterprises users


## Video Referenece 
{% youtube YiXgKloFWD8 %}
How to: Mapbox with Vue.js
Tags: tutorial, vue, webdev
Published: 2020-06-15 09:35:33

## Getting started
- Generate a MapBox access token in your [account](https://account.mapbox.com/) page
- Download the npm library using `yarn add mapbox-gl`
- Include the css in the `<head>` of your `index.html` file:
```javascript
<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
```

## Creating a map

Create a `BaseMap` component:
```vue
<template>
  <div id="mapContainer" class="basemap"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";

export default {
  name: "BaseMap",
  data() {
    return {
      accessToken: MAPBOX_ACCESS_TOKEN,
    };
  },
  mounted() {
    mapboxgl.accessToken = this.accessToken;

    new mapboxgl.Map({
      container: "mapContainer",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [103.811279, 1.345399],
      zoom: 12,
      maxBounds: [
        [103.6, 1.1704753],
        [104.1, 1.4754753],
      ],
    });
  },
};
</script>
```

* `container`: The HTML element in which Mapbox GL JS will render the map, or the element's string id. The specified element must have no children.
* `style`: choose from a pre-defined Mapbox style or create your own using [Mapbox studio](https://www.mapbox.com/mapbox-studio/)
* `center`: refers to the starting position in [long,lat]
* `zoom`: refers to the initial zoom level

Other option parameters for `Map` can be found [here](https://docs.mapbox.com/mapbox-gl-js/api/map/).

Finally, add basic styles:
```vue
<style lang="scss" scoped>
.basemap {
  width: 100%;
  height: 100%;
}
</style>
```

## Displaying markers and controls

### Navigation 
This adds a zoom buttons and a compass.
```javascript
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, "top-right");
```

### Marker
This adds a marker component.
```javascript
const marker = new mapboxgl.Marker()
  .setLngLat([103.811279, 1.345399])
  .addTo(map);
```

### Geolocate 
This locates the user on the map based on the browser's geolocation API.
```javascript
const geolocate = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});

map.addControl(geolocate, "top-right")
```

### And there you have it! :tada:
![screenshot of page](https://dev-to-uploads.s3.amazonaws.com/i/pdcvtatlurexis74w9jq.png)

* If you are interested in using Mapbox with React.js, I have written a similar tutorial [here](https://dev.to/hmintoh/how-to-mapbox-api-with-react-js-2433)
* Mapbox official documentation [here](https://docs.mapbox.com/mapbox-gl-js/api/) :zap:
Coding is also for kids
Tags: codenewbie, github
Published: 2020-06-15 09:30:55

Does your kid own a mobile phone?
Does your kid spend hours playing video games?

If the answer is yes, it's your lucky day. 
You can take advantage of the new technology and learn your kid to code without coding exactly.

Example: 
Let your kid think that it's a superhero and has a mision in this world. Let the kid draw the mission in a paper with details of the beginning and ending of it's journey. Then it can right down with numbers the following path. 

For more info and details about the game you can send me an email: antonia.symeonidou@outlook.com
Git push for dummies
Tags: git, humor, newbie, failback
Published: 2020-06-15 09:27:40


Too many developer see this message after a `git push`, than try to googling for a solution (in the meantime the AI is getting ready)
```
ubuntu@skynet:~/ (feature/T1000) $ git push

fatal: The current branch master has no upstream branch.
To push the current branch and set the remote as upstream, use

     git push --set-upstream origin master
```
But, not being able to read the last line because of the white spaces that interrupt the flow of strings on the screen. 

## Proposed solution
Then we thought to help them in this way:

```
git push || $(git push 2>&1 | grep "." | tail -1)
```

They will then be able to create an alias to manage the git push for dummies.
What is Flask(Python)? - Web Development
Tags: python, flask, webdev, beginners
Published: 2020-06-15 09:19:39

Hi, guys so in this post we will be seeing what is flask? why flask? flask vs Django and a lot so let's get started

## What is Flask?
[Flask ](https://flask.palletsprojects.com/en/2.0.x/)is a web framework. This means flask provides you with tools, libraries, and technologies that allow you to build a web application. This web application can be some web pages, a blog, a wiki, or go as big as a web-based calendar application or a commercial website. Flask is Micro-framework

### What is a micro-framework?
A [Micro Framework](https://en.wikipedia.org/wiki/Microframework) is normally a framework with little to no dependencies on external libraries.

## Why Flask?🤔
As mentioned earlier, Flask is an easy to learn and simple framework you can easily build websites like e-commerce very easily without a lot of codes.

## Flask vs Django ⚔
Here we go with another python framework vs flask. Django is a full-stack web framework, whereas Flask is a micro and lightweight web framework. The features provided by Django help developers build large and complex web applications. On the other hand, Flask accelerates the development of simple web applications by providing the required functionality.

## Starter Flask App
{% gist https://gist.github.com/raghavmri/9f0c54cadbe07c53f71d42211b520b49 %}
## Conclusion
- Flask is a good option for starters and I would personally recommend Django if you are building an e-commerce site.
WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
Published: 2020-06-15 09:14:22

When you reset the operating system used on your vps or make changes that change core settings within the vps, you typically get the above error:

WARNING: REMOTE HOST IDENTIFICATION CHANGED!

to fix this error type the following command in terminal

` ssh-keygen -R hostname `

Replace the ` hostname ` with the ip address of your vps 
 
for example: ` 00.000.00.0 `
Laravel Export In Excel And CSV Example

Tags: laravel, php, laravelexcel, excel
Published: 2020-06-15 09:05:03

In this tutorial, we will see how to export mysql data in laravel by using Laravel maatwebsite package for excel. By using this package we will seen how can we export data from mysql database to Excel spreadsheet in Laravel framework. Maatwebsite Laravel package give us very large functionality for export data into excel or csv file format in Laravel.

If we have developed very big ERP or e-commerce web application in Laravel framework then at that time we have required export of our mysql table data to excel format for reducing our database entry time in excel or csv file. So, by on single click we can transfer large amount of data in excel spreadsheet for our required purpose.
{% youtube VUet2wq22-o %}
> [ Laravel Excel Export multiple sheet](https://www.youtube.com/watch?v=VUet2wq22-o " Laravel Excel Export multiple sheet")
How to Host a discord bot🤖 24/7 in a Ubuntu Server
Tags: python, ubuntu, linux, node
Published: 2020-06-15 08:52:00

Hello, In this post we will be seeing how to host a discord.py bot 24/7 on a ubuntu server. This post assumes that you have already coded your discord bot.

These are some of the simple steps to keep running your bot 24/7

1. SSH into your server using putty or any other you prefer

2. Run `sudo apt-get install supervisor` to install supervisor-ctl
3. Then Run This command to make a new config `sudo nano /etc/supervisor/conf.d/yourproject.conf`

4. Then type the following
{% gist https://gist.github.com/raghavmri/9922aba8919968240aac8a1133d874c2 %}

5. Run `sudo supervisorctl restart all` to restart the service with new configuration 

6. That's it now you can see your bot online 24/7 and even if you restart your server your bot will restart and come online

#### Some important notes
1. the place where I have mentioned your project or project please change it to your desired name

2. Also please change the following to according to your name
 * directory
 * stderr_logfile
 * stdout_logfile
 * user


P.S:- [Vultr](https://www.vultr.com/?ref=9086643-8H)(Get a $100 credit by registering using this link) is a good hosting choice if you're looking for one
ExpressJS & Nunjucks
Tags: javascript, tutorial, beginners, design
Published: 2020-06-15 08:50:42

In this video we'll be looking into nunjucks templating which is mostly inspired from jinja2
and do not come "out-of-the-box" with expressjs.

Below is an in-depth tutorial to demonstrate setting up nunjucks with your express app.

{% youtube Hkg93BUD_qw %}
B+ and Out the Door!
Tags: womenintech, codenewbie, devjournal
Published: 2020-06-15 08:38:52

_This post was originally published on June 15, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Sunny, happy Monday morning. Ready for a great week. A package was delivered to my friend for her birthday (today), which is always a great thing.

My neck is still hurting, but I just did a 20-minute Yoga with Adrienne video and I'm feeling better. Just one of those things you can't rush along, and that's okay.

Yesterday, I worked a bit on my Udemy JavaScript course (that I've actually set on the back-burner since the beginning of April - whoa, time flies). I reviewed some API stuff, which I seriously can't wait to delve deeper into since I know I could create some rad projects once I have a good handle on all that!

I'll probably dabble a little bit more with that particular section of my JS course today (I'd like to figure out an issue that popped up at the end of my study session yesterday).

Other than that, I'm focused on getting things set up for my podcast launch - yay! More info on that to come. For now, it's more website/email/mailing list set-up, etc. You know, the foundations and all that jazz.

But! I'm promising myself not to get all caught up in that and consequently letting it all drag on without a foreseeable end. As I'm learning and trying to implement day after day: 'B+ and out the door!'*

*Altered just a bit from the original 'A- and out the door' from the Unf*ck Your Brain podcast


Thanks for reading! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)
you should only put variable part in curly braces
Tags: ansible
Published: 2020-06-15 08:34:31

I define a include_var task playbook, it use local facts to determine which file to load

```                                                                                                                                                                      
include_vars: "{{ ansible_local[preference][role].yml }}"
```

it failed with an error message like

> The task includes an option with an undefined variable.

I should put the file extension `.yml` outside of the curly braces

```
include_vars: "{{ ansible_local['preferences']['role'] }}.yml" 
```
4 ways to clean ranged comparisons in Ruby conditionals
Tags: ruby, refactorit, codenewbie
Published: 2020-06-15 08:14:26

What is the best way to go when we find conditionals that deal with ranges?

```ruby
fruits = 0
if age > 5 && age < 10
        fruits += 100
elsif age >= 10 && age < 15
	fruits += 200
end		
```

One part of the problem is that there are way too many ways to express the conditions

```ruby
# all these conditions are the same
# first
if age > 5 && age < 10
if 5 < age && 10 > age
if age > 5 && 10 < age
if 5 < age && age < 10
# second
elsif age >= 10 && age < 15
elsif age >= 10 && 15 > age
elsif 10 <= age && age < 15
elsif age => 10  && age < 15
```

A few tips that I find helpful:

## 1. No greater than `>`

You can make the boundaries of the range more readable  if you limit yourself to the `<` operator.

```ruby
fruits = 0
if 5 < age && age < 10 # 5 |---- age is here -----| 10
	fruits += 100
elsif 10 <= age && age < 15 # 10 |---- age is here -----| 15
	fruits += 200
end		
```

 

[Llewelyn Falco](http://llewellynfalco.blogspot.com/2016/02/dont-use-greater-than-sign-in.html) has a nice blog post where he covers this technique in depth.

## 2. Use `Range`

Using Ruby ranges are a good way to represent the conditions, and using `..` versus `...` can act as a substitute for `≥` or `≤`

```ruby
fruits = 0
if (6...10).include?(age) # 6 |---- age is here -----| 10
	fruits += 100
elsif (10...15).include?(age) # 10 |---- age is here -----| 15
	fruits += 200
end		
```

## 3. Use `case` statements

Took me a while to realise this, but when you use case statements, what you are really doing is comparing two things with the threequals operator ===

The cool thing about it is that when you use === with ranges, you are checking for inclusion within the range.

```ruby
(1..5) === 2

#=> true
```

Which means we can write something like this

```ruby
fruits = 0
case age
when 6...10
	fruits += 100
when 10...15
	fruits += 200
end
```

## 4. Use `#between?`

The #between method gives us an idiomatic way to resolve comparisons. Even if it does not work perfectly well for our example due to the mixed presence use of `>` and `≥` in both conditions, it's good to know we have this in the Ruby toolkit

```ruby
fruits = 0
case age
if age.between?(6,10)
	fruits += 100
elsif age.between?(10,15)
	fruits += 200
end
```
Why create and contribute to open-source projects?
Tags: opensource, community, programming, design
Published: 2020-06-15 08:09:50

Developing and releasing open-source solutions is a common practice that has been adopted by companies like Red Hat, Facebook, Google, and Amazon. IT companies that make products available as open-source software have become a sensation in the investment environment. Confluent, Neo4j, HashiCorp, and GitLab are just a few examples of companies that have managed to attract large investments.

At Evrone, we encourage our employees to build [open-source products](https://evrone.com/cases#open-source) and provide them with [logos and custom websites](https://evrone.com/design) and assist in the promotion of their projects. Why would companies, ranging from mid-sized outsourcing businesses to technological giants, make their products available as open-source software? 

[Learn more about the advantages of building open-source projects](https://evrone.com/advantages-open-source)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m2hsnjodq7zc1h59oi78.png)
How to be an Web dev in 2020
Tags: webdev, frontenddeveloper, fullstackdeveloper
Published: 2020-06-15 08:01:12

Hi Guys,

This is my very first blog where I give little detail about how to be an web dev in 2020.

###Background  
- How Internet/Web works.
- Background on server,DNS.
- Little bit of Networkinglike TCP/Ip...
- Json

###FrontEnd
- HTML,CSS,JS
- CSS Framework(like Bootstarp,MaterializeCSS)
- JS Framework or Library(Like react,Angular,Vue)
- Project Mangement(like NPM/Yarn ,Github)
- CI/CD (Github , Jenkins)

###BackEnd
- NodeJS,Express or Java or PHP or Python
- Rest API or GraphQL
- Autentication(Firebase,Token-based)

###DataBase
- SQL or NoSQL anyone is prefferred to have knowledge.

###Advance Topics
- Datastructure & Algorithmns.
- SSH,certificates.
- Big-O
- PWA,Cloud(AWS,Azure)

Thanks for your time.
Top 11 Emerging Technology Trends For The Next Decade
Tags: trends
Published: 2020-06-15 07:44:09

Since a decade ago, each year new technology stacks atop the previous, and similarly the upcoming decade will be the pool of new technology trends. The implementation of each technology emerges as a golden bite for this world. Robots and IoT is also one of them. You can also know the- Emerging iot trends that will rule 2020.

Each industry is revolutionizing with new trends and by redefining tomorrow’s generation of business and contemporary challenges and transforming our livelihoods from the bottom up. Increased human life, improving smart economy, AI-human collaboration, digital farming, and high-bandwidth brain-computer interfaces are just some results of digitalization.

The coming decade will bring many exciting technological advances. Let us see some of them-

**1. AI will reach human-level intelligence:** 
As predicted by technologists and researchers, in this decade artificial intelligence will reach human-level performance. Through 2020, AI algorithms and machine learning tools will become open source and can be available on the cloud. This will allow individuals to supplement their cognitive ability, augment their problem-solving capacity, and build new ventures within less time of the current cost. This trend will be driven by the convergence of neural networks, global high-bandwidth connectivity, and cloud computing. Healthcare, education, entertainment, industrial design will be impacted by this megatrend.

**2. AI-human collaboration:** 
The rise of “AI as a Service” (AIaaS) platforms will allow humans to partner with AI at every level and at every industry. AIs will become entrenched in daily business operations, serving as cognitive collaborators to employees, supporting creative tasks, and generating new ideas. In some industries, partnership with AI will be a need, for instance, diagnosis without consultation of AI might be a bad practice.

Know more at- [https://solaceinfotech.com/blog/top-11-emerging-technology-trends-for-the-next-decade/]
Hi There🎃!! 
Tags: webdev, node, javascript
Published: 2020-06-15 07:31:23

I am here out of curious and will be sharing solutions to errors, personal projects and seeking help too 🌈. 

R = Run 🏃🏻‍♀️💨

I know Web development well I create and develop websites. I am also a job seeker right now. I focus on learning journey than jumping into something that I am less passionate to do. 


I love coding creating and designing UI UX ya ya I can do a lot.I like Duh! from Billie Eilish🤙🏻.


OK!!!It's pandemic so I give you this motivation powerful code snippet in Node.Js 😉


**app.get(" /covid-19 ", (req, res) => {
res.send(" Don't worry this too shall pass🌼 " )
}) ;**


This is my first post a mini intro about ME👸🏻

Danke for reading 👾
QuickTip: To Do CodeReview
Tags: codequality, review, github, opensource
Published: 2020-06-15 07:31:20

**Tips For Reviewers:**

	1. Be kind.
	2. Explain yourself.
	3. Focus on pointing out problems and let the developer decide.
	4. Request the Dev for simplified code (if required) or code comments.

**Things to look for during the review:**

	1. Code Design.
	2. Expected Functionality v/s Outcome.
	3. Code Complexity.
	4. Tests done.
	5. Code Comments.
	6. Naming conventions.
	7. Consistency with existing code.
	8. Documentation.
	9. Follows the team's principles.

**The Joel Test:**

The Joel Test is a very simple and quick test that rates the quality of your software team. Rather than including open-ended responses, this test has 12 yes-or-no questions that determine whether your programming team is up to par.

    1. Do you use source control?
    2. Can you make a build in one step?
    3. Do you make daily builds?
    4. Do you have a bug database?
    5. Do you fix bugs before writing new code?
    6. Do you have an up-to-date schedule?
    7. Do you have a spec?
    8. Do programmers have quiet working conditions?
    9. Do you use the best tools money can buy?
    10. Do you have testers?
    11. Do new candidates write code during their interview?
    12. Do you do hallway usability testing?

Read more about the Joel Test [here.](https://www.joelonsoftware.com/2000/08/09/the-joel-test-12-steps-to-better-code/)