teleren/devto huggingface dataset:
6 Best Website Design Trends For 2020
Published: 2020-10-06 14:49:00

Refurbishing your website as a business owner is highly recommended, as it needs to stay up to date following matching footsteps with new global trends. Design Trends are definitely the quickest one to evolve in the design development world. So, you better not take a risk on that. 

A good website can put an everlasting impression to your customer. It can create an image that can certainly lead to conversion to sale. Following are 6 latest website trends that you should focus on implementation for such a perfect website. 

* White Space in Web Designs. 
* Voice Technology. 
* Personalised UX Design. 
* Minimalist Asymmetrical Layouts. 
* Dynamic Background Videos. 
* Saturated Colours in Web Designs.

<a href="https://www.golpik.com">Golpik Inc</a> is an IT company that excels in providing web design and development solutions with do care on all mentioned points. You can consult them for best quality at highly competitive rates.
JIT compiler for the BEAM
Tags: beamvm, erlang, elixir
Published: 2020-10-06 14:46:06

---
title: JIT compiler for the BEAM
published: true
description: Introducing the JIT compiler for the BEAM
tags: BEAMVM,Erlang,Elixir
//cover_image: https://i.imgur.com/92WQSPm.jpg
---

Last month, our colleague Lukas Larson launched the JIT compiler for the BEAM VM. The JIT compiler offers a performance boost of anything from 30% to 130% increase in the number of iterations per second. In our latest blog, Lukas demonstrates the performance testing of the JIT Read more at https://www2.erlang-solutions.com/jitblog2
Google Search Page In Angular Material
Tags: angular, html, css, webdev
Published: 2020-10-06 14:41:04

Google is the number one search engine portal where people can search for any queries. So here we made a google search page clone angular martial with the help of CSS properties and martial angular components.



In this project, we used a basic angular structure with the help of HTML tags. Here we used flex-box properties to make this page properly aligns. We also modify classes of angular martial components. Here we used button, Toolbar, input fields, menu, mat-icons, and list components which are well given in angular material. This is a fully responsive landing page for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/google-search-page-in-angular-material/)
Spam sucks
Tags: meta, security
Published: 2020-10-06 14:40:25

If you've been around DEV for the last few days, we apologize for the feed having too much spam.

The spam fight is an ongoing battle for any platform like ours, and it's something we always need to improve on, especially as we propagate our open source code into the universe via [Forem](https://forem.dev) more and more.

We have had several spam mitigation efforts in place, but they're only as good as the patterns we're preventing, and this bout with spammers is providing us with opportunities to really close the loop on some of the big outstanding issues.

The biggest problem with our current spam tactics is... _observability_... We have functionality in place, but it's a little burried and hard for us to get a sense of what is going on. So our improvements need to be steeped in allowing us to identify when spammy tactics are occurring so we can adjust our code.

Fighting spam is a multifaceted issue that touches rate limiting, user experience for early users, balancing concerns over false negatives vs false positives, etc.

## Patterns

A quality of spam is that it usually easy to spot patterns... That is because for spam needs scale to be effective, as well as a particular outcome in mind.... Totally chaotic spam does not have the same incentives as precise spam.... Though chaos is also worth fighting.

We already fight off _certain_ patterns, but we need to do more of that, and we need the actions to be as _observable_ as possible. Currently we just don't raise the issue enough to the people involved and it's hard to be aggressive when you're treating things as too much of a black box.

{% github https://github.com/forem/forem/pull/10615 %}

This is the start of a pattern-based spam prevention approach that raises the issue to human mods. This will get more sophisticated over time. It will pair with more adjustments to rate limiting and onboarding.

Further adjustments to the feed are also forthcoming, to ensure that even if there is spam, it affects fewer users directly.

As an open source company we look forward to squashing these issues in the open and sharing all of our learnings going forward.

Happy coding ❤️
What's Non-fungible token?
Tags: blockchain, token721, ethereum
Published: 2020-10-06 14:40:12

"A non-fungible token is a special type of cryptographic token which represents something unique; non-fungible tokens are thus not mutually interchangeable. This is in contrast to cryptocurrencies like bitcoin, and many network or utility tokens that are fungible in nature. " from Google.

Yeah.... I saw lots types of NFT in Ethereum network and lots of dApps are developed nowadays BUT ... 

Why it's so valuable?
Why You Should Learn Django In 2020?
Tags: django, python, beginners
Published: 2020-10-06 14:38:59

There are many advantages to using Django over other frameworks. Some of them are:

## 1. Fast​
The Developer have built Django by keeping in mind that it should be easy and fast enough to code in.

That is why there are various libraries provided so, you don’t have to reinvent the wheel or built the product from scratch.

There is much pre-built code already available for you in Django which makes your task much easy.

## 2. Security​​
When it comes to security, it is the framework you should go with.

It can prevent your website or app from most of the attacks like – SQL Injection, XSS, CSRF, Clickjacking, and many more.

## 3. Admin Panel​​
It comes with the built-in administration panel, which makes development much easy and fast.

As you don’t have to create a separate admin panel for handling the backend.

## 4. Scalable​
It doesn’t matter whether you are a single person or running a company.

You can use Django on any type of project and in the future if you want to scale your project to a bigger one, then you can easily extend it as well.

## 5. Good for Data Science and Analytics​​
As we know that Django is built on Python and Python is best known for Artificial Intelligence and Machine Learning.

Therefore, if you want to integrate your project with Machine Learning or run any Data Science operation in it, then you should definitely go with Django.

## 6. Community Support​​
There is a complete well-managed documentation of Django and it has a great community that will help you if you get into any error or problem.

Learn Django by doing Projects 👉 [Django Tutorial](https://bit.ly/30UUZPN)

Thank you :)
Refresh token in SPA
Tags: react, angular, vue, token
Published: 2020-10-06 14:32:14

Refresh tokens are the credentials that can be used to acquire new access tokens.

- The lifetime of a refresh token is much longer compared to the lifetime of an access token.
- Refresh tokens can also expire but are quiet long-lived.
- When current access tokens expire or become invalid, the authorisation server provides refresh tokens to the client to obtain new access token.


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

JWT tokens are valid for a very specific amount of time. The time left for expiration is readily available as part of the access token. You can use a library such as jwt-decode to decode the access token and extract the expiration time. Once you have the expiration time, 

Here are 3 options
- Check token every time before making a request to know if it needs to be refreshed
- Use setTimeout to refresh it periodically X seconds before it expires
- Ask for a new access token if protected route returns 401 

In this article , we will see 3rd approach

Pseudo code

```

try {

  // api call to protected route
  const response = await fetch();

  if (res.status === 200) {

    // update state management library with accessToken, refreshToken you have received from response
    // update cookies/LocalStorage with accessToken, refreshToken you have received from response

  } else {

    // perform necessary action

  }
} catch (error) {

  if (error.response.status === 401) {

    // get refreshToken from cookies or localstorage . in My case it's from cookies
    const refreshToken = cookies.readCookie("refreshToken");

    if (refreshToken) {

      // api call to GET new accessToken & refreshToken
      const response = await fetch();

      // update state management library with accessToken, refreshToken you have received from response
      // update cookies/LocalStorage with accessToken, refreshToken you have received from response

    } else {

      // redirect user to login
      
    }
  }
}

```

In next article, we will see how to fetch failed api's and prevent user from requesting multiple tokens.
Self-Referential m:n Relationships
Tags: ruby, relationships, selfmanytomany, backend
Published: 2020-10-06 14:24:58

# The Journey to Having Friends

I recently finished up my mod3 project called Belay Land. One of the key aspects of this project was learning how to create a backend that would allow my users to form belay partnerships with other users. After doing some research I came across self-referential m:n relationships and it was exactly what I needed. 

## Creating Your Tables

The first step was to migrate the two tables that would be used to make the relationship. 

Partnerships is my join table. I added in a partnership status column and set the default to pending in order to keep track of the partnership being accepted by the receiving party. 
```
create_table "partnerships", force: :cascade do |t|
    t.integer "requestor_id"
    t.integer "receiver_id"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.string "partnership_status", default: "pending"
  end
```

And of course my users table (slimmed down for readability).
```
create_table "users", force: :cascade do |t|
    t.string "username"
  end
```

## Setting Up the Model Relationships

The next step was to set up the relationships between my models. I created a User and Partnership model. Giving them the follow relationship I was able to make a connection between users. 

```
class User < ApplicationRecord
has_many :partnerships_as_requestor, foreign_key: :requestor_id, class_name: :Partnership
    has_many :partnerships_as_receiver, foreign_key: :receiver_id, class_name: :Partnership
```
```
class Partnership < ApplicationRecord
belongs_to :requestor, class_name: :User
    belongs_to :receiver, class_name: :User
```
This relationship essentially creates subclasses of the User class in order to allow users to be a receiver or a requestor of a partnership request. 

## Showing Your Partnerships

I added a serializer to my User model in order to have access to these partnerships being created. 

```
class UserSerializer
    includes FastJsonapi:ObjectSerializer
attributes :partnerships_as_requestor, :partnerships_as_receiver
```

This is about as far as I took my backend in order to create the relationship. The rest of it was taken care of with Javascript on the frontend. 

## Challenges

Overall my biggest challenge was not developing my backend enough. I found myself having to dig through my data a bit more on the frontend than I would of liked to in order to access the partnerships. I would definitely recommend writing yourself a few methods in your backend to fix this. One suggestion I would do is to create a method to make a list of all of your partnerships with the status of accepted.

I hope this is helpful for someone trying to create a self-referential m:n relationship, goodluck!
Update an AWS CloudFront custom SSL/TLS certificate using AWS CLI
Tags: aws, cloudfront, bash, ssl
Published: 2020-10-06 14:18:02

**What ?**

A simple guide of the steps to follow for updating an SSL/TLS certificate *PROGRAMMATICALLY* using AWS CLI.

**Why ?**

Because the official documentation about it is a whole mess when is something rather easy and I'd like to share with others and possibly save some time.

**How ?**

Once you generate your custom certificate using, for example, Let's Encrypt, you may run these AWS CLI commands to update it using bash:

```bash

# Use any name but prefer to use one based on a timestamp since they cannot be repeated on every update
AWS_MY_CERT_NAME=my-cert-$(date +%Y%m%d)

# Set the CloudFront distribution we want to update (found at AWS console)
MY_CLOUDFRONT_ID=EV40L17AXPTKC

# Upload the custom certificate to IAM (using ACM does not work)
aws iam upload-server-certificate --server-certificate-name $AWS_MY_CERT_NAME --certificate-body file://my-cert.pem --private-key file://my-cert-privkey.pem --certificate-chain file://my-cert-chain.pem --path /cloudfront/

# Get certificate ID for the update
AWS_MY_CERT_ID=$(aws iam get-server-certificate --server-certificate-name $AWS_MY_CERT_NAME --query "ServerCertificate.ServerCertificateMetadata.ServerCertificateId" --output text)

# Here the trick: load the current configuration to patch it on the fly (AWS has no other option currently)
aws cloudfront get-distribution-config --id $MY_CLOUDFRONT_ID --query DistributionConfig > config.json

sed -i.bak "s/.*\"IAMCertificateId\".*/\"IAMCertificateId\": \"$AWS_MY_CERT_ID\",/g" config.json
sed -i.bak "s/.*\"Certificate\".*/\"Certificate\": \"$AWS_MY_CERT_ID\",/g" config.json

aws cloudfront update-distribution --id $MY_CLOUDFRONT_ID --distribution-config file://config.json
```

*NOTE:* using the `/cloudfront/` path is important for making the certificate available for CloudFront usage.

**When ?**

You can add these commands to a bash script file to run it using cron configuration every month (or sooner depending on the frequency of your updates)

**Who ?**

These commands are based on these blogs and references:

* https://docs.aws.amazon.com/cli/latest/reference/cloudfront/index.html

* https://docs.aws.amazon.com/cli/latest/reference/cloudfront/update-distribution.html

* https://www.reddit.com/r/aws/comments/5jm7wd/why_is_my_custom_ssl_cert_not_available_when/

* https://aws.amazon.com/premiumsupport/knowledge-center/install-ssl-cloudfront/

* https://intellipaat.com/community/2745/unable-to-select-custom-ssl-certificate-stored-in-aws-iam

* https://aws.amazon.com/premiumsupport/knowledge-center/custom-ssl-certificate-cloudfront/

* https://docs.aws.amazon.com/cli/latest/userguide/cli-usage-output.html#cli-usage-output-filter

* https://docs.aws.amazon.com/cli/latest/userguide/cli-usage-output.html#cli-usage-output-format

* https://docs.aws.amazon.com/cli/latest/userguide/cli-usage-shorthand.html

* https://docs.aws.amazon.com/cli/latest/reference/cloudfront/get-distribution-config.html

* https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cnames-and-https-rotate-certificates.html
🚀 Free 11ty template styled with Tailwind CSS built for blogging
Tags: eleventy, webdev, tailwindcss
Published: 2020-10-06 14:14:13

---
title: 🚀 Free 11ty template styled with Tailwind CSS built for blogging
published: true
description: A free 11ty template perfect for blogging with all starter code you need. A clean and beautiful design for your project in 2020
tags: eleventy, webdev, tailwind,
cover_image: https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/assets/images/posts/eleventy-js-starter-boilerplate.png
---

## 11ty template for blogging

I have just finished my 11ty template. A very simple and clean template for Eleventy using Tailwind CSS.

You can find a demo at this location: [Eleventy Starter Boilerplate demo](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/).

If you are interested by the theme, the code source was published on GitHub: [Eleventy Starter Boilerplate](https://github.com/ixartz/Eleventy-Starter-Boilerplate)

The project have already reached 40+ stars on GitHub. 🔥

## Why I built a 11ty template?

Not long time ago, I have built the starter code (that's why it reaches 40+ GitHub stars). Some people asking me why there is no theme and they are thinking the CSS style was broken. Actually, it wasn't an issue with the template and the reason was I didn't implement a theme for the starter code. So, the style was incredible ugly 😅.

Yesterday, I took the time to implement a theme for this starter code and make it more appealing. Now, there is no reason the project could not reach 100+ stars. 🚀

## Other 11ty templates

If you think this theme was too simple, you can see more [Eleventy themes](https://creativedesignsguru.com/category/eleventy/). Fully responsive and also built in Tailwind CSS using the same [starter code](https://github.com/ixartz/Eleventy-Starter-Boilerplate).
Automated Trader Project
Published: 2020-10-06 14:12:25

I've started to work on an automated trading bot, ShadowBot. This bot will utilize Aave flash loans in order to increase potential profits from arbitrage trades with little to no risk. I plan on utilizing gas tokens as well by using the ShadowGas contract to act as a proxy for interacting with the trader. 


*More info soon!*

Repo can be found here: https://github.com/TraylorBoy/ShadowBot
The Scale Cube
Tags: systems, scaling
Published: 2020-10-06 14:06:18

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

Scaling can be achieved by following the above axes.
1. x-axis, horizontal scaling - When the traffic increases the application can be scaled by adding more instances. This is a simple strategy. However, concerns like handling state should be taken into consideration as multiple instances are working at the same time.
2. y-axis, microservice/functional decomposition - Once the number of instances is increased, and still, if the system underperforms, logic can be decomposed into microservices. This allows scaling different parts of the application individually by adding more instances.
3. z-axis, partitioning/sharing - This concerns the data layer. As the traffic increases, the data layer needs to handle the spikes. As an improvement sharding can be implemented by dividing the records to the different DBs based on a sharding function.

All the above techniques come with certain costs and the decisions need to be taken depending on the requirements of the application like availability, consistency, and partition tolerance.
How to make a component draggable but, in which I can drag it from a drag icon only?
Published: 2020-10-06 13:54:26

I'm trying to create a draggable component in which when I drag `<DragIndicatorIcon/>` the whole component will be dragged but when I shouldn't be able to drag the component when the mouse is down on the `div`.
```
import React from 'react'
import DragIndicatorIcon from '@material-ui/icons/DragIndicator';

function Drag() {
      return (
            <div draggable style={{ display: 'flex' }} >
                  <DragIndicatorIcon />
                  <div  >Drag me from the icon don't drag me from my text please.</div>
            </div>
      )
}

export default Drag

```
Nest.land Hacktoberfest Online Meetup with Ryan Dahl, Sam Williams, and Michael Spengler
Published: 2020-10-06 13:51:59

Check the details and feel free to register here:  
https://organize.mlh.io/participants/events/5363-nest-land-hacktoberfest-online-meetup-with-ryan-dahl-sam-williams-and-michael-spengler
Full-text search of all git branches
Tags: github, git, search, fulltext
Published: 2020-10-06 13:49:25

When I want to quickly search for something in the code I use [GitHub search](https://github.com/search) page. With the prefixes like `org:<organization-name>` it's really great and I have even defined custom browser search engines for different organizations. Then I can simply write something like `org "127.0.0.1"` into my browser and it finds all localhosts in my `org` in all repositories.

The problem is that GitHub indexes only the main branch (whatever you name it). But when there are more branches with active development I want to search even those. And that's why I have a simple batch script to achieve that. Now I can go to any local repo and run `git-search "127.0.0.1"` or `git-search "\b_source\b"` and I get all unique lines matching the RE pattern. Here is the magic script to do that.

```bat
@echo off
rem https://stackoverflow.com/questions/7151311/using-git-how-could-i-search-for-a-string-across-all-branches
git fetch origin
git remote prune origin
git branch --remote | grep -v " -> " | xargs git grep %* | cut --delimiter=":" --fields=2,3 | uniq | grep --color=always -E %*

```
The need for PageSpeed​
Tags: webdev, wordpress
Published: 2020-10-06 13:42:52

##What is a PageSpeed and why it matters?​

Today, people have high expectations for mobile experiences. Simply loading on a mobile device is no longer enough. To keep people engaged, mobile sites must be fast and relevant.

>53% of visits are abandoned if a mobile site takes more than three seconds to load.

Page speed is often confused with "site speed," which is actually the page speed for a sample of page views on a site. Page speed can be described in either "page load time" (the time it takes to fully display the content on a specific page) or "time to first byte" (how long it takes for your browser to receive the first byte of information from the webserver).
No matter how you measure it, faster page speed is better. Many people have found that faster pages both rank and convert better.

>1 out of 2 people expects a page to load in less than 2 seconds.

Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. And research has shown that Google might be specifically measuring time to the first byte as when it considers page speed. In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.

##Why are mobile sites so slow?​

A mobile site is like a backpack — it can be a neat and organized way to carry what you need, so long as you don’t overload it.
If you overload your backpack, not only will it weigh you down, but the items in your bag could get wrinkled, bruised, or damaged from overcrowding.

Read More: [Link](https://thedigitalbloom.com/2020/09/28/page-speed-optimization/)
EuroPython trademark registered in the US
Tags: europython
Published: 2020-10-06 13:40:15

###### (Original post - https://www.europython-society.org/post/631228053038694400/europython-trademark-registered-in-the-us)

After the confusion which was caused by a rock band starting to use the name “EuroPython” for themselves a few years ago, which we resolved amicably with the band, we had decided to register for a US trademark in addition to our [European CTM mark for “EuroPython”](https://www.europython-society.org/trademarks).

We are happy to announce that we have now received the official certificate of the US trademark. 🙌

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

(EUROPYTHON - [US trademark 6,166,760](https://tsdr.uspto.gov/documentviewer?caseId=sn88308679&docId=ORC20200920074631#docIndex=0&page=1))

Please help us maintain and protect our trademarks by letting us know if you find [any unauthorized or misleading use](https://www.europython-society.org/trademarks). Thank you.

Thanks,
–
[EuroPython Society](http://www.europython-society.org/)

P.S. Here's the original [Twitter thread](https://twitter.com/malemburg/status/1003377683269603328).