teleren/devto huggingface dataset:
How to REALLY handle mobile viewports
Tags: webdev, mobile, react, design
Published: 2021-04-16 15:41:19

I don't know if you've noticed, but using the vertical viewport on mobile is shit. Here's a quick guide on how to make them less awful.

If you like this post, feel free to [subscribe](https://torbet.co/subscribe) or check out my other posts [here](https://torbet.co/)

Look at the following picture and tell me where you think 100vh should be. Most of you probably said the green arrow, you know, the VISIBLE bit? Actually, 100vh goes all the way to the red arrow, why? I don't know, maybe because that little menu bar at the bottom is ever so slightly transparent that it counts as 'visible'?

![](https://torbet.co/images/Untitledgarrows.png)


Say you want a 100vh div, just to fill the space of the green arrow and nothing more, if you're on IOS, it's easy, just use webkit to fill the space:

```css
.div {
  min-height: 100vh;
  /* fill on ios
  min-height: -webkit-fill-available;
}
```

But what if you're on Android? or if you need a more specific viewport size? No fear, I can help with that aswell!

First, get the value of the windows height, then take 1% of that. You can then set a CSS variable (I used —vh) using this value:

```css
let vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
```

Then, it's as simple as multiplying your variable by how ever many units you want, for example, 50vh equivalent would be:

```css
.div {
  height: calc(var(--vh, 1vh) * 50); // what vh you want
}
```

## But Wait, There's More

If I were you, I'd add this nifty little resize event to change the value of your —vh variable, it will keep your sizing consistent, even when the window size changes.

Just wrap a resize event listener around where you set your variable:

```css
window.addEventListener('resize', () => {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  });
```

I use this whenever I need to set an elements vh, it's consitent across desktop and mobile, and a real time saver!
Python - Read and Generate Qrcodes Under 10 Lines.
Tags: python, automation, beginners, tutorial
Published: 2021-04-16 15:34:14

Let's make a Qrcode Generator and reader in Python.
First Install all the dependencies, we'll be using qrcode module for generatin the qrcode and Pillow library as it used by qrcode.
```
pip install qrcode pillow
```
First create a folder for your project as in this way all of your things will be properly organised.
Now inside your folder create a python file and name it anything you want to I have named mine as "main.py"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7udkt00uia32w2jclwvz.png)
 
Now let's begin with coding, First import all the required modules:
```
import qrcode
from PIL import Image
```
 
Now create a variable to take input from the user:
```
text = input('Please enter a text:')
```
since we have the text ready to be encoded let's create a qrcode from the text:
```
encoded_text = qrcode.make(text)
# You can name your file to anything you like here in the save method.
encoded_text.save('./qrcode.png')
```
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff81ajs8orkz8khs58sw.png) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox072ofzcmsen7xkl176.png)

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

And there you go you have a your own qrcode ready in just under 10 line of python code.

Now, Let's decode a qrcode in python.
Install the required modules:
```
pip install pyzbar
```
Import all the required modules:
```
from pyzbar.pyzbar import decode
from PIL import Image
```
Now let's write the remaining code:
```
#Open your Image in Python using Pillow's Image.open() method.
img = Image.open('./qrcode.png') 
decoded_img = decode(img)

print(decoded_img[0][0].decode())
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzac5ghnrhiqhzm0vakw.png)

That's it Now you can create your own qrcodes as well as decode them in Python :)
How To Create Full Page Scrolling Effect Using JavaScript
Published: 2021-04-16 15:30:07

***Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn How To Create Full Page Scrolling Effect Using JavaScript.***

###Download <a href="https://alvarotrigo.com/fullPage/">Fullpage.js</a> Library###

fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation, and both community and personal support.

###How to get full page Js CDN###
Click Here to get CDN : <a href="https://cdnjs.com/libraries/fullPage.js">CDN</a>


**See Also:-** <a href="https://blog.stackfindover.com/how-to-capture-picture-using-javascript/">Webcam Js Tutorial</a>

###Full Page Scrolling Effect Step By Step###

First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Step:#1###
Add below code inside index.html
```html
<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>Full Page Scrolling Using FullPage Js</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500&display=swap" rel="stylesheet">
    <!--FullPage Js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.min.js" integrity="sha512-HqbDsHIJoZ36Csd7NMupWFxC7e7aX2qm213sX+hirN+yEx/eUNlZrTWPs1dUQDEW4fMVkerv1PfMohR1WdFFJQ==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.css" integrity="sha512-hGBKkjAVJUXoImyDezOKpzuY4LS1eTvJ4HTC/pbxn47x5zNzGA1vi3vFQhhOehWLTNHdn+2Yqh/IRNPw/8JF/A==" crossorigin="anonymous" />
    <!--End FullPage Js-->
  </head>
<body>
  <div id="fullpage">
    <div class="vertical-scrolling">
      <h1>fullpage</h1>
    </div>
    <div class="vertical-scrolling"></div>
    <div class="vertical-scrolling"></div>
    <div class="vertical-scrolling"></div>
  </div>
  <script>
    new fullpage("#fullpage", {
      sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
      sectionSelector: '.vertical-scrolling',
      navigation: true,
      parallax: true,
    });
  </script>
</body>
</html>
```
###Step:#2###
Then we need to add code for ***style.css*** which code I provide in the below screen.
```css
* {
  padding: 0;
  margin: 0px;
  font-family: 'Josefin Sans', sans-serif;
}
h1 {
    color: #fff;
    text-align: center;
    font-size: 10vw;
}
div#fp-nav a span {
    background: #fff !important;
}
```

###Full Page Scrolling Effect Video Output###
{% youtube 3aMNoBKXDuU %}

###Full Page Scrolling Effect Codepen Output###
{% codepen https://codepen.io/stack-findover/pen/yLgwXEV %}
AWS Lambda: Always Allocate (At Least) 1024 MB
Tags: aws, awslambda
Published: 2021-04-16 15:30:00

---
layout: post
title: 'AWS Lambda: Always Allocate (At Least) 1024 MB'
description: Why at least 1024 MB is (almost) always what you want.
date: '2021-04-16 11:30:00 -0400'
tags:
  - aws
  - awslambda
canonical_url: 'https://blog.neverendingqs.com/2021/04/16/aws-lambda-always-allocate-1024-mb.html'
published: true
---

When using AWS Lambda, you are billed for every millisecond your Lambda function takes to run, depending on how much memory you have allocated. A function configured for 256 MB of memory will cost twice as much as a function configured for 128 MB of memory per millisecond. At first, it may seem that you should allocate as little memory as possible to reduce costs. However, the memory configuration also [controls how much CPU power, network bandswidth, and disk I/O you get](https://aws.amazon.com/lambda/features/), and that plays a major role in how long your function takes to execute. Functions that take less time to execute reduces how much you get billed for its invocation.

In a [presentation by Harrell Stiles during re:Invent](https://youtu.be/sSSMTSn2xmA?t=2342), he benchmarked that the same function allocated with 1024 MB of memory ran over 10 times faster for only $0.00001 more than the 128 MB equivalent, and outperformed the same function allocated with 256 MB and 512 MB of memory. This is due to the additional CPU power that was allocated behind the scenes to the function, which allowed it to complete its task faster. If the function had relied on network and/or disk I/O, it could have also benefited from the increased network and disk bandswidth.

The same presentation noted that Lambda functions allocated with at least 1.8 GB of memory also becomes multi-core. This is useful for improving the performance of functions that make network and/or disk I/O requests. Even if you are using Node.js, the extra core allows for more operating system level threads managed by the underlying `libuv` library to run, and you should see performance improvements as a result.

As a caveat, if your Lambda function's main goal is to start and wait for another process (e.g. a long web request), you should allocate as little memory as possible, since the extra memory would only increase cost without decreasing the wait time. Alternatively, consider doing things asynchronously (e.g. with a callback) so that the Lambda function can halt after making the request.

In the end, if you need to be precise about the performance and/or cost of your application, you need to test the different memory configurations yourself. In most cases, you should allocate at least 1.8 GB of memory for network and/or I/O heavy functions and at least 1024 MB of memory for all other functions.
Platforms as Utilities, Archiving Yahoo Answers, & more on DevNews
Tags: news, podcast
Published: 2021-04-16 15:26:49

---
title: Platforms as Utilities, Archiving Yahoo Answers, & more on DevNews
published: true
description: Listen to the S4 premiere of the DevNews pod!
tags: news, podcast
series: DevNews Season 4
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

Get out from under that rock! DevNews Season 4 is here 🎉

{% podcast https://dev.to/devnews/s4-e1-platforms-as-utilities-archiving-yahoo-answers-and-companies-rescinding-accepted-offers %}

Jokes aside, whether you intentionally live under a news rock (understandable, these days), or you’re glued to any headline you can get, keeping on top of developer news is helpful for your career. 

If you’ve never listened to our show, DevNews is a podcast from the DEV Community that’s all about the most recent, developer-focused news stories you need to know about. Each week, @saronyitbarek and I dissect a few of the top headlines we’ve been thinking about with one goal -- to help keep you (and ourselves) informed.

### **In S4E1, we cover the following stories:**
- Companies rescinding job offers after they have been accepted
- Justice Clarence Thomas arguing for categorizing some digital platforms as utilities (with guest [Nikolas Guggenberger](twitter.com/@nikenberger), Executive Director of the Information Society Project at Yale Law School)
- Archive Team’s efforts to archive Yahoo Answers which is shutting down after 16 years (with guest [Jason Scott](twitter.com/textfiles), co-founder of Archive Team)


_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s4-e1-platforms-as-utilities-archiving-yahoo-answers/id1525581923?i=1000517227941)
- [Spotify](https://open.spotify.com/episode/2oleZEHNIdhNMCck1r8n2a)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzI1?sa=X&ved=0CAQQkfYCahcKEwioxvnkqYHwAhUAAAAAHQAAAAAQAg)
- [Stitcher](https://www.stitcher.com/show/devnews)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews/s4e1-platforms-as-utilities-mRtqJn2KjGQ/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=162312778)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [Transcript](https://devpods.dev/podcasts/devnews/episodes/157)

_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season four sponsors, [Scout APM](https://scoutapm.com/devnews) and [Rudderstack](https://rudderstack.com/) ❤️ 

![News](https://media.giphy.com/media/Icj7X7GxqNPmCczjzb/giphy.gif)
FastAPI Startup and Shutdown Events
Tags: fastapi, postgres, database, events
Published: 2021-04-16 15:22:27

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0o5bu63h1o4sqsq5niq.jpg)

"Currently in our start_application function in main.py, We are just trusting that our database would be connected and in case the required tables are missing then those tables will be created." But as a developer it is our responsibility to handle the corner cases. We should verify database accessibility as well as if we can execute a query or not.

Let's Implement a logic that runs every time our server reloads and verifies if the database connection is working or not. We are adopting some async logic from now on, lets add these 2 modules in our requirements.txt file and do a pip install -r requirements.txt.
```
#Databases gives asyncio support for a range of databases.
databases
asyncpg  #For postgres async support
```
Now, We will be creating a startup event, This event runs after our app is initialized. Since we are making an async function so we need to add *async* keyword before the def keyword and we need to *await* the results of async tasks inside this function. In very simple words async tasks are used to resolve blocking requests. It's like if you are copying 80GB of files from your laptop to hard disk, In the meantime you can do other tasks also,You need not sit down and wait for copying to complete. Let's put this async function in our main.py file.
```python
...
from fastapi.staticfiles import StaticFiles
from db.utils import check_db_connected             #new
...


def start_application():
    app = FastAPI(title=settings.PROJECT_NAME, version=settings.PROJECT_VERSION)
    ...


app = start_application()


@app.on_event("startup")              #new
async def app_startup():
    await check_db_connected()
```
and our check_db_connected function in db > utils.py would be:
```python
import databases
from db.session import SQLALCHEMY_DATABASE_URL

async def check_db_connected():
    try:
        if not str(SQLALCHEMY_DATABASE_URL).__contains__('sqlite'):
            database = databases.Database(SQLALCHEMY_DATABASE_URL)
            if not database.is_connected:
                await database.connect()
                await database.execute("SELECT 1")
        print("Database is connected (^_^)")
    except Exception as e:
        print("Looks like there is some problem in connection,see below traceback")
        raise e

# Note for sqlite it might not work, reason:
# For newer version of sqlalchemy (1.3.24 +), We might get 'RowProxy ImportError', It is not recommended to move backward as sqlalchemy newer versions are supporting async while 1.3.* versions are not async compatible.
```
Done, now every time our unicorn server reloads, the startup event would check if the database is connected or not as well as if we can execute a query or not? See the below image for reference.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxtn6qev8fz9rm68vax4.png)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-04-16 15:21:05

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Doing some mindfulness exercises ... or whatever else might spark joy ❤️ 

---

Happy Weekend!

![Friday Cat](https://media.giphy.com/media/xUPN39xtlB15k469TW/giphy.gif)
Design Social Media Buttons Using CSS!
Tags: html, css, buttons, design
Published: 2021-04-16 15:11:54

Here is the tutorial

{% youtube zbCRHsOlGVI %}

Don't know what code editor to use or you just want to move to another one? This video will help you to choose

{% youtube eC8mO6iqUCk %}

Don't forget to like, share and subscribe!
Vue Component Design Patterns 
Tags: javascript, vue, architecture, node
Published: 2021-04-16 15:05:17

From [Vue Mastery](https://www.vuemastery.com/courses/component-design-Patterns/introduction).


Benefits 
- Create components easy to use & maintain 
- Avoid common mistakes that makes our components more prone to bugs 
- Feel empowered to make architectural desition that are best for your app.


Tradeoff
For a lot of use case Component Design Patters might works, but for others it can be an antipattern. 

So, this are guidelines not rules and it's important to understand the potential benefits that best fit, for your application.


Key features

- Pros (array and object definition style)
- Problems of overly relay on Pros to enhance components
- Slot
- Slot Techniques

I'll expand more about this topic on following posts. 
If you can afford, i'll recommend to invest on Vue Mastery Course.
Don't forget to drink water.
Sleep well.
Take care.
DevOps teams are an anti-pattern, but ...
Tags: devops
Published: 2021-04-16 15:03:37

---
title: DevOps teams are an anti-pattern, but ...
published: true
description: What follows is my response to post online about how someone was feeling like they're doing DevOps wrong at their company. And asking why is a DevOps team frowned upon.
tags: devops
cover_image: https://www.norseman.com/images/DevOpsBanner.jpg
---

People put too much pressure on themselves to do DevOps the "right" way or that they're not doing it like they read about at Netflix or Amazon or any other examples. At small to medium sized companies introducing these new concepts, someone(s) need to own getting it started and to be the evangelists.

Yes, long-term having only a single team as your "DevOps" team is an anti-pattern, but you gotta start somewhere. 

What follows is my response to post online about how someone was feeling like they're doing DevOps wrong at their company. And asking why is a DevOps team frowned upon.

---

I look at it like this as I currently have a DevOps title but didn’t really want one.

DevOps should be your entire company’s culture. Shift responsibility left. Let the devs run what they build.

*But* you have to start somewhere. You need people to be the catalyst. They need to learn Jenkins first to help others. Much like you describe. A central team is a DevOps anti-pattern long term but I feel like they’re necessary at first. To be the evangelists. To be the first to install the tooling, get it working in your SDLC, to create the pipelines and grease the cogs to get the culture moving.

They likely own the tooling too. Or a tooling team splits off at some point. Someone needs to manage the tooling and host it and upgrade it and juggle licensing.

But be open to others learning. Cross train devs and ops people. Make sure not to bottleneck people needing resources. Find ways they can fire up their own vms, containers, app services, storage accounts, etc. Eventually that is.

Gotta start somewhere. Not everyone is or can be a FAANG company. Not everyone needs every aspect of DevOps people try to shove your way. Not everyone needs to throw k8s at every problem. And so on.

Improve tooling.  
Improve dev empowerment.  
Improve SDLC.  
Improve testing.  
Improve blameless culture.  
Improve observability.  
Improve continuously.  

Do those and your company/team will become DevOps too. Your team will evolve too. You’ll continue to expand what you offer and what you can institutionalize.

Or maybe they resist every damn change you propose and never want to improve. At that point you flip the proverbial table and find a place where you CAN do those things. :)

---

This article originally was [published](https://thebouv.com/devops-teams-are-an-anti-pattern-but.html) on [thebouv.com](https://thebouv.com)
Find a Halfway Pint in London
Published: 2021-04-16 14:37:31

https://halfwaypint.london

After 4 months of lockdown, pubs in London re-opened their outside areas on 12th April.
When looking to reconnect with friends and family from across the Capital, meeting halfway is the fairest and simplest option.
Find that halfway PINT in London!

A way to re-connect with people and meet halfway in London. It shows pubs with outdoor areas.

I've created this product to solve a common problem I've spotted when trying to meet people in London
Ubuntu 20.04 Dev Environment setup (Laravel)
Tags: laravel, php, mysql, ubuntu
Published: 2021-04-16 14:49:43

A friend on Twitter suggest i post this on here to help get some traction to my post.

Over the last 6 months I've probably rebuilt my Linux environment from scratch 20 times (moving over from mac and learning :) ).

as such i've found snippets and articles all over the web and decided to publish em to a post for building the dev environment from scratch!

Check out: [Raspada-blog - Ubuntu Dev Environment (laravel)](https://raspada-blog.co.uk/blog/ubuntu-dev-environment-setup)
The definition and path to becoming a freelancer
Tags: discuss, career, webdev, javascript
Published: 2021-04-16 14:39:16

Hi everyone, today I would like to talk about a topic you can relate to, which is the freelancer's journey. Let's start with the following question

<b>Is being a freelancer a lifestyle and at what point do you stop being a freelancer? </b>

If we look up the definition of freelancer, it tells us that it is a person who works on his or her own account to provide services and get paid for it. . Under that definition I have this couple of questions that come to my mind 

<b>How profitable is it to be a freelancer all your life?
What is the motivation that drives you to become a freelancer?</b>

Many colleagues have the vision of the freelancer as the person who travels the world programming, others simply don´t want to have a boss who is giving them orders and others just want to earn more because they don´t have a company that takes a percentage of their profit, the reasons can be endless.

I personally know people who have high earnings as freelancers, but I also know others who earn on average, the same as they would earn in a company, being this group the largest.

<b>What is the biggest disadvantage of being a freelancer?</b>

I think the main disadvantage of being a freelancer is that by depending on yourself, if something happens to you, you stop producing money, that is, you don´t have a backup team to support you and that sometimes tends to become a burden especially when there are people who depend on you economically. That would explain why most freelancers (statistically) are young and single people. So the question is

<b>Is being a freelancer a lifestyle or is it just a stepping stone to building your own business? </b>

I think it depends a lot on the perspective, motivation, and situation of each programmer, maybe there are some who would not change their freelancer status for more money or who look for a way to produce a lot of money, and there are others who dare to take that step to the next level by forming a working group or company, which leads to more management responsibility and less code.

<b>What about you? Has your experience been different?</b> 
Let me know.

Thanks for reading!
Have a nice day, coders💜