teleren/devto huggingface dataset:
UI Dev Newsletter #41
Tags: webdev, html, css, javascript
Published: 2021-01-25 21:44:43

- [Web Almanac: Media](https://bit.ly/3sUULnN)
Tamas Piros, Ben Seymour, and Eric Portis share insights analyses on how we use and misuse images and videos on the web.


- [New in Chrome 88: CSS aspect-ratio property](https://bit.ly/2Y95ehh)
Chrome announces the support of the aspect-ratio property.


- [Building a sidenav component](https://bit.ly/2M0Nr9M)
Adam Argyle shares how he prototyped a Sidenav component for the web that is responsive, stateful, supports keyboard navigation, works with and without Javascript, and works across browsers.


- [Running Lighthouse in GitHub Actions](https://bit.ly/2M0ptLO)
Barry Pollard shows how to automate Lighthouse audits in the GitHub repository.


- [My Top CSS Tips As Shared on Twitter - Part 1](https://bit.ly/2NyDWPz)
Stephanie Eckles compiles a list of CSS tips, including gradient borders to more aesthetic :focus styles.


- [Why Tailwind Isn't for Me](https://bit.ly/3a4xnvs)
Jared White outlines reasons why Tailwind CSS was not the choice for him.


- [How We Improved SmashingMag Performance](https://bit.ly/39deSpr)
Vitaly Friedman takes a close look at some of the changes they made on the Smashing Magazine site to optimize the web performance and improve the Core Web Vitals metrics.


- [A little tip for auditing the layout shifts and avoid performance issues.](https://bit.ly/3iKHOZ3)
Smashing Magazine shares a tip on how to debug layout shifts.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Palindrome checker using Html,Css,Js 
Tags: 100daysofcode, html, css, javascript
Published: 2021-01-25 21:42:33

Sixth day of my challenge.

#Palindrome checker:
> A palindrome is a word, number, phrase, or other sequence of characters which reads the same backward as forward, such as madam or racecar or the number 10801.

#Steps:
## Type - 1:
* Get the input value using DOM methods.
* Convert the string to lowercase.
* Create a empty variable to store the reverse string.
* Using for loop, store the values to the variable.
* Check the reverse string and input value are equal using if condition.
   * If both are equal, then display <em>It is a Palindrome</em>
   * If both are not equal, then display <em>It is not a Palindrome</em>
```
const inputVal = document.getElementById("inputVal").value;
const input = inputVal.toLowerCase();
console.log(input);
let reverseVal = "";
for (let i= input.length-1; i>=0; i--) {
     reverseVal += input[i];
 }
console.log(reverseVal);

//Condition to check the palindrome
  if (reverseVal == input) {
    result.innerHTML = "It is a Palindrome!!!";
  } else {
    result.innerHTML = "It is  not a Palindrome";
  }
```

##Type - 2:
* Follow first two steps from type-1.
* Split the inputValue using `split()`.
* Then, reverse the inputValue using `reverse()` function.
* Then join the inputValue using `join()` function.
* Finally follow the last step as in Type-1(check the palindrome using **if** condition).
```
function palChecker(event) {
  event.preventDefault();

  const inputVal = document.getElementById("inputVal").value;
  const input = inputVal.toLowerCase();
  console.log(input);
 
  const split = input.split("");
  let reverse = split.reverse();
  let revWord = reverse.join("");
  const result = document.getElementById("result");

  //Condition to check the palindrome
  if (revWord == input) {
    result.innerHTML = "It is a Palindrome!!!";
  } else {
    result.innerHTML = "It is  not a Palindrome";
  }
}
```
### References:
* [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split)
* [Reverse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
* [Join] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
* [toLowerCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
* [string.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length)
Migrating or Rolling Back a Specific Migration in Rails
Tags: rails, database
Published: 2021-01-25 21:36:36

Rails provides two tasks for migrating/rolling back specific migrations while ignoring the rest.

## db:migrate:up

Run a specific Rails migration based on the timestamp in the filename:

``` shell\
bin/rails db:migrate:up VERSION=20210121221640
```

## db:migrate:down

Roll back a specific Rails migration based on the timestamp in the filename:

``` shell\
bin/rails db:migrate:down VERSION=20210121221640
```

## Why would you want to do this?

The up version could come in handy if you want to run a single migration in production after merging it.

The down version can save you from the following headache:

``` shell
~ bin/rails db:migrate

== 20210125021956 YourMigrationName: reverting 
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

Caused by:
ActiveRecord::IrreversibleMigration
```

I’ve run into this after rebasing (and running) an irreversible migration on top of my branch before realizing I needed to rollback the migration I was implementing. Your options are twofold.

1. Fix every irreversible migration that’s blocking your from rolling back yours.
2. Use `bin/rails db:migrate:down` and your migration’s version number.

The right path depends on the situation.

## How can I avoid writing irreversible migrations?

It’s commonplace for Rails developers to set up an alias that runs migrations, rolls them back, and runs them again to ensure their new migrations are reversible. The following command be used:

``` shell
bundle exec rake db:migrate db:rollback && bundle exec rake db:migrate db:test:prepare
```

`bundle exec` can be replaced with `bin/rails` if you’re using a newer version of Rails.
Intro to CSS Flexbox - Order
Tags: css, tutorial, beginners
Published: 2021-01-25 21:33:50

{% youtube atTO4AEwffk %}

Order is a neat way to define more exact ordering of how child elements of a flex container display. 

To assign order you use the `order:` CSS property on a given flex item. Doing this on one item if there are multiple with throw things out of wack a bit because you need to define order for all child flex items for this to behave properly. 

Order is only respected if a container is of course displaying flex.

```css
.flex-item {
  order: 3; /* default is 0 */
}
```

#### CodePen

{% codepen https://codepen.io/webcrunchblog/pen/GRjBLob %}


### New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch. 

[![hello HTML css course](https://f001.backblazeb2.com/file/webcrunch/hellohtmlcss-promo.jpg)](https://hellohtmlcss.com)
Intro to CSS Flexbox - Align Items
Tags: css, beginners, tutorial
Published: 2021-01-25 21:31:58

{% youtube _OxnqhIVMrg %} 

CSS align-items sets the default behavior for how flex items are positioned along the cross axis on the current line. Think of this as the justify-content equivalent of the cross-axis relative to flex items within a flex container.

You'll often reach for this property to make the flex items within a parent container all consistently aligned on a baseline or align to top/bottom.

- `stretch` (default): flex items stretch to fill the container (still respect min-width/max-width)
- `flex-start / start / self-start`: flex items are placed at the start of the cross axis.
- `flex-end / end / self-end`: flex items are placed at the end of the cross axis. 
- `center`: flex items are centered in the cross-axis
- `baseline`: flex items are aligned so their baselines align

### New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch. 

[![hello HTML css course](https://f001.backblazeb2.com/file/webcrunch/hellohtmlcss-promo.jpg)](https://hellohtmlcss.com)
Intro to CSS Flexbox - Flex Wrap
Tags: css, tutorial, beginners
Published: 2021-01-25 21:30:32

A flex container flexes its items with no overflow effects. The flex items within the parent flex container will always try to fit all items on one line by default. 

Flex wrap allows you to change that behavior by allowing the flex items to wrap as needed with this property. You can additionally control which direction they wrap which makes this property quite powerful! 

I tend to use flex-wrap almost always with responsive layouts as on small screens flex items will need to often collapse to their own width of the viewport. 


```css
/* flex-wrap options*/
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```

- `nowrap` (the default): all flex items will be on one line
- `wrap`: flex items wrap onto multiple lines (from top to bottom).
- `wrap-reverse`: flex item wrap onto multiple lines (from bottom to top).


#### CodePen

{% codepen https://codepen.io/webcrunchblog/pen/VwKBRJE %}


### New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch. 

[![hello HTML css course](https://f001.backblazeb2.com/file/webcrunch/hellohtmlcss-promo.jpg)](https://hellohtmlcss.com)
Intro to CSS Flexbox - Justify Content
Tags: css, beginners, tutorial
Published: 2021-01-25 21:27:52

{% youtube iTM97XEBvho %}

The [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) property automatically assigns space between and around flex items along the main-axis of a flex container. This property also works for grid-items much like flex items. 

There are a few properties you can tweak to allow content to shift dynamically inside a parent flex container. 

<br />
<br />

```css
justify-content: center;     /* Shift items around the center */
justify-content: flex-start; /* Shift flex items from the start */
justify-content: flex-end;   /* Shift flex items from the end */

/* Normal alignment */
justify-content: normal;


justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */
```

#### CodePen

{% codepen https://codepen.io/webcrunchblog/pen/XWjBQra %} 


### New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch. 

[![hello HTML css course](https://f001.backblazeb2.com/file/webcrunch/hellohtmlcss-promo.jpg)](https://hellohtmlcss.com)
Intro to CSS Flexbox - Flex Direction
Tags: css, tutorial, beginners
Published: 2021-01-25 21:25:32

{% youtube 5LocpadiK5o %} 

[Flex direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) establishes the axis all content within the parent flex container displays itself on.

Flexbox allows you to set a single-direction layout. The two directions can either be horizontal (row) or vertical (column). The default value of every container with `display: flex` defined is `flex-direction: row`.

<br />
<br />

```css
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
```

- `row (default)`: left to right in ltr; right to left in rtl
- `row-reverse`: right to left in ltr; left to right in rtl
- `column`: same as row but top to bottom
- `column-reverse`: same as row-reverse but bottom to top

View more guides by checkout out the [Intro to CSS Flexbox collection](https://web-crunch.com/collections/css-flexbox)

#### CodePen

{% codepen https://codepen.io/webcrunchblog/pen/WNGKmWv %}

### New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch. 

[![hello HTML css course](https://f001.backblazeb2.com/file/webcrunch/hellohtmlcss-promo.jpg)](https://hellohtmlcss.com)
Intro to CSS Flexbox - What is CSS flexbox?
Tags: css, beginners, tutorial
Published: 2021-01-25 21:21:47


{% youtube 0bh7Hgt2Uxs %}

Welcome to a new mini-series on CSS Flexbox. This series is designed to uncover what flexbox is and how to use it effectively for creating powerful CSS layouts and designs in your own websites and apps.

The Flexbox Layout (Flexible Box) module is responsible for providing a more efficient way to layout, align, and distribute space among items in a parent flex container. These items will resize dynamically thus allowing the experience of coding a CSS flexbox design to be almost automatic.

Flex layouts give the parent flex container the ability to alter its items’ width, height, and order to best fill the available space within that container. A flex container expands items to fill available free space or shrinks them based on additional CSS properties you can optionally pass. 

Flexbox is a kick-butt tool for mobile layouts as well since the dynamic side of it allows content to flex proportionally given any screen size. 

This guide is a quick precursor to more aspects of Flexbox I'll be covering in this series

## Really useful links for learning even more

- [CSS Tricks Comprehensive Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [MDN - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
- [What the flexbox? - Wes Bos](https://flexbox.io/)


### New to HTML + CSS? Check out my new course Hello HTML & CSS

Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch. 

[![hello HTML css course](https://f001.backblazeb2.com/file/webcrunch/hellohtmlcss-promo.jpg)](https://hellohtmlcss.com)
Promotion bots on dev.to
Tags: watercooler
Published: 2021-01-25 21:20:54

Have some "members" abused the good nature of this community for allowing "Read more"? I can constantly see generic names like jane doe, john, bill... posting parts of blog posts and putting Read More at the end of it. It's probably the same person but I just started tagging and reporting them. If anyone spots this feel free to flag to admins as it's clearly a some sort of promotion bot "phishing" users to it's own page.

Update: just for fun I followed the link. It looks like dev.to got a makeover (not necessarily in a good way). I think that it's basically a rip-off so maybe someone just took Forem, customized it and now trying to push users there. Some people just want to watch the world burn.
Sinatra Idea Board
Published: 2021-01-25 21:19:44

For my Sinatra project, I wanted to test myself and see if I can actually build off someone's tutorial and make it my own to an extent but fell short when my game post's content wouldn't show up in the show.erb for it. Frustrated and not figuring it out after 2 days I decided to abandon it and finish the almost complete project from my last try in my full-time cohort. I got it all working and it works nicely and I'm happy to have something to turn in and to be able to continue working to graduate from this program and get a dream job of mine.
How to generate even more code with Freezed
Tags: dart, flutter, codegen, freezed
Published: 2021-01-25 21:02:59

---
title: How to generate even more code with Freezed
published: true
description: Data classes, unions and less lines of code
tags: dart, flutter, codegen, freezed
cover_image: https://images.unsplash.com/photo-1516569422572-d9e0514b9598
---

> ⚠️ This article was deprecated. ⚠️
>
> Check out the updated full article on my personal [blog](https://marcossevilla.dev/freezed).

You can find even more and keep in contact with me on my socials:

- [GitHub](https://github.com/marcossevilla)
- [LinkedIn](https://www.linkedin.com/in/marcossevilla)
- [Twitch](https://www.twitch.tv/noscopedevs)
- [Twitter](https://twitter.com/MarcosJSevilla)
- [YouTube](https://www.youtube.com/noscopedevs)
Is going for Devise for user authentication a good choice for a first Rails app or should I write it from scratch?
Tags: help, discuss, watercooler, rails
Published: 2021-01-25 21:02:51

---
title: Is going for Devise for user authentication a good choice for a first Rails app or should I write it from scratch? 
published: true
description: Implement custom authentication or go for the Devise gem?
tags: help, discuss, watercooler, rails
//cover_image: https://direct_url_to_image.jpg
---

### Question

I am writing a Ruby on Rails application and started looking into adding user accounts so I can scope access of different parts of the application.

The Devise documentation [recommends that beginners start by setting up their own authentication before using the gem](https://github.com/heartcombo/devise#starting-with-rails).

Setting up custom authentication logic seems to be okay but what would be the trade-offs? And if I would like to move to Devise after a while would that be challenging or even worth doing?

Would appreciate to hear from more experienced RoR devs. 🙏

Thanks a lot! 

### What I've learned

Either option is feasible, it seems that going with a custom implementation allows more control over the authentication and authorization aspects of the app. It can a good way of learning about how these features work in general. The cons can be that it can be a complex aspect of the app that needs to be maintained and monitored to make exploits are fixed over time if any.

This is a great guide to get started creating an auth system in Rails:

{% link https://dev.to/levi/authentication-and-authorization-a-la-rails-bcrypt-1kn0 %}

Additionally, Chris Oliver's Ruby on Rails for Beginners covers this topic: [https://gorails.com/episodes/rails-for-beginners-part-11-creating-the-user-model](https://gorails.com/episodes/rails-for-beginners-part-11-creating-the-user-model)

Using Devise is an out of the box solution, everything needed for auth is already available including e-mail confirmation and password recovery. Since it's used and maintained by a large number of developers improvements are constantly being made and the gem is kept up to date which can make it more secure to use. On the other hand it can be a black box and its source and features is something that is known over time by using it and reading the code (which is not a bad thing).

A guide for getting started with Devise can be found here: [https://github.com/heartcombo/devise#getting-started](https://github.com/heartcombo/devise#getting-started)
Let's build for Ruby and Rails developers - Part 16
Tags: rails, ruby, video
Published: 2021-02-04 19:24:44

---
title: Let's build for Ruby and Rails developers - Part 16
published: true
date: 2021-01-25 21:02:11 UTC
tags: rails, ruby, video
canonical_url: https://web-crunch.com/posts/lets-build-for-ruby-and-rails-developers-part-16
---


{% youtube Lw6KJ0bqueA %}

In part 16 I continue integrating [Stripe](https://stripe.com) by tackling the backend side of the equation.

This part covers adding Stripe's new [Payment Intent API](https://stripe.com/docs/payments/payment-intents) to the app. This API returns a response for secure charges. Some payments require authentication and this is a way to ensure more secure payment pricing thanks to new regulations across Europe and likely coming soon everywhere else.

It works by first declaring information about the charge and submitting an intent to Stripe. From there that intent returns a response which includes an intent client secret key. That key can then be passed through to your client-side code to create a new charge and pass along any meta data you wish. More details of how this works is in the video.

In summary, it's a way to keep more secure things like pricing on the serverside of the equation so it can't be manipulated as easy.

After I integrate the checkout experience I continue to create a new job and return some JSON upon successful response. Each new job posting has a pending status by design. I'll use this as a means to review each new job listing transaction. I want the best quality jobs on this platform so I'm cool with this not being entirely automatic for now.

In the future I may explore subscription-based job listings but for now a one-time charge should suffice.

Follow the entire series here if you're just chiming in:  
[Let's Build for Ruby and Rails Developers](https://web-crunch.com/collections/lets-build-for-ruby-and-rails-developers)

### New to Ruby on Rails? I made a course for you.

[![Hello Rails](https://f001.backblazeb2.com/file/hellorails/hr-promo.jpg)](https://hellorails.io)

[Hello Rails](https://hellorails.io) is a modern course designed to help you start using and understanding Ruby on Rails fast.
How to convert a PDF page to an image using Nodejs
Tags: javascript, pdf, image
Published: 2021-01-25 20:55:15

Recently, I had to work on a project where I was required to get the the cover page of pdf being sent to the server on each request. It was quite challenging because there were not enough resources to learn how to automate this task. I found a package which helped me, so I decided to share with the community!.

### Project setup 

```
RootFolder --
            |-pdfFileFolder --
                             |-myFile.pdf
            |-pdfImageFolder
            |-converter.js
            |-package.json
```

### Install third party library
    
To effectively carry out this task, we need to install a third party library called [pdf-poppler](https://www.npmjs.com/package/pdf-poppler)

  ```
npm i pdf-poppler
```

### Code
copy the following line of code into the file labelled convert.js

```
import {default as pdfConverter} from 'pdf-poppler'
import path from 'path'

function convertImage(pdfPath) {
    
    let option = {
        format : 'jpeg',
        out_dir : 'C:\\Users\\user\\Desktop\\RootFolder\\pdfImageFolder',
        out_prefix : path.basename(pdfPath, path.extname(pdfPath)),
        page : 1
    }
// option.out_dir value is the path where the image will be saved

    pdfConverter.convert(pdfPath, option)
    .then(() => {
        console.log('file converted')
    })
    .catch(err => {
        console.log('an error has occurred in the pdf converter ' + err)
    })

}

export default convertImage
```
The **convertImage function** contains an argument which is the path to the PDF file to be converted to an image. This function with it's argument can be called in any file where needed.

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.
GOOD or BAD, idea....
Tags: react, graphql, mongodb, career
Published: 2021-01-25 20:47:41

SOOOOOOOO, 
to show a “portfolio” of what you know,
What if.......

I made up a restaurant, 
setup everything really nice,
Used obviously “NON COPYRIGHT” pictures, 
and made a
“fake” BUT FUNCTIONAL, website,
That I then have working comment “contact us”....

To then “show” the comments received for “when is the available”... type of inquiries?