teleren/devto huggingface dataset:
Thoughts on CSS Optimization
Published: 2021-06-10 02:41:09

# Tailwind

So, there is [Tailwind](https://tailwindcss.com/). One of the argument tailwind's fan provide in favor of this library is that you ship only the utilities you use, hence minimal CSS.

If this is the only argument to consider then my CSS-in-JS is the way to write CSS as I ship close to none.

What tailwind fans don't mention is that some of the bytes you save from CSS file is actually transferred to your HTML.
In other words, the CSS you ship is smaller, but your HTML file getting slightly bigger.

I would like to see an analysis of how much bytes are really removed if you take into account the size of HTML as well.

# Alternative 1

How can one really minimize the styling portion of its application?

A very complicated approach would be to write a script/library that will check which parts of the styles are being repeated and group them together. Hard to implement, or not already available in every development ecosystem.

# Alternative 2

What would make a simpler approach?

What comes to my mind is: a component-based approach with properly defined boundaries. A component must:

- Define the styles it uses, regardless of the context it is being used in. (i.e. no placement style (margin, top, flexbox properties, etc.))
- Leave these "placement styles" to the parent components
- Have a limited numbers of placement components.

This means that a button component defines its color, padding, borders, but never its margins.

The component that uses this button must define its placement, (ex: I have a row of buttons with x margin in between).

# Grid systems

I have recently been using [Carbon](https://carbon-svelte.vercel.app/) on a Svelte project.

My first opinion of the library has been that its rigid. A good component library is also composable. Carbon would get about a 5 out of 10 if I had to rate it based on that criteria.

This being said, this lack of flexibility made me think more about its intended usage. That's when I discovered their grid system.

A grid system is the ultimate CSS optimization system one can use and matches the criteria I defined above.

When I tried to base my code solely on this grid, I was using close to no CSS (small project, 5 screens, no color customization, I ended up using a `width: 100%` and a `float: right`).

That's when I fell in love with the Carbon grid.
Deploying AWS SAM with GitHub Actions - The Cloud Resume Challenge Series (Part 17)
Tags: devops, cloud, aws, serverless
Published: 2021-06-10 06:09:13

---
title: Deploying AWS SAM with GitHub Actions - The Cloud Resume Challenge Series (Part 17)
published: true
tags: #devops #cloud #aws #serverless 
---

Hey cloud engineering friends! 

Over the past few weeks I've been completing [the cloud resume challenge](https://cloudresumechallenge.dev/). It's a free challenge started by AWS hero Forest Brazeal to help people get into the cloud by doing a hands-on project. [Original announcement post here](https://dev.to/forrestbrazeal/the-cloud-resume-challenge-503g).

The challenge is to create an online resume with a view counter, so far in the series we've created all our AWS infrastructure, and in this video we'll go through how to deploy it all onto AWS using GitHub Actions. 

{% youtube gEsZyIhglpI %}

If you're thinking getting into cloud I do really recommend you check out the cloud resume challenge as a place to start! 

---

Hey! 👋 If we haven't met, let me introduce myself, I'm [Lou](https://twitter.com/loujaybee), and I created _[Open Up The Cloud](http://thedevcoach.co.uk/)_ to help you get your start, and grow your career in cloud 🚀. 

If you're interested in cloud, the best way to keep up-to-date with news, and everything I publish is via the [monthly cloud newsletter](http://newsletter.thedevcoach.co.uk/). And find _Open Up The Cloud_ on [YouTube](https://www.youtube.com/channel/UCAklaE5D59xWtip-3Jwa7xA), [Twitter](https://twitter.com/openupthecloud), [Instagram](https://www.instagram.com/openupthecloud)... wherever you like hang out! 😄
Removal of Non ASCII characters using Python
Tags: python, programming, codenewbie, python3
Published: 2021-06-10 07:04:18

Hello Devs,

I am going to explain about how to remove non ascii characters from input text or content. Let first get to know what non-ascii characters are. 

**What are non ascii characters** ? 

You might have faced an issue while copy pasting text from document ( docx ) to HTML input element or any editor. Sometimes the format of symbols is not supported in particular. input area. Example, double quote is used in docx file  and code editor or input element is different see below 👇🏻

```
“Example Text”. - in docx file 
"Example Text" - in editor or HTML input element
```
When you are trying to docx file text format into HTML then it is treated as non ascii characters or junk characters. Generally It can save into the database but sometime while doing some encoding or signature calculating you will face an issue because this will throw an error due to an unsupported string. One of the real scenarios I faced while calculating AWS signature before passing to API gateway and same matching with calculated signature by AWS is match and it throws an error because AWS signature calculation mechanism removes those characters and calculates signature but in your code you might not be doing then very straight it will not match. 

**How to solve this issue then** ? 

Below is Python script to remove those non ascii characters or junk characters. 

Prerequisite : 
- Python any version ( recommended 3.x ) 
- Regular expression operations library(re) - `pip install re`


```
import re
ini_string = "'technews One lone dude awaits iPad 2 at Apple\x89Ûªs SXSW store"
res1 = " ".join(re.split("[^A-Za-z0-9]+", ini_string)) 
print(res1)

if re.match("[^\t\r\n\x20-\x7E]+", ini_string):
    print("found")
    
result = ini_string.encode().decode('ascii', 'replace').replace(u'\ufffd', '`')
result2 = ini_string.encode().decode("utf-8").replace(u"\x89Ûª", "`").encode("utf-8")
print(result2)

```

**References** : 
- https://gist.github.com/aviboy2006/ca1e50f1cb1a32f7544f2f0af1fb928d
A few words on me
Published: 2021-06-10 08:29:00

Before getting into code, I was a Linguistics Professor at a University in Brazil. As life goes, I moved to Berlin and decided to switch my career. Two reasons lead me to this path. The first reason was a taste for software development.  Before going to college, I have worked in this field, which I always found exciting and challenging. The second reason was the changes this area has undergone in the past years. It became so diverse, with unimaginable possibilities.
At this moment, I am updating some of my skills in Front-End development. My main goals are: to have the chance to improve my skills, grow, and work on projects that will positively impact the world.
How to bulk rename PDFs with Python
Tags: python, productivity, tutorial, showdev
Published: 2021-06-10 09:34:34

Today I will show you a simple way to bulk rename your pdf files.  If you have a group of PDFs that need to be copied and renamed for multiple folders this script will help you a lot. 

Let's jump to the code. 

```python
import os
import shutil
from datetime import date
from os import walk
```

after importing we need to define the path:

```python
mypath = r'C:\Users\Stokry\Desktop\python\bulk\main'
```
the we need to get files to rename:

```python
_, _, filesnames = next(walk(mypath))
```
files will be copied into folders name `John` and `Anna`:

```python
list = ['John', 'Anna']
```
also, we will set a current date
```python
today = date.today().strftime("%m_%d_%y")
```
then we can create the new folders:

```python
for name in list:
    newdir = name + '_' + today
    path = os.path.join(mypath, newdir)
    os.mkdir(path)
```
this will copy the files:

```python
for file in filesnames:
        shutil.copy(mypath + '\\' + file, path)
        os.rename(path + '\\' + file, path + '\\' + name + '' + file)
```

This is our final result:

![enter image description here](https://i.ibb.co/c1L2kDC/aaa.png)

Thank you all.
My first Launch! 🚀🚢
Published: 2021-06-10 12:19:03

Hey, I'm finally shipping something!

I'm working on two bigger projects at the moment, but have been frustrated for a bit because progress has been a bit slow. So, I thought I'd take a break and build something small and fun.

### INTRODUCING: [www.remindy.me](https://www.remindy.me/)

I found the domain name was available whilst I was working on one of my other projects (a domain name recommendation engine that generates new & available domains), thought it was cute and grabbed it immediately. A bit later, this website was born!

Here's some more details for the curious:

### Tech Stack
Backend: Python/Flask
Frontend: my weakpoint. Currently using Bootstrap 5 and some simple CSS. _Have I mentioned I hate CSS? At least now it looks good decent on mobile too)_
Email provider: Fastmail (love them)
Deployment: Heroku (easy to setup, use, scale and maintain)
Domain provider: Namecheap (much better than GoDaddy)

### Plans for the future

1. Open-Sourcing: I want to clean up the code a bit and then open-source the project. There's no revenue model and maintenance costs are low (7$/mo), so there's no downside. Besides, I use so much FOSS that it's the least I can do.

2. Nothing much more besides that. If you have any good ideas I'll be glad to hear them, but the idea was to have a simple service that I'd leave running forever ([a la Unix Philosophy](https://en.wikipedia.org/wiki/Unix_philosophy))

### Marketing Plans

Don't really plan on promoting this much - it's just for fun. I had planned to share it with the few maker communities I'm part of, announce it on my [Twitter](https://twitter.com/uwwgo), and maybe do a Show HN once I've published the source code. 

### Conclusion

Building this was fun. I enjoyed building a small-scale project that nevertheless is useful. Finishing something and shipping it also has given me some extra motivation to continue working on my other (larger) projects. Can't wait to ship!

Lastly, if you want to connect with me, I'm quite active on [Twitter](https://twitter.com/uwwgo) these days. Happy to follow back!

I've also got a website I update occasionally:  [www.hugomontenegro.com](https://www.hugomontenegro.com/)

Cheers and thanks for reading this!
Optional Chaining (objects & arrays)
Tags: javascript, beginners, tutorial, codenewbie
Published: 2021-06-10 12:34:20

Optional chaining can be really useful to help with potential errors when accessing a property of an object. It allows you to access a property deep within an object without risking an error if one of the properties is nullish (`null` or `undefined`). 

Optional chaining is used to access a property that may or may not exist. 

[Reference: MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

## Optional Chaining (objects)

The syntax is to use dot notation but with a `?` in front of the dot. Here's an example: 

```js
const user = {
  name: 'Joe',
  age: 27,
  settings: {
    theme: {
      mode: 'dark',
      text: '#d7e0ff',
      background: '#f87070',
      font: 'Kumbh Sans, sans-serif'
    },
  },
  friends: ['Brandon', 'Brian', 'Isaac'],
}

console.log(user?.settings?.theme) /* => { mode: 'dark', text:
'#d7e0ff', background: '#f87070', font: 'Kumbh Sans, sans-serif' }
*/
```

## Optional Chaining (arrays)

The benefit of optional chaining on an array is that if the results were null or undefined, your code won't break. It will short-circuit and return undefined.

```js
const user = {
  name: 'Joe',
  age: 27,
  settings: {
    theme: {
      mode: 'dark',
      text: '#d7e0ff',
      background: '#f87070',
      font: 'Kumbh Sans, sans-serif'
    },
  },
  friends: ['Brandon', 'Brian', 'Isaac'],
}

/*
// variable to hold the data
let firstArrayValue = '';

// instead of using an if condition 
if (user.friends) {
  firstArrayValue = user?.friends?.[0];
}
*/

// use optional chaining 
const firstArrayValue = user?.friends?.[0]
console.log(firstArrayValue) // => 'Brandon'
```

## Important notes 
* You can only use optional chaining on an object that exists.
* Optional chaining is only used for reading. It cannot be used for assignment.
```js
// profile is not defined 
console.log(profile?.settings?.theme)

// Syntax error (Optional chaining cannot appear in left-hand side)
user?.settings?.theme = 'light'
```
What is a jar?
Tags: java, beginners
Published: 2021-06-10 13:53:32

So after many years of using `java -jar`, It has finally clicked that `jar` is also a command in terminal.

If we run `man jar` we see that jar files and the jar utility is a form of archive like .zip and so is .war, hu yeah.

Why does jar exist? Im not sure, Java is a strange ecosystem
Passing ''Arguments'' into Event listeners
Tags: javascript, webdev
Published: 2021-06-11 05:15:12

If you are using one event handler function for multiple event listeners, it would be helpful to pass arguments into the event handler. Unfortunately, you can't do that the normal way in JavaScript, although there are some workarounds. In this article, I am going to explain how to do that with brief examples.
## The wrong way
Trying to pass arguments directly to the event handler in the event listener expression will not do any good
```
const clickHandler = function (e, color) {
 e.target.style.backgroundColor = color;
}
buttonOne.addEventListener('click',clickHandler(e, 'red') )
```
In the above piece of code, the desired outcome is to change the clicked button's color to red as we pass it into the handler, but obviously, that's not working. The reason behind it is that when you add braces into the event handler function, it will be called immediately not when the event fires.
## Using Anonymous functions
```
const clickHandler = function (e, color) {
 e.target.style.backgroundColor = color;
}
buttonOne.addEventListener('click', function(e) {
 clickHandler(e, 'red')
} )
```
One way to get the desired outcome is to pass an anonymous function into the event listener, which will be called when the event fires. We will call the handler function inside the anonymous function with the appropriate arguments.
## Modifying the 'this' object
Another way of solving the problem at hand is to use the bind() function to modify the 'this' object. The 'this' object in turn will be used as an argument in the handler function.
```
const clickHandler = function (e) { 
e.target.style.backgroundColor = this;
}
buttonOne.addEventListener('click', clickHandler.bind('red'))
```
The 'this' object in the above example is modified to be 'red'. This workaround is not actually passing arguments, but it gives a cleaner solution.

> This hack won't work if the handler function is an arrow function (remember what 'this' means in arrow functions).

One more thing, if you want to pass multiple arguments into the handler function, you can modify the 'this' object into an array or an object as in the code below.
```
const clickHandler = function (e) { 
e.target.style.backgroundColor = this[0];
e.target.style.color = this[1]
}
buttonOne.addEventListener('click', clickHandler.bind(['red', 'white']))
```
## Conclusion
Reusing event handlers with different arguments is an elegant way of handling multiple events with just one function. Passing arguments into the event listener expression may not be possible directly but we can do this using an anonymous function that calls the handler when needed. If you think it is ugly this way or you want to do it with fewer keystrokes, modifying the 'this' object into an argument object will do so.
Daily Developer Jokes - Friday, Jun 11, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-11 12:00:00

---
title: "Daily Developer Jokes - Friday, Jun 11, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Jun%2011%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258884db70.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you call a busy waiter?

___A:___ A server.
 -->
Sharing a Custom Report will share the report configuration and data included in the report
Published: 2021-06-12 07:50:32

Question: **Sharing a Custom Report will share the report configuration and data included in the report.**

Answer:

1.TRUE
2.**FALSE**

Find all other answer related to this certification at: Google Analytics Individual Qualification Exam Answers 2021

What is Google Analytics Individual Qualification(GAIQ)?

**Explanation (Summary)** : Assets are tools that you create in Analytics to help you customize your data analysis. Custom Segments, Goals, Custom Channel Groupings, Custom Attribution Models, and Custom Reports are all considered assets in Analytics. Assets are created and managed at the reporting view level.

You can share or delete assets one at a time from each specific asset menu, or you can share or delete them in bulk. When you share an asset, only the configuration information is copied and shared. None of your Analytics account data or personal information is shared, so you maintain control over your privacy and data.

Source:<a href="https://steemit.com/google/@healthyswami/sharing-a-custom-report-will-share-the-report-configuration-and-data-included-in-the-report" target="_blank" rel="dofollow"> **Sharing a Custom Report will share the report configuration and data included in the report** </a>
S.O.L.I.D Principle - Pengenalan
Tags: oop, programming, architecture, kotlin
Published: 2021-06-12 12:49:55

Pada kesempatan kali ini saya akan mencoba membahas tentang SOLID Principle yang merupakan sebuah prinsip yang menurut saya wajib untuk diketahui oleh para Developer.

## Apa itu SOLID Principle ?
SOLID principle adalah sebuah prinsip yang dikelankan oleh Robert J. Martin (a.k.a Uncle Bob) di dalam paper yang di terbitkannya pada tahun 2000 [Design Principles and Design Patterns](https://fi.ort.edu.uy/innovaportal/file/2032/1/design_principles.pdf) dengan tujuan untuk membuat code yang dapat dimengerti, dapat dibaca, dan dapat test oleh banyak developer secara kolaboratif. Dalam 20 tahun terakhir kelima prinsip ini merevolusi dunia pemrograman berbasis object (OOP), merubah cara kita dalam menulis code.

Dengan mengadopsi kelima prinsip ini akan membantu kita dalam menulis sebuah code yang bersih, lebih maintanable, dan adaptive terhadap perubahan sering dengan berkembangnya project.

SOLID sendiri merupakan kependekan dari dari:
* **S** - Single-responsiblity Principle
* **O** - Open-closed Principle
* **L** - Liskov Substitution Principle
* **I** - Interface Segregation Principle
* **D** - Dependency Inversion Principle

Mari kita lihat penjabarannya dari masing-masing prinsip yang dikemukakan oleh Uncle Bob ini, pada kali ini saya akan mencoba menjelaskannya masing-masing prinsip agar mudah dimengerti dan membaginya dalam beberapa artikel agar lebih nyaman untuk dibaca dan tidak memakan waktu terlalu banyak untuk membacanya
SASS Setup
Tags: webdev, beginners, npm, github
Published: 2021-06-12 15:26:00

[SASS](https://sass-lang.com/guide) - Syntactically Awesome Style Sheets.
Its a CSS Extension.

[npm Installer](https://www.npmjs.com/package/sass)

[Windows 64 Bit Download Link](https://github.com/sass/dart-sass/releases/download/1.34.1/dart-sass-1.34.1-windows-x64.zip)
[Add the Path to get it working on CLI](https://katiek2.github.io/path-doc/)
`.sass and .scss are compiled to .css`
Command-
```sass **source**/stylesheets/index.scss **build**/stylesheets/index.css```
This is a great convention to put source files differentiated and create new folder for compiled or modified file.
//Chocolatey Package Manager *choco*, Homebrew PM *brew*, scout-app.io
Loading State Visuals: how to make waiting more fun...
Published: 2021-06-13 02:03:19

No one likes waiting. It's the down time we could be using to eat snacks, text friends and try to rearrange our to-do lists for maximum laziness. Waiting for a page load, especially, is some of the most audacious down time because computers are supposed to be fast. However, given the asynchronous state of our functions, the business of our network or even just the strength of our internet signal, we will need to wait so we might as well make it look cool. Enter nProgress, a styling package that helps us add styles to our loading state so we can have a visual representation of our downtime with cool animations and color schemes.
To use nprogress, all we have to do is import it 
`import 'NProgress from 'nprogress'`
and the associated styling that comes with the package.
`import 'nprogress/nprogress.css'`
NProgress comes with it's own methods that let us start the progress bar 
`NProgress.start()`
We can also set it to a certain amount or increment 
`NProgress.set()`
`NProgress.inc()`
and finally we can stop the animation with 
`NProgress.done()`
In my Advanced React and GraphQL tutorial we go over page load, and how to use NProgress to give us some visual effects to display our loading state. Utilizing the NextJS Router component, we are able to listen to Router based events, specifically 
`Router.events.on(`routeChangeStart)`
This gave us something to listen for before starting the NProgress effects 
The final implementation looks something like this 
```Router.events.on('routeChangeStart', () => NProgress.start()).
Router.events.on('routeChangeComplete', () => NProgress.done())```
A caveat here if you're using styled components is that the server and the client might be rendering different identified components (meaning styled components has an id for it, and the server has it's own id). Should this be the case, you'll recieve a scolding from the console and we have some light editing to do. Make sure you use the ```getInitialProps``` hook. The implementation is pretty heavy, and honestly this is a great example of reading your Docs because it looks weird, but it handles this problem quite nicely:
```static getInitialProps({ renderPage }) {
     const sheet = new ServerStyleSheet();
     const page = renderPage((App => (props) => 
     sheet.collectStyles( <App {...props} /> 
   );
   const styleTags = sheet.getStyleElement();
   return {...page, styleTags };
}
```
So, that was alot, but bear in mind we are asking our App component to render with spread props a-la the "spread" operator, meaning we have essentially collected all the styles from the page as well as any initial styles from the server. Now the id's on the server and client side styled  components can "work together".
Authentication and Authorization in a Microservice Architecture | OAuth 2.0 | JWT
Tags: microservices, authentication, authorization, systemdesign
Published: 2021-06-13 10:52:34

In this video tutorial, we will be looking into:
1) How Authentication and Authorization work in a Microservice Architecture?
2) What problems do we face when performing Authentication in Microservices? 
3) What could be the best possible solution to Authentication and Authorization in Microservices?

{% youtube Rn8ts-3eayc %}