teleren/devto huggingface dataset:
slick.jsで作成したスライダー読み込み時のレイアウトずれ対策
Tags: css, seo, slickjs, carousel
Published: 2021-03-18 05:42:13

トップページなどによく見られるスライダー（カルーセルパネル）は、画像が読み込まれるまで高さが計算できず、コアウェブバイタルのContent Layout Shift (CLS)に影響を与えます。

今回はよく使用されるスライダーのライブラリであるslick.jsでこの問題に対応する方法をご紹介します。

例として以下のようなスライダーのHTMLを考えます。

```html
<ul class="slider">
  <li>
    <img src="/image1" />
  </li>
  <li>
    <img src="/image2" />
  </li>
  <li>
    <img src="/image3" />
  </li>
</ul>
```

`li`タグのに設定した画像をスライダーで表示する簡単なHTMLです。

まずCLSの対策では画像に対して`width`および`height`属性を指定することが重要です。
これらを指定することで画像の縦横比を予め計算でき、画像が表示される箇所に同等のサイズのスペースを確保しておくことができます。これによりユーザーの意図しないレイアウトのズレが解決できます。

```html
<ul class="slider">
  <li>
    <!-- サイズを指定 -->
    <img src="/image1" width="1000" height="400" />
  </li>
  <li>
    <img src="/image2" width="1000" height="400" />
  </li>
  <li>
    <img src="/image3" width="1000" height="400" />
  </li>
</ul>
```

ただしslick.jsを使用している場合、スクリプトの読み込みが完了するまでは全ての画像が表示されるため、余計なスペースが確保されてしまいます。
更にスクリプトが読み込まれると１つ目以外の画像が非表示になるため、ユーザーの意図しないレイアウトのズレが発生してしまいます。

これを解決するために、以下のスタイルを当てます。

```css
ul.slider > li:not(:first-child) {
    display: none;
}
```

これは1つ目以外の画像を予め非表示にしておくスタイルです。

これではスクリプト読み込み後でも2つ目以降の画像が表示されないままなのでは？と思うかもしれませんが、slider.jsではスライダーを作成する際に`ul`タグと`li`タグの間に`div`タグを挟み込みます。
上記のスタイルでは`ul`タグの**直下の**`li`タグに対してスタイルを当てているため、スクリプト読み込み後はセレクターの対象から外れ、スライダーに画像が表示されるようになります。

これにより、スクリプト読み込み前は1つ目の画像のスペースだけが確保され、読み込み語は1つ目の画像のみが表示されるため、レイアウトのズレが発生しなくなります。

## 参考
- [Javascript sliders will kill your website performance | by Javier Villanueva | ITNEXT](https://itnext.io/javascript-sliders-will-kill-your-website-performance-5e4925570e2b)
Blockchain described
Tags: blockchain, distributed, bitcoin, network
Published: 2021-03-18 10:22:54

---
title: Blockchain described
published: true
date: 2021-03-18 05:40:27 UTC
tags: blockchain,distributed,bitcoin,network
canonical_url: https://medium.com/coinmonks/blockchain-described-d8053599f25d
---

[![](https://cdn-images-1.medium.com/max/1200/0*1n6m5lzgrwVsy0d-.jpg)](https://medium.com/coinmonks/blockchain-described-d8053599f25d?source=rss----721b17443fd5---4)

Definition of blockchain

[Continue reading on Coinmonks »](https://medium.com/coinmonks/blockchain-described-d8053599f25d?source=rss----721b17443fd5---4)
Setup AWS S3 Buckets to Host Your Django Static Files
Tags: aws, python, django, cloudskills
Published: 2021-03-18 05:34:49

# Setup AWS S3 Buckets to Host Your Django Static Files

When thinking about deploying your static files for your Django Web Application, there are a few options to choose from:
* Amazon S3
* Apache Liquid
* Azure Storage
* Digital Ocean
* Dropbox
* FTP
* Google Cloud Storage
* SFTP

### Today we will be looking at Amazon S3 and how to configure it to be ready to host your Static Files from Django.

First you will have to go create an AWS account, you can signup for the free tier account and it is a great place to start playing around and testing out your solutions. You will be asked to provide a credit card but you will not be charged until you have used up the free tier resources, so have a look at your billing dashboard and keep an eye out that your usage does not reach your free tier limit.

Once you are registered and logged into your AWS management console, go to the very top and type in S3 and select the first option, this will take you to the S3 service.

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

You can click on create a bucket, which will take you to the configuration page. From here:
* Choose a name for your bucket, this name will have to be unique so you might have to try a few options.
* Select your region you want your S3 bucket to be hosted in.
* Uncheck the option that states, Block all public access.
* The rest we can leave at defaults for now.

Now our Bucket is created but will still not be able to work fully with our Django app. We have to create a bucket policy first to allow a public read and getObject to our S3 bucket.

Now click on you bucket name and then navigate to the permission tab.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ah38h2r3582xig8lg8xa.JPG)

Once there you can scroll down and edit the bucket policy with the following:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2t4tuhg99j9gyzm4d4r.JPG)

Save your configuration and now at the top under your bucket name you will see that it states Publicly accessible in red, which means now we are able to access that content in the bucket outside of our AWS environment, which means our Django app will now be able to read the objects within our buckets.
How to find my public IP?
Tags: ipaddress
Published: 2021-03-18 05:19:49

Hello all, This is my first post. 

At times in order to gain access(say SSH) to the AWS EC2 instance, I need to specify a proper rule in the AWS SG(Security group) attached to the AWS account. This rule can't be wide open to all and hence need to be specific because of the IT security policies at my company. 

For which I am interested to know my public IP, which is the IP address assigned by my internet service provider to that interface which is public facing in my router. 

One of the easiest way to know that is to open the terminal and execute `curl ipinfo.io` 

```
~ » curl ipinfo.io                                                                                                                                                                                                                  wmohamma@PEM-WMOHAMMA-01
{
  "ip": "28.34.157.23",
  "hostname": "c-24-4-158-230.hsd1.cy.xyz.net",
  "city": "Los Angeles",
  "region": "California",
  "country": "US",
  "loc": "381.3396,-162.011",
  "org": "AS1351 xyz",
  "postal": "96742",
  "timezone": "America/Los_Angeles",
  "readme": "https://ipinfo.io/missingauth"
}% 
```

Peace !!
Learn Dynamic Programming Basics for Coding Interviews
Tags: dynamicprgramming, codinginterviews, technicalinterview
Published: 2021-03-18 05:17:26

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

https://cutt.ly/zz5QZEv
Remote Data positions & career - 2021
Tags: remote, datascience, hiring
Published: 2021-03-18 05:12:58

Companies hiring data engineers, entry level data analysts with possibility for Remote & Work from Home

**Caroo**  - Remote
Experience the award-winning healthy snack delivery service that creates happier, healthier, &amp; more productive people. Get a free snack box today!

Jobs 👉 https://www.arbeitnow.com/companies/caroo

**Carto**  - Madrid, Spain
The future of GIS? It's Spatial Data Science. CARTO is the world's leading Location Intelligence platform for Data Scientists, Developers and Analysts in Enterprise.

Jobs 👉 https://www.arbeitnow.com/companies/carto

**Bright Cellars**  - Remote
Bright Cellars is the monthly wine club that matches you with wine that you'll love.

Jobs 👉 https://www.arbeitnow.com/companies/bright-cellars

**Elevate Labs**  - San Francisco, CA
Elevate is a brain training app designed to improve focus, speaking skills, processing speed, and more. Each person gets a personalized training program.

Jobs 👉 https://www.arbeitnow.com/companies/elevate-labs

**Gametime**  - Remote
At Gametime, we revel in life’s impromptu moments — like cheering on your hometown team at a Friday night baseball game or dancing the night away at an intimate concert. So, we built a ticket marketplace that makes it faster and easier to get into your favorite events at a moment’s notice.

Jobs 👉 https://www.arbeitnow.com/companies/gametime
Get locked out of 2 factor authentication of github
Tags: github, git, authentication, login
Published: 2021-03-18 05:08:48

I get locked out of github 2 factor authentication of github. I know my username and password. My country isn't listed in github messaging region. so i have to use other app like 'Authy' to get 2fa code. When i reinstall 'Authy' app i cant find the github acc that was connected in github. i also lost the recovery code that github has given me at the time of enabling 2fa.

So, as matter of fact i requested github to cancel my 2fa and i got the email that they will take 3-5 business days but it been 10 days. i haven't heard anything from github. i really need to access my github acc. anyone of you have faced this issue previously?
Check if a jpg/jpeg image is corrupt with Pillow
Tags: python, pillow
Published: 2021-03-18 05:00:18

---
title: Check if a jpg/jpeg image is corrupt with Pillow
published: true
description: 
tags: python, pillow
//cover_image: https://direct_url_to_image.jpg
---
Here is a short code example to check if a jpg/jpeg have their ending bytes or if the file is incomplete or corrupt.

```python
from PIL import Image

def verify_jpeg_image(file_path):
    try:
        img = Image.open(file_path)
        img.getdata()[0]
    except OSError:
        return False
    return True
```

I have seen solutions using scikit-image, but if you don't need scikit-image to do anything else, you can go for the library that scikit-image uses instead. This way you get fewer dependencies.
Needing Rust, Substrate, Java for well funded Crypto Projects - Remote
Published: 2021-03-18 04:35:48

Hi all, 
I know you all hate me already but hear me out.

These companies are early stage - it's not for everyone but just like buying an alt coin in crypto it means the upside is effectively unlimited. Think Binance employees who got paid in BNB. Their mid level employees would be millionaires by now.

Reach out if you'd like to chat.
Please refactor your code.
Tags: javascript, webdev
Published: 2021-03-18 03:40:09

Try to refactor your code whenever you get time.

This is a very small post(actually my linkedin post) but very helpful.

If you don't have the habbit of refactoring your code, try now, this is going to be the best experience and learning for you.

How code refactoring would help???

1. You will realize that there are some pieces in your code which are not at all being used. Now you can delete them. This gives immense pleasure 😅.

2. You can apply your newly learned things. For me, I was never confident in object destructuring in javascript but in refactoring the code, I applied my learning and became more confident like giving initial value, renaming in destructing. 

3. As your code gets better and better and now that you have gone through it many times, you can now explain it to anybody about your project and how you did it. Most of the times, we are not able to explain our code just bcoz we left it after we realized that it's doing the required job and never cared to refactor it.

Doesn't matter if project is big or small, you need to refactor it now.

Let me know your thoughts in the comments.

That's it, have a good day dev 😊.
Lux Frontend Bootcamp
Tags: webdev, beginners, react, javascript
Published: 2021-03-18 03:25:01

<h3> Bio </h3>
My name is Joshua Wairua from Kenya. I am an undergrad student at Kenyatta University pursuing a BSc. Mathematics and Computer Science. Web Development is one of the units that I have done in this course, and I enjoyed it. 

<h3> Why Web Development </h3>
It is web development that drew me to pursue this course. Web development is interesting to me because of the integral part that websites play in technology. For instance, this article was posted on a website, and anyone across the universe, even aliens with alien technology 👽 😄, can read this. 

<h3> So Far so Good </h3>
In high school, I fancied the idea of coding, especially when I saw my neighbor ‘programming’ as we called it. Web development has been an entry point for me to the world of programming. So far, I am pleased that I can create a static website using HTML and CSS. I know a bit of the JavaScript fundamentals, but I would love to know how to use it on websites. The React framework has also tickled my interests, and I am looking forward to learning it in the Lux Frontend Bootcamp. 

<h3> Looking Forward </h3>
I understand that there is a whole universe to explore regarding web development, and I am willing to pursue it to where the adventure leads. My web development journey is just beginning, but I hope that I will endure and enjoy the obstacles and experiences that come with it. I appreciate <a href="https://ke.linkedin.com/company/lux-tech-academy">Lux Tech Academy </a> for being a guide in this adventure.
CSS Grid Layout
Tags: css
Published: 2021-03-18 02:53:39

CSS Grid Layout (Grid) is defined as a two-dimensional layout system that was designed to completely change the way we design grid-based user interfaces. Grid is the very first CSS module! Basically, Grid is a grid-based layout system, with rows and columns, making web page design easier than traditional ways.

Terminology for Grid can get a bit confusing at first but after working with it a few times you can pick it up pretty quickly. 

Below is some basic terminology for Grid:

**Grid Container:**
The Grid container is an element on which display: grid is applied. The Grid Container is the parent of Grid Items.

**Grid Item:**
Grid Items are children of the grid container. 

**Grid Line:** 
Grid Lines are separating lines that make up the structure of the Grid. Grid Lines can be vertical or horizontal. Vertical lines are called “column grid lines”, and horizontal lines are called “row grid lines”. 

**Grid Cell:**
A Grid Cell is the space between four intersecting grid lines and conceptually much like a table cell.

**Grid Track:**
A Grid track is a space between two adjacent grid lines. You can think of them as the columns or rows of the Grid. 

**Grid Area:**
The Grid Area is the space created/surrounded by four grid lines. A grid area may be composed of any number of grid cells.

**The difference from Flexbox:**
As you may remember in the beginning of this blog post I had mentioned that Grid was designed for a two-dimensional layout - rows, and columns at the same time. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Flexbox and Grid share some common features but each have different use cases.

All of these terms together make up a high level overview of the CSS Grid Layout! I hope you learned a little, I’d recommend doing a small project using Grid in order to get a full grasp of how powerful it is. Thanks for stopping by!
Receive message request via Whatsapp with webhook
Tags: node, whatsapp
Published: 2021-03-18 02:13:18

I'm new to software development and I'm being beaten to solve the problem below :-(

I need to create a webhook to respond to a request coming from Whatsapp, the first time I'm making this response and I'm taking a beating to receive this data.

I created the webhook route on the server pointing to my computer, and I'm using ngrok to test it.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paf7npchm3dyfjnsau49.png)
 
Doing a request using get the controller responds

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxl5ks9vfdmam5s6qsqr.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mizp8i6s369si28ivbul.png)

I have some doubts about to receive the data from Whatsapp.

Which verbose do I use to get the data from Whatsapp?

How can I get these data?
VS-CODE : PHP파일내 HTML코드 자동 정렬 확장프로그램
Published: 2021-03-18 02:00:42

VS-CODE를 이용하여 PHP코딩을 할 때 유용합니다.

#Format HTML in PHP
확장프로그램 탭에서 Format HTML in PHP를 검색하여 설치하면 됩니다.

그누보드5나 영카트5를 작업할 때 PHP내 HTML코드가 섞여 있는 경우가 많은데 이 확장프로그램을 이용하면 자동 정렬하기가 편합니다.

![Format HTML in PHP](https://github.com/RiFi2k/format-html-in-php/blob/master/format-html-in-php.gif?raw=true)

웹사이트에서 확인하려면,

[Visual Studio Code>Programming Languages>Format HTML in PHP](https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php)

[VS-CODE강좌](https://365ok.co.kr/tj/vscode)
How to check if two objects are equal in JavaScript?
Tags: javascript
Published: 2021-03-18 00:00:00

---
  title: How to check if two objects are equal in JavaScript?
  published: true
  tags: JavaScript
  date: Thu Mar 18 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-two-objects-are-equal-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-94ac47fbf2f854e523c77ba059bfadfd.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-two-objects-are-equal-javascript)
  
To check if two objects are equal, you can first make both the objects into a JSON string using the `JSON.stringify()` method and then check to see if the string representation of both the objects is equal in JavaScript.

For example, let's say we have 2 objects with a property called `name` and value of `John Doe` like this,

```js
// 2 objects with same the property and values
const obj1 = { name: "John Doe" };
const obj2 = { name: "John Doe" };

// Check if 2 objects are equal using
// the JSON.stringify() method
JSON.stringify(obj1) === JSON.stringify(obj2); // true
```

- The above expression will return boolean `true` since the string representation of objects is equal and we can infer that objects are also equal.

- Using `JSON.stringify()` method is a fast approach.

See the above code live in [JSBin](https://jsbin.com/menomucebi/2/edit?js,console).

### Caveat: We can only use this method for simple JSON representative objects and other complex objects with many nested methods and DOM nodes may not work as expected.

### Feel free to share if you found this useful 😃.

---
How to Debug Key Mappings in Vim
Tags: true
Published: 2021-06-04 12:11:26

---
title: How to Debug Key Mappings in Vim
published: true
date: 2021-03-18 00:00:00 UTC
tags: true
canonical_url: https://tech.serhatteker.com/post/2021-02/debug-key-mappings-vim/
---

Sometimes my mapping not working since overridden by *plug-in* or I forget a mapping and want to select from all my mappings list.


## All List

If you want to get all your key mappings run:

```vim
:map <key>
```

## Specific Key

If you only want to know specific key(s) run:

```vim
:map <key>
```

Like examples below:

```vim
:map <leader>f
:map H
:map <F8>
```

## Verbose Mode - Show Overridden

If you can't use your mapping and want to know what overrides it just run with
`verbose`:

```vim
:verbose map <key>
```

This will show **all** configs that uses given mapping in a list and **last
set** location:

![vim mapping](https://tech.serhatteker.com/img/content/2021/vim-mapping.png)


Also it is possible to use `:map` with `visual`, `normal`, `insert` etc. as
well:

```vim
:vmap rn
:nmap rn
:imap rn
```


All done!
Two models of DevOps
Tags: devops
Published: 2021-03-18 19:53:41

---
title: Two models of DevOps
published: true
date: 2021-03-18 00:00:00 UTC
tags: devops
canonical_url: https://jhall.io/archive/2021/03/18/two-models-of-devops/
---

I’m frequently asked about the ideal team structure for DevOps. A common sentiment suggests that the only “proper” way to do DevOps is by having developers and operations people on the same team. Otherwise, the thinking goes, you have the old dev and ops separation that DevOps is specifically intended to eliminate.

While this comes from a good place, it’s not actually the only valid way to do DevOps. Let me offer two models for successful DevOps. These are not meant to be taken too rigidly. I’ve seen both work successfully within the same organization, sometimes transitioning from one to the other, or sometimes employing both simultaneously.

Let’s remember that a core goal of DevOps is cooperation between Dev and Ops. Specifically, in some traditional teams, development’s goal is faster change, and operation’s goal is stability (i.e. no change); DevOps seeks to align these teams with a shared goal.

1. **The combined DevOps team**

    This is the model I eluded to above, and is the model most likely to be considered the “only” model by hard-core “cross-functional” advocates. A common approach is to have an Operations Engineer embedded on each development team. This Ops engineer may (or may not) be part of a larger Operations team, tribe or guild, with other operations engineers in the organization.

    This approach seeks a shared goal by virtue of Devs and Ops being on the same team, with the same team objectives.

2. **The Operations-as-a-service team**

    Another approach to DevOps is to keep Operations Engineers on their own team, but with a redefined purpose. In this model, the Operations team exists primarily to serve the development organization by providing the tools that allow developers to deploy and manage their own services.

    In this model, the responsibility for application stability is shifted from Ops (where it puts Devs and Ops at odds with each other), back to the Dev team. If the Dev team ships unstable code to production, it’s no longer the Ops team’s responsibility to bail them out. The Ops team’s responsibility is simply to give Devs the minimal operations platform necessary for Dev to do their own debugging and service restoration.
How to submit an array using a Rails form
Tags: rails, ruby, html
Published: 2021-03-17 23:49:13

*This article was originally posted on [my blog](https://binarysolo.chapter24.blog/how-to-submit-an-array-using-a-rails-form/).*

Sometimes an array of data needs to be submitted in an HTML form. A form to send invites to a bunch of users for example. That'd just be a series of email fields; and in the controller; we'd want an array of the emails to iterate over and send invites.  
  
Rails form helpers are set up to have a key and value for each field, so it's not immediately obvious how to send an array of data. But in Rails, there's always a way!  
  
If we append `[]` to the `name` of a field, it'll be parsed as an array! So for an array of emails to send invites; setting&nbsp;`name` as `invites[]` on all the email fields and gives us an array in the controller.  
  
To generate the form, we can use the following code:  
  

```erb
<%= form_with(scope: :invites, url: invite_path) do |form| %>
  <% 3.times do %> 
    <!-- id has to be nil to prevent clashes as all fields would have the same id -->
    <%= form.email_field nil, id: nil, placeholder: "Email Address" %> 
  <% end %>
  <%= form.submit %>
<% end %>
```

  
Passing `nil` as the first argument to `email_field` instead of a name gives us the `[]` we need for an array. The generated markup looks like:  
  

```html
<form action="/invite" accept-charset="UTF-8" data-remote="true" method="post">
  <input type="hidden" name="authenticity_token" value="....">    
  <input placeholder="Email Address" type="email" name="invites[]">
  <input placeholder="Email Address" type="email" name="invites[]"> 
  <input placeholder="Email Address" type="email" name="invites[]"> 
  <input type="submit" name="commit" value="Save Invites" data-disable-with="Save Invites">
</form>
```

  
On the controller, we can use the submitted data as:  
  

```ruby
def create 
  invited_users = params.require(:invites) 

  p invited_users 
  # => ["a@example.com", "b@example.com", "c@example.com"]
end
```

  
To permit an array parameter in a nested form field, we can use the following pattern:  
  

```ruby
params.require(:product).permit(tags: [])
```

It's a little unintuitive but submitting arrays from a form can be a useful tool in your toolbox!