teleren/devto huggingface dataset:
Making beautiful websites: Top 5 FREE font pairing resources
Tags: webdev, design
Published: 2021-08-04 15:35:39



Choosing fonts and especially font pairs is hard. But choosing the right combination makes or breaks every design.
Selecting fonts that share an overarching theme, yet have a good matching contrast is, a matter of intuition and experience.

Don't worry - check out the top five resources for unique and beautiful font pairing below.

PS: Don't forget to check the *bonus link*!


## [fontpair](https://www.fontpair.co/)
The internet’s source for google font pairings. Period.
Thousands of beautiful font pairings, editable sample text complete with matching color palettes - the one-stop-solution for stunning google font pairs.

## [typ.io](https://typ.io/)
Basically organized in categories and lists, typ.io also suggets a matching font to your favorite one. Once you found your font pair, they provide you with CSS ready to use!

## [Mixfont](https://www.mixfont.com/)
Bored of scrolling through lists of suggestions? Feeling lucky? 
Try Mixfont and their unique generator. A click on the button provides you with a randomly chosen but visually pleasing font pairing from their collection of more than 600 000 possibilities.

## [typewolf](https://www.typewolf.com/)
Their slogan is "What’s Trending in Type" - and this is exactly what you will find here: a curated list of stunning font pairings and color themes.

## [fontsinuse](https://fontsinuse.com/)
An archive of font pairings and designs. More a library of inspirations than a search engine but none the less an amazing resource for beautiful typopraphy.

## Bonus: [fontjoy](https://fontjoy.com/)
A completely new approach to a century old problem: fontjoy generates font combinations by leveraging deep learning technology.


---

Have fun and if you [buy me a coffee](https://www.buymeacoffee.com/martinkr) I can stay awake and write another post ;)
My journey so far as a  front web developer
Published: 2021-08-04 15:16:09

  My journey as a web developer started on the 19th of may 2020, during the covid-19 restrictions. I have always wanted 
to be a web designer as a result of my curiosity on the operations of the web, but at the time i was starting out, i didn't have the right tools, and i was tired of the excuses i was giving myself so i began with my cellphone  by downloading a text editor and a textbook titled HTML and CSS: Design and Build Websites By Jon Duckett and also JavaScript and JQuery be the same author. 

 It was pretty challenging  at first, i struggled with a lot of things even though i am still struggling, but i was making progress and i was beginning to get a clear view of how things worked, YouTube also helped a lot, channels like

1. Brad Traversy
2. Kevin Powell
3. Online Tutorials
4. Dev ed
 
really played a crucial role to the growth of my career. 
 
and so far i have been able to learn how to use Bootstrap, build the web with React JS (JavaScript frame work), use typescript in my projects and also using styled components. 
i am currently interning at a FINTECH company as a front end web developer.

my realization about web development  is, it isn't a field that stands still, so the learning is a continuous
process.
¿El router que se apaga por un cable UTP CAT 6?
Tags: spanish, redes, red
Published: 2021-08-04 15:13:17

Hola, me acaba de llamar un cliente diciéndome que su router se apaga automáticamente por culpa del cable UTP (cable de red) CAT6 que instalé en su casa y que si por favor podría cambiarlo a cable CAT5E xD Por que lo probaron con su cable anterior que era CAT5E y funcionó sin apagarse, creo yo que lo que está mal es el router que les brindó su proveedora de Internet, ustedes que opinan? Les ha pasado algo parecido? (Por cierto, es mi primera publicación, iré subiendo en ingles mientras más vaya aprendiendo :) Salu2
5 REASONS TO BECOME A WEB DEVELOPER
Tags: webdev, codenewbie, programming, computerscience
Published: 2021-08-04 15:12:54


I don’t think I know exactly what programming was all about until I gained admission in the Higher Institution to study Computer Science. This was after I had a serious fight with JAMB  for five solid years. For me, it was like every year madness. So JAMB keeps welcoming me year in, year out. 
Fast forward to Campus life: 
One of the most inspiring statements I heard was by Mr. Kingsley Okonta, our first Programming Lecturer. He said, “A computer software is the only product you can take to the market, sell the shadow and still go home with your product.” At first, this statement sounded very hilarious to us. Trust me, we were "Johnny Just Come (JJC)." 
Currently, I have come to appreciate the fact that I am in the tech space.
 So this brings me to the topic above and here are my reasons: 

1. It is challenging. 
Yes, it is. Even professional developers still need help in solving technical issues or complex problems they are not familiar with. You just have to understand that coding is a CONSTANT LEARNING PROCESS because NOBODY knows it all. The fact that is it challenging is what has given rise to tech champions like Elon Musk, Bill Gates, Mark Zuckerburg over the years and these guys still control the tech space globally.

2. It births creativity.
 Coding is a very creative exercise. Interestingly, you can express yourself because the sky is big enough for you. You just have to take the ideas in your head and bring them to life. And that is exactly what we do at Gygital.

3. You Are Always Needed. 
As a programmer, you are always a highly sought-after commodity. Web developers are crucial parts of an organization’s online presence. There will ALWAYS be loads of opportunities for you. 

4. The Opportunities Are Worldwide. 
Now, this is the BOMB! Becoming a Developer affords you the opportunity to work remotely. I have been able to communicate and serve clients in and outside Nigeria because everything is done ONLINE! So you can expand yourself to the wider world because you can live anywhere you want, work from anywhere you want, as much as you want.  My friend and teammate, Godswill is keen on becoming a Digital Normad. 

5. Coding is the Language Of the Future. 
Coding sometimes uses English words, but everyone across the world uses the same coding languages. So you can build a diverse team to work on the same project. Regardless of your race, region or religion you can work on something special. Perhaps, this explains why Github was created. 

BONUS: Did I tell you about the financial aspect? Well, that’s a topic for another day. LOLs....
A Surprising Fact From Stack Overflow's Developer Survey
Tags: programming
Published: 2021-08-04 15:11:49

![Most popular developer tools in 2021](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr75u27yqi6ohqj5bd7a.png)

Every year, Stack Overflow, a question and answer site for developers, runs a survey. It is probably the largest scale data analysis of software engineers.

This year showed some trends that were surprising.

Docker is the fastest-growing tool among developers. In 2020, 35% of respondents said they used Docker. In 2021, 48.85% said they used Docker. If you look at estimates for the total number of developers, they range from 10 to 25 million. That's 1.4 to 3 million new users this year.

For more surprising facts from this year's developer survey, check out my post on [Unexpected Developer Trends](https://matt-rickard.com/2021-state-of-developers/).

For expert resources on Docker and Kubernetes, check out some of my writing on the [state of container technology](https://matt-rickard.com/archive/).
Take a look on Beer CSS 🍺
Tags: css, pwa, webdev, ux
Published: 2021-08-04 15:06:21

Hi,

I'm here to introduce a CSS open source project called Beercss https://www.beercss.com. So, here are some points IMO:

- "ZERO documentation" this sounds weird at first time. It's like an UI Kit.
- Has about 100 css classes to combine.
- It's lightweight, has about 10kb of size.
- It's standalone and has zero dependencies. This is nice because you can work with any stack (Vue, React, Svelte and others).
- You can do a lot of combinations and scale your elements. Some frameworks has a scale issues, and you need to face it, with your own way.
- The trigger system is very simple. To activate/deactivate an element you can add/remove class `active` or add the code `ui(selector)`. To open a modal `ui(selector)`. To close a modal `ui(selector)`. It's the same function and the framework just knows what to do.
- It's themeable with CSS vars.
- It's focused on a CSS tier.

Thanks for your time guys and I hope you enjoy it! 🍺💛
Scroll restoration in Next.js
Tags: nextjs, javascript, react, webdev
Published: 2021-08-04 14:54:41

---
title: Scroll restoration in Next.js
published: true
date: 2021-08-04 14:53:00 UTC
tags: #nextjs #javascript #react #webdev
canonical_url: https://mmazzarolo.com/blog/2021-04-10-nextjs-scroll-restoration/
---

While working on [Remotebear](https://remotebear.io/), I recently discovered that Next.js doesn’t handle scroll restoration automatically. So, for example, if you navigate back to a previous page of your app, Next.js will always show it scrolled to the top, regardless of the scroll position it had when you left it.

### Experimental scroll restoration flag

Luckily, Next.js has [an experimental `scrollRestoration` flag](https://github.com/vercel/next.js/commit/38bd1a024cb25923d8ea15f269a7294d073684d8) that you can enable to automatically restore the scroll positions.  
You can enable it in your `next.config.js` file this way:

```javascript
module.exports = {
  experimental: {
    scrollRestoration: true,
  },
};
```

### next-router-scroll

For my use case, this solution is working fine, but there are some cases where you need to take control of how your application scroll is handled; namely, you may want to restore scroll when the user is navigating within your application pages, but you need to do extra work before or after the page has changed, either by using some sort of page transition or any other feature.  
In these cases, I’d suggest you give `@moxy/next-router-scroll` a try: This package is built on top of [`scroll-behavior`](https://www.npmjs.com/package/scroll-behavior) and it actively listens to Next.js router events, writing the scroll values associated with the current location in the Session Storage and reading these values whenever `updateScroll()` is called.

### Completely disabling scroll restoration

There’s one inconsistency I noticed around not making scroll restoration work automatically in Next.js: by default, scroll restoration doesn’t work when the navigation logic is being handled by JavaScript, but it works fine when it’s handled by the browser (e.g.: on a full-refresh or while navigating whit JavaScript disabled).

So, in the rare occasions where you want to fully disable scroll restoration, remember to add this snippet to the `<head>` of your project:

```javascript
import Head from "next/head";

export default function ScrollRestorationDisabler() {
  return (
    <Head>
      {/* Tell the browser to never restore the scroll position on load */}
      <script
        dangerouslySetInnerHTML={{
          __html: `history.scrollRestoration = "manual"`,
        }}
      />
    </Head>
  );
}
```
Learning Python- Intermediate course: Day 2, returning values from methods.
Tags: learningpython, python, tutorial
Published: 2021-08-04 14:30:23

Today we will learn how to return values from user defined functions.
---
____
In the [previous part](https://dev.to/aatmaj/learning-python-intermediate-course-day-1-user-defined-functions-1kg7), we covered user-defined functions which did not return any value. But today we will learn how to make functions that return Python data types. This means that now instead of just printing the values, we will now use them in our main code!

### Returning values.
When we say return a value, it simply means- give the final result back to the part of code which called the function.
The return statements can be only called from within a function. After the return statement is called, the function code terminates. This means that the statements after the return statement are not run!
Here is the syntax
```
def fun(..,..,..):
    ...
    ...
    ...
    return ...

```
#### Sample question - Write a function isodd() to check parity of numbers.
```python
def isodd(a):
    if(a%2==0):
        return True
    else:
        return False
print(isodd(5))
```
```
False
```
Run the code yourself and check for different values.

#### Exercise 1- What will happen if the else statement is removed in the above code? [Answer](https://github.com/Aatmaj-Zephyr/Learning-Python/blob/cdf5cd5424ec5c5b6bd9fc0d05a9ddac42bcc17b/Intermediate/Day%202/Exercise%20solutions/Exercise%201.md)
____
### Returning multiple values
We cannot directly return multiple values in Python, but there are many [hacks](https://www.geeksforgeeks.org/g-fact-41-multiple-return-values-in-python/) The best among them is returning a list of values.
#### Sample question 2- Write a function to return the smallest two entries from a given list
```python
def SmallestTwo(a):
    a.sort()
    return [a[0],a[1]]
myList=[1,4,13,7,5,9,12,3,6]
print(SmallestTwo(myList))
```
```
[1, 3]
```
### Exercise 2- Write a function to reverse a string. [Answer](https://github.com/Aatmaj-Zephyr/Learning-Python/blob/77f9ed8e74f21dbadd14e9296a093338a113558e/Intermediate/Day%202/Exercise%20solutions/Exercise%202.py)
Custom Data Studio Viz - Part 2: Critical
Tags: datastudio, javascript, chartjs, datavisualization
Published: 2021-08-04 14:22:39

## [CRITICAL] Adjustments to the boilerplate for development & deployment

To start developing your project, you can type in `npm run start`, as this will open up a localhost server for you to develop the viz, with live-reloading.

However, as up **2021-08-01**, the current boilerplate generated by `npx @google/dscc-gen viz` will not allow you to do `npm run start` or `npm run build:dev` yet. This is covered in a [Github Issue](https://github.com/googledatastudio/tooling/issues/190) right now.

The comment by [@sesi](https://github.com/googledatastudio/tooling/issues/190#issuecomment-784799968) wrapped the solution beautifully. While it is never recommended that you make changes to `node_modules` folder, it is a quick and dirty fix that make our life easier for now.
Amazing :: before & ::after Simple CSS Explained
Tags: html, webdev, css, beginners
Published: 2021-08-04 14:20:26

Hey Guys ,

Today We are discussed very important topic in CSS. A pseudo-element is used to style specified parts of an element in this post I get some reference from Insharamin please follow her on twitter his have a good web development content.

A many people are is don’t understand how to use ::before & ::after. A CSS ::before and ::after is a very useful pseudo element that is very simple and easy to understand example in this article so that anyone can understand it better Happy Reading.

#### What actually are ::before and ::after ?
* In CSS, these are known as pseudo elements.
* A pseudo-element is used to style specified parts of an element.

For example, it can be used to:

* Style the first letter, or line, of an element
* Insert content before, or after, the content of an element.


#### :: before :-

The ::before pseudo-element can be used to insert some content before the content of an element.  You can be add anything before the content. 

#### ::after :-

The ::after pseudo-element can be used to insert some content after the content of an element. below is the best example for ::before and ::after.

{% codepen https://codepen.io/callmenick/pen/DjrAv %}

I hope you like this also comments about your thoughts. For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you.
Notes on CRL
Tags: security
Published: 2021-08-04 14:16:48

# CRL: Certificate Revocation List

- a list of revoked certificates published by a CA or a delegated CRL issuer
- a mechanism for canceling client-side certificate
- when issuing a certificate, the CA includes CRL infromation for the certificate in the certificate itself
- may or may not CDP information within the certificate
- the system compares the user's certificate against apporpriate CRL during authentication
    - It determined to be valid, the system caches certificate attributes and applies
    - if it determined that certificate is invalid, it cannot contact apporpriate CRL, or if CRL is expired, it denies the user access

## CDP: CRL Distribution Point

- location on  an LDAP directory server or Web server where CA publishes CRLs
- the system periodically contacts CDP to get an update of CRL
- the system downloads cRL information from CDP at the interval specified in the CRL, at interval that you specify during CRL configuration, and when manually download the CRL
- Use any of the following methods to notify the system of a certificate's CDO location
    - Specify the CDP in CA certificate
        - location of CDP may be included within the certificaate
    - Specify the CDP in client certificate
        - location of CDP may be included within the certificaate
    - Require administrator to mannually enter the CDP location
        - if neither CA or client certificate include the CDP llocation, you must manually specify how to download the CRL objecy
Tech Project Manager Salary and Job Review 2021
Tags: salary, remotework, projectmanagement
Published: 2021-08-04 14:16:00

{% youtube oOhYMXSj_sk %}
On Indeed.com project management for programming is listed under three different titles:

Software Project Manager   average salary $88,340
IT Project Manager   average salary $94,932
Technical Project Manager  average salary $96,525

Average Salary between the three with the average weighted based on current job openings is $95,040.  These statistics are as-of August 3, 2021.

This video shows Tech Project Manager Salary and Job Review in 2021.  How many jobs are available and how to filter down and find remote jobs.  Currently there are 171,724 software/tech/IT project management jobs currently open/available.

## Technical Project Manager
At this moment on August 3rd, 2021 there are 104 remote jobs listed that were posted within last 14 days which only require mid-level skills and pay at least $120K salary.

## Supporting Links
**Software Project Manager**
https://www.indeed.com/career/software-project-manager/salaries
**Jobs in last 14 days**
https://www.indeed.com/jobs?q=software%20project%20manager&fromage=14

## IT Project Manager
https://www.indeed.com/career/it-project-manager/salaries
**Jobs in last 14 days**
https://www.indeed.com/jobs?q=IT%20project%20manager&fromage=14

## Technical Project Manager
https://www.indeed.com/career/technical-project-manager/salaries
**Jobs in last 14 days**
https://www.indeed.com/jobs?q=technical%20project%20manager&fromage=14
Remote Only Jobs posted within last 14 days with Mid-level skills and at least $120K salary
https://www.indeed.com/jobs?q=technical%20project%20manager%20%24120%2C000&l=remote&rbl=Remote&jlid=aaa2b906602aa8f5&explvl=mid_level&fromage=14&remotejob=032b3046-06a3-4876-8dfd-474eb5e7ed11

For more on Project Management for Programmers see:
{% youtube -lU_3BOxuZ4 %}
How to learn devops
Tags: discuss, devops, cloud, help
Published: 2021-08-04 14:10:03

So from the past few months I've been learning about AWS and a lot about Hashicorp stack too I've tried some projects deployed Forem, ghost, basic applications but it still seems I'm getting no where with devops. So what projects do you think I should do to be better at cloud deployment and SRE(software reliability engineering). Are thee some Github repo that I can follow or is there any curated list of articles or resources that should be followed I'm stumped here. If someone can help me in the comments?
Tabula Recta (codegolf)
Tags: snippetzone, codegolf, strings, javascript
Published: 2021-08-04 14:07:37

{% codepen https://codepen.io/ZevanRosser/pen/vYmzxWZ default-tab=js,result %}

This snippet comes from the <a href="https://codegolf.stackexchange.com/" target="blank" rel="noopener">the codegolf stackexchange</a>. A little while back a challenge for <a href="https://codegolf.stackexchange.com/questions/86986/print-a-tabula-recta" rel="noopener" target="_blank">printing a tabula recta</a> popped up along with a very nice answer from user <a href="https://codegolf.stackexchange.com/users/17602/neil" target="blank" rel="noopener">Neil</a>. Take a look at the answer <a href="https://codegolf.stackexchange.com/a/87035/63485" rel="noopener" target="_blank">here</a>.


_See more stuff like this over @ [Snippet Zone](https://snippet.zone/2021/08/04/print-a-tabula-recta-codegolf/)_
Make anchors in links work in EmberJS
Tags: ember
Published: 2021-08-04 13:54:26

Every web app starts with an [URL](https://en.wikipedia.org/wiki/URL). And commonly used URLs for web apps usually look something like:

```
https://domain.com/path?query=value#fragment
```

The last bit (`fragment`) can be used to [instruct the browser](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page) to scroll the page to the element that has the same `id` as said fragment. Those are usually called _anchors_ or _in-page-anchors_. Example:

```html
<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">
  Jump to the heading below
</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>
```

The scrolling works when the user clicks on a link on current page and also when the user opens the URL from bookmarks or other app.

## The problem

Unfortunately with the advent of [Single-page applications](https://en.wikipedia.org/wiki/Single-page_application) (SPAs), this nifty feature of the browsers stopped working. 

Why? Because initially, SPA has minimal HTML with a link to a big JavaScript bundle that will eventually get parsed by the browser and _the JS code_ will populate the DOM with respective elements based on URL, data, code logic, etc.

So at the initial page load when the browser checks in the DOM for the presence of an _tag_ that has the same _id_ as the _fragment_ in the _URL_ it will find nothing because the DOM is almost empty.

## The solution

Luckily [EmberJS](https://emberjs.com/) has an addon ([ember-url-hash-polyfill](https://github.com/CrowdStrike/ember-url-hash-polyfill)) that solves exactly this kind of problem in a very elegant way. From the addon README:

> Navigating to URLs with `#hash-targets` in them is not supported by most single-page-app frameworks due to the async rendering nature of modern web apps -- the browser can't scroll to a `#hash-target` on page load/transition because the element hasn't been rendered yet.
>
> This addon provides a way to support the behaviour that is normally native to browsers where an anchor tag with `href="#some-id-or-name"` would scroll down the page when clicked.

Once you install it:

```sh
ember install ember-url-hash-polyfill
```

You just have to adjust your app `router.js` and add a `withHashSupport` decorator:

```js
// app/router.js

import { withHashSupport } from 'ember-url-hash-polyfill';

@withHashSupport
export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
```

And after that all URLs with _in-page-anchors_ in them should just work™.

-----

Photo by <a href="https://unsplash.com/@lucassankey?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lucas Sankey</a> on <a href="https://unsplash.com/s/photos/anchor?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Learn how to build a Kubernetes environment 
Tags: devops, container, cloudskills, kubernetes
Published: 2021-08-04 13:44:59

Register for this great series to learn how to build a Kubernetes environment (the easy way)! Join us in the first of our PortaiNerd Event Series.
Check out the below post
https://twitter.com/portainerio/status/1421005807705985025?s=20
or you can use the following link
https://t.co/yvK3k8JwE9?amp=1