teleren/devto huggingface dataset:
Web Design Services
Tags: webdev, design, ux
Published: 2020-06-11 10:52:26

<div>Intelicle is one of the most innovative <a href="https://intelicle.com/">web design</a> agencies in the UK that specialises in blending the technical know-how and bold creativity. We acknowledge the fact that every project and client is unique that’s why we offer bespoke solutions - whether it be a small 5-page website or a large web-based application including e-commerce and CRMs. Our teams of highly qualified and experienced digital marketing professionals and web designers will ensure implementation of results-driven PPC, <a href="https://intelicle.com/seo-services/">SEO</a>, web designing strategies that'll help your brand stay relevant and your customers loyal.</div>
Road to Genius: beginner #8
Tags: beginners, javascript, computerscience
Published: 2020-06-11 10:37:46

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 challenge](https://dev-to-uploads.s3.amazonaws.com/i/yhu80iuydtv3gicakztk.png)

In this challenge we have to fix two bugs (🐼 and 💧). The first line of code creates an array of numbers, where 💧 is an unknown, probably a  number as well. Then lower down we have a for-loop which goes over each number in the array. It then compares each number with `R`. If the number is greater than `R`, then `R` becomes 🐼. In a nutshell, this simple algorithm keeps track of the largest value in the array, and 🐼 is most likely going to be `el`.

If you read the last comment, the challenge states that `R should be 9`. If we look back at our array, we see that number 9 is already present, so it doesn't matter what 💧's value should be.

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

---

If you feel inspired and motivated to upgrade your coding + debugging skills, join me on the Road to Genius at https://nevolin.be/codr/
Best Practice - structures
Published: 2020-06-11 10:26:24

I have a structure in c#, I'm using it within a class in order to store data. what is best practice here? thinking dependency injection. I know how i would do it, but I'm also thinking about what is current trend. #bestpractice


is it to pass the struct back and forwards in and out of modules or just to have a global stuct declaration for that class and use that throughout?

All modules within the class are related to the struct and all access it.
Laravel blade directive for money format
Tags: laravel
Published: 2020-06-11 10:18:34

---
title: Laravel blade directive for money format
published: true
description: Create a custom blade directive to print an amount in money format easy.
tags: Laravel
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7wfui6zymk8r1uglcva2.png
---

## Create a service provider for custom blade directives:

```php
php artisan make:provider BladeServiceProvider
```

## Register the new service provider:

In "config/app.php" and add the new blade service provider in "providers" array:

```php
$providers = [
    ...
    App\Providers\BladeServiceProvider::class,
];
```

## Add the directive in blade service provider:

Go to "app/Providers/BladeServiceProvider" in the boot method:

```php
    Blade::directive('money', function ($money) {
        return "<?php echo number_format($money, 2); ?>";
    });
```

It use the Blade facade, with "directive" method the first argument is the name of the created directive in this case "money", then the second argument is a callback

The "$money" variable that represents the value pass to the directive, then it returns the value formatted using the "number_format" method.

## Use the new money directive:

In any blade file:

```php
@money($value)
```

---
Notes:

I think that this directives are a great place to make some tricky formatting, but if you want to add more logic, maybe a best way to add this is with a model method or an action class.


Thanks for reading.
Steps for Deploying a Blazor as Static Site with Docker and Nginx
Tags: blazor, hosting, standalone, nginx
Published: 2020-06-11 10:07:44

---
title: Steps for Deploying a Blazor as Static Site with Docker and Nginx
published: true
description: Blazor can be hosted standalone as a static website with no dependency on dotnet run time. Here is how it is done
tags: blazor,hosting,standalone,nginx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/57a76kbj8isstq42nlga.png
series: Microsoft Blazor
---
#Step 1 Publish the Blazor WebAssembly project#
Publish the project from Visual Studio,this ensures that the projects is linked which removes all the unwanted dependencies from the output, reducing the size of the assemblies created.
#Step 2 Create a dockerfile
The docker file is very straightforward, pull the nginx image and copy the published Blazor WebAssembly file from the WWWRoot folder to the html folder in nginx
```
FROM nginx:alpine
EXPOSE 80
COPY bin/Release/netcoreapp3.1/publish/wwwroot /usr/share/nginx/html
```
#Step 3 Build the docker image
use the below command
```
docker build --tag blazorstatic . 
```

#Step 4 Run the docker container
Run the docker container mapping the port exposed from the container to a port on the host
```
 docker run -p 8080:80 blazorstatic   
```
#Step 5 Access the Blazor WebApp from browser

Access the URL https://localhost:8080 which loads the WebApp
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0etothdadxr8h1v5mi6t.png)

Source code for both ASPNet hosting and Static Website Hosting is available in Github: https://github.com/gopkumr/BlazorTourOfHeroes.git
Branch: Perf
3 Things you might not know SASS can do
Tags: css, sass
Published: 2020-06-11 10:03:48

*Originally posted on my [blog](https://www.1thingaweek.com/week/135/3-things-sass-can-do)*

I love working with CSS, it's such a powerful tool when used right. Over 10 years ago, I came across [LESS](https://en.wikipedia.org/wiki/Less_(stylesheet_language)) and was converted very quickly. SASS has been around longer, but it wasn't really on my radar and LESS was just fine.

Then around 5 years ago, I was introduced to [CodeKit](https://codekitapp.com/) and SASS via Bourbon and it's been my preprocessor of choice ever since.

In reality, I've used SASS to keep my CSS readable and maintainable, but there are some really nice features that you may not be aware of.

##1. Apply rgba calculations to HEX codes
You can take your HEX code and pass it to a rgba function to apply alpha to it. Modern browsers already allow you to add an additional two digits to your HEX colour code to determine it's opacity, but that's not supported everywhere.

    color: rgba(#F00, 0.5); // rgba(255, 0, 0, 0.5)

Instead of specifying the reg, green, and blue values, pass the colour code and it will get converted. This is really useful for when you have variables to specify your colours already set up. No need to store or calculate the rgb values, just pass the variable and away you go!

    color: rgba($myColor, 0.5);

##2. Nest media queries
A relatively new one for me and one that I wasn't sold on initially. If you have a lot of things that depend on screen size, this makes it much more maintainable and obvious when things will change.

    .myClass {
        width: 100%;
        @media screen and (min-width: 800px) {
            max-width: 800px;
        }
    }

A simple example, but when you're looking at the definition for .myClass you'll now know exactly what responsive attributes it has.

##3. Apply maths to colours

Colour palettes can be hard but what you can do is add and subtract colours from each other. This allows you to create new shades of colours to to blend them together.

    element {
        color: ($myColour1 + $myColour2);
    }

I've wrapped them in brackets to remove any doubt as to what should happen but it's not required. You can pass variables or colour codes.

    element {
        color: (#111 + #333); //color: #444
    }

It is worth noting that I recently discovered that applying maths to colours is actually dependent on your SASS compiler. Libsass has no issues, but Dartsass doesn't like it all.
Create an excerpt easy with Laravel
Tags: laravel
Published: 2020-06-11 09:56:36

---
title: Create an excerpt easy with Laravel
published: true
description: Create an excerpt would never be more easy with Laravel 7.
tags: Laravel
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2hdj0wp7cyepu1zsccx7.png
---

Hi, a common scenario to display data is that "descriptions" or any other long text field, rarely has the same long, to preserve a common length probably you will implement a excerpt function, well in Laravel 7 this is a really easy feature by using the "Str" class from "Illuminate\Support\Str" namespace.

Lets suppose that you has a "Post" model then you can create a function like this:

```php
use Illuminate\Support\Str;

class Post
{
    const EXCERPT_LENGTH = 100;

    protected $fillable = [
        ..., 'body'
    ]

    public function excerpt()
    {
        return Str::limit($this->body, Post::EXCERPT_LENGTH)
    }
}
```

So now in your blade files you can use this method:

```php
<h1>{{ $post->title }}</h1>

<p>{{ $post->excerpt() }}</p>

```

Ok now you have an Idea how to use this feature, you can use it in an "appServiceProvider" or a custom "bladeServiceProvider" to add blade directives (this is the common way) just remember to import the namespace correctly.

In any service provider:

```php
/**
 * Bootstrap services.
 *
 * @return void
*/
public function boot()
{
    Blade::directive('excerpt', function ($text) {
        return "<?php echo Str::limit($text, 100); ?>";
    });
}
```

In your views:


```php
<p>@excerpt($post->body)</p>
```

I particularly prefer this way, because it feels like a good concern for a blade directive and at the same time its flexible because it is not binding to some specific model, it has more readability and it's available for any text from any model.

You can even use directly the "Str" class in your blade files, do not worry about importing the namespace, in Blade files the "Str" class in adding by default (maybe not prefer way).

```php 
<p>{{ Str::limit($post->body, 100) }}</p>
```

Another way to implement this is to add another column and save the excerpt, something like this:

```php
$post->excerpt = Str::limit($request->body, 100);
```

In some cases this would be particularly helpful for posts with too many words.

Thanks for reading!
Django GenericForeignKey with GenericRelation
Tags: python, django, orm, webdev
Published: 2020-06-11 09:50:54

## Introduction
I hope it's no offense that, Django is a powerful tool for the web. Today I'll talk about `GenericForeignKey` and `GenericRelation`. End of the article you will know about `GenericForeignKey` and `GenericRelation`.

## What is GenericForeignKey?
`GenericForeignKey` is a foreign key with any model with the help of content type. Still confusing? Let's see some example.

Suppose we have book system where there are some models like following,

```python
class Author(models.Model):
    name = models.CharField(max_length=64)
    # Other fields


class Reader(models.Model):
    name = models.CharField(max_length=64)
    # Other fields


class ActivityLog(models.Model):
    # Here we want to track everything that other users do. So, I'll add GenericForeignKey
    content_type = models.ForeignKey(
        ContentType, default=None, null=True, on_delete=models.SET_NULL, related_name='activity_logs')
    object_id = models.BigIntegerField(default=None, null=True)
    object = GenericForeignKey(ct_field="content_type", fk_field="object_id")
    # Other fields
```

* Here `content_type` is the FireignKey relation with django content type model. If you want to know more about content type framework of Django then [https://docs.djangoproject.com/en/3.0/ref/contrib/contenttypes/#module-django.contrib.contenttypes](here it is).
* `object_id` is just a big integer field for holding the related object id.
* `object` is a relation for accessing the generic object. This field will not create column on database. It just model level mapping with the generic object.

### What we can do now?
**Data access:** We can access data using dot[.] operator like, 
```
>>> _log = ActivityLog.objects.first()
>>> _log.object
<Author object>
```

### What we can't do?
We won't query like `ActivityLog.objects.filter(object__name__contains='mr x')` on the ActivityLog model. But this is not impossible. Here comes `GenericRelation`.

## How to use GenericRelation with GenericForeignkey?
Just need to modify a little bit of our models(those models need to access over queryset.). Let's do it.
```python
class Author(models.Model):
    name = models.CharField(max_length=64)
    # This will not create field on db
    activity_logs = GenericRelation(ActivityLog ,content_type_field='content_type',
        object_id_field='object_id', related_query_name='author')
    # Other fields


class Reader(models.Model):
    name = models.CharField(max_length=64)
    # This will not create field on db
    activity_logs = GenericRelation(ActivityLog ,content_type_field='content_type',
        object_id_field='object_id', related_query_name='reader')
    # Other fields

```

That's it. We can now write like following...

```
>>> ActivityLog.objects.filter(author__name__contains='mr x')  # This is for author.
>>> ActivityLog.objects.filter(reader__name__contains='mr x'). # This is for reader.
```

Hope this helps.
> Originally posted on [Ashraful's Blog](https://ashraful.dev/posts/django-genericforeignkey-with-generic-relation.html)
100 Days of SwiftUI — Day 21
Tags: 100daysofswiftui, swift
Published: 2020-06-11 09:50:48

---
title: 100 Days of SwiftUI — Day 21
published: true
date: 2020-06-11 09:50:28 UTC
tags: 100daysofswiftui,swift
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-21/
---

After playing around with [colors and gradients yesterday](https://zeitschlag.net/100-days-of-swiftui-day-20/), I just finished the [21st part](https://www.hackingwithswift.com/100/swiftui/21). I learned about some more modifiers today. For example, adding shadows to elements is pretty easy in SwiftUI. And adding shapes. And borders.

I still have to think about how to combine stacks and modifiers and elements, but

- a) I consider this pretty natural, as I'm still learning and
- b) it totally makes sense how and to combine things.

SwiftUI is a lot of fun, I'm happy, that I started this 100 days-tutorial.
Insight #3 - Use ImmerJS over lodash/set, ImmutableJS or plain JS
Tags: javascript, typescript, react, reactnative
Published: 2020-06-11 09:44:24

ImmerJS is a very useful tool for React immutable mutations, that you can write with an imperative style.

I prefer ImmerJS to other tools for some reasons.

---

**Plain vanilla JS**: as soon as we start to deal with nested objects or array insertions/deletions, it starts to become unreadable. Here's a simple screen to show the issue, but the more you nest, the more it becomes difficult to deal with plain JS immutable updates, even with the new ES6 syntaxes that makes it more easy.

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

---

**Lodash/set**: using a string path like `users[1].firstName` is not very typesafe. If we need to update multiple parts of the object at once, we'll likely need to create many intermediate state copies, which is not very performant.

---

**ImmutableJS**: unless you need to optimize for writes on a very large immutable list (in which case you'll benefit from a tree-based datastructure), you'd rather avoid this library.


This library does not use any JS primitive type like array/object, so you'll need to convert from/to primitive types regularly. 

To avoid opting out of `React.memo` and `PureComponent` React component optimizations, you'll need to take care of preserving object identities by memoizing aggressively the `toJS()` transformations (for Redux users, often done in `mapState` using [Reselect](https://github.com/reduxjs/reselect)).

The library's abstraction is likely to leak in many places of your codebase. Do you really want to have ImmutableJS specific code in your state, your reducers, your connexion functions (`mapState` for Redux users), or in your components, making it hard to migrate away from it if you want to use another tool?

---

**[records and tuples proposal](https://github.com/tc39/proposal-record-tuple)**: immutable data structures at stage-1 proposal. 

This is one of the most exciting JS proposal right now, and it's worth a full blog post to cover all the benefits it would bring.

If this proposal is accepted, browser vendors could decide to implement it with an optimized tree-based structure to leverage the same kind of performances for writes than ImmutableJS.

Also, updating immutable objects might become simpler, as shawn in [this tweet](https://twitter.com/mweststrate/status/1263482177934819329) from ImmerJS author Michael Weststrate

Before, with Immer: 

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

After: with records and tuples

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


---


**Conclusion**

Unless there's a standart JS immutable data structure implementation, I think it's safer to stick to plain objects/arrays.

Immer is the best solution for immutable updates, but it may change soon with records and tuples.

---

Part of my Insights serie (I try to write short/daily posts).
Follow me on [Twitter](https://twitter.com/sebastienlorber), [Dev](https://dev.to/sebastienlorber), or check my [website](http://sebastienlorber.com/)
Marketing by being helpful
Tags: marketing
Published: 2020-06-11 09:25:21

Seth Godin, author of [This Is Marketing](https://www.goodreads.com/book/show/40549476-this-is-marketing) has this to say:

> Marketing is the generous act of helping someone solve a problem. Their problem. It's a chance to change the culture for the better. Marketing involves very little in the way of shouting, hustling, or coercion. It's a chance to serve, instead.

Let's have a look how that looks like on the [Indie Hackers](https://indiehackers.com) community. The opportunity presented below was achieved with the help of [Syften, a social monitoring app](https://syften.com).

## Indie Hackers try to keep costs low
A programmer who quits his job to work on his own app is concerned with server costs. I noticed it's is a recurring pain in the community.

So when I learned [how to get $5000 Amazon AWS credits for $49](https://jasminek.net/blog/post/free-servers/) I wrote an article about it. I configured Syften to notify me when someone complained about their infrastructure costs and waited. Sure enough, one day a “How much does it cost to run your side project?" thread popped up. I replied as soon as I got the notification and watched:

![The art of helping others](https://dev-to-uploads.s3.amazonaws.com/i/70a139tnfq3rqrb05ueh.png)

Note how I provide the solution in the comment itself. The focus is on helping, not promoting. I’m not tricking anyone into visiting my blog. My comment became the most upvoted one in the thread, and the thread reached the “top threads of the month” list. I got 17 upvotes, but did anyone click the link?

![Traffic from just that one post](https://dev-to-uploads.s3.amazonaws.com/i/s1v2cfo86bu0jkk85v5j.png)

I promoted my blog only once that week, so all of this traffic came from that one comment. I also got five mailing list signups.

## Summary
Well, that's it. Rather starighforward really:
- Write down solutions to the most common problems
- [Set up an alert](https://syften.com) and get notified when someone mentions one of those problems
- Be helpful
- Link to your blog, saying that more details can be found there
Short snippets: SSH Port Forwarding
Tags: ssh, portforwarding, devops, beginners
Published: 2020-06-11 09:21:45

## How to access a database behind a firewall
**Scenario:**  Say you have a remote linux server somewhere remote (AWS EC2 or something) and you want to access a database whose port is blocked by a firewall, you can use the SSH (Secure Shell) local port forwarding command (-L) to gain access on your localhost to that port.

This is very useful when you’re developing and don’t want to expose your database in the cloud to the outside world.

Open a terminal and use this command below:  
(You may be prompted to enter the user’s password for the remote server)

    #This would connect you to port 5432 on your remote server
    #And allow you to access it locally on port 5432 also, like magic!
    
    $ ssh -L localhost:5432:localhost:5432 <user>@<server_ip>

You can even specify another port if you wish, like this:

    #This would connect you to port 5432 on your remote server
    #And allow you to access it locally on port 8000
    
    $ ssh -L localhost:8000:localhost:5432 <user>@<server_ip>
    
    #You will notice that this creates a new shell
    #(You will be logged in to your remote server)
    #If you don't want this to happen then you can use the -N flag
    
    $ ssh -NL localhost:8000:localhost:5432 <user>@<server_ip>

**Further Reading:**  
If you want to find out more about SSH and tunnels, I recommend the two links below, there are much more things you can achieve with SSH tunneling.

[SSH Tunneling](https://www.ssh.com/ssh/tunneling/example)
[How to create SSH Tunnels](https://www.tunnelsup.com/how-to-create-ssh-tunnels/)
Daily reads for .NET and programming
Tags: discuss, dotnet, learn, blog
Published: 2020-06-11 09:16:37

---
title: Daily reads for .NET and programming
published: true
description: A list of top 5 links that visit daily for the awesome content related to programming, .NET, design, architecture etc.
tags: #discuss #dotnet #learn #blog
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/eeyyuhqg89vq4t7aa8cg.jpg
---
###### image source: Photo by [Kevin Ku] on Unsplash

Technologies are changing, evolving and deprecating every day. One needs to be well versed with the jargon like open-source, architecture, programming model or buzzwords like AI, ML.

To keep yourself updated with these trends, reading and exploring is imperative. When I start my day and before I jump onto my work, I go through some posts, blogs and articles.  The internet is flooded with content so here is my recommendation for beginners.

[Dew Drop](https://www.alvinashcraft.com/)
This is my favorite link and I never miss on reading this one everyday. The best part is that it is regularly updated with great content to explore.

[Discover Dot](https://discoverdot.net/)
My second most favorite and an another brilliant web-page to visit daily. A unified place that has new NuGet packages information, blogs, links and videos to go through.

[Channel 9](https://channel9.msdn.com/Shows/On-NET)
An extensive channel to go through .NET videos.

[Dev.to](https://dev.to/)
Obviously, how can I forget Dev.to :) 

[The Morning Brew](http://blog.cwa.me.uk/)
Another blog post that gets updated on a daily basis is this one. This too has some useful references to go through.


This is my list of top 5 links that I usually follow and read whenever I get time. Also, Twitter is another good source that gives you a lot of content to explore. A great microblogging and social networking service where I follow many tech evangelists.
If there is an amazing data or blog that I am not aware of, feel free to update these in the comments section.