teleren/devto huggingface dataset:
Images Larger than Container CSS
 
Tags: css, webdev
Published: 2019-09-24 11:51:59

This will center the image inside of a element when the elements height and/or width is smaller than the image. This works well when you have image assets of various aspect ratios that you want to display as thumbs that are the same size.

#### [demo](https://jimfrenette.com/code-editors/sandbox/images-larger "demo and edit this code in our online sandbox")

![Screen capture of demo](https://thepracticaldev.s3.amazonaws.com/i/tex9lz7beh7beo90n4gl.png)

##### HTML

```html
<ul class="thumbnails">
  <li>
    <img src="https://via.placeholder.com/400x300/9932CC/FFFFFF">
  </li>
  <li>
    <img src="https://via.placeholder.com/500x300/7FFFD4/000000">
  </li>
  <li>
    <img src="https://via.placeholder.com/300x200/87CEFA/000000">
  </li>
  <li>
    <img src="https://via.placeholder.com/300x400/F4A460/000000">
  </li>
</ul>
```

##### CSS

```css
ul.thumbnails {
  display: flex;
  flex-wrap: wrap;
}
ul.thumbnails li {
  height: 150px;
  border: 4px solid #FFF;
  overflow: hidden;
  position: relative;
  width: 150px;
}
ul.thumbnails li img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  width: 250px;
}
```

Originally published at [jimfrenette.com/css/images-larger-than-container](https://jimfrenette.com/css/images-larger-than-container/)
Weekly Cloud-Native Digest #13
Tags: cloud, news
Published: 2019-09-26 11:40:26

---
title: Weekly Cloud-Native Digest #13
published: true
tags: cloud,news
canonical_url: https://educosta.dev/blog/weekly-cloud-native-digest-13/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0ov6xhnzgga51ad9pkz7.jpg
---

Stay  up-to-date with what’s going on in cloud-native ecosystem. News,  tutorials and useful information on microservices, serverless, containers, kubernetes and more.

- [Using sagas to maintain data consistency in a microservice architecture](https://www.youtube.com/watch?v=YPbGW3Fnmbc&t=4s)
- [The Many Meanings of Event-Driven Architecture • Martin Fowler](https://www.youtube.com/watch?v=STKCRSUsyP0)
- [Free Ebook Optimal RabbitMQ Guide](https://www.cloudamqp.com/rabbitmq_book_success.html)
- [35 Microservices Interview Questions You Most Likely Can't Answer](https://dev.to/aershov24/35-microservices-interview-questions-you-most-likely-can-t-answer-2eoc)
- [Google Cloud – SSL Certificates the Easy Way](http://www.jhanley.com/google-cloud-ssl-certificates-the-easy-way/) 									
- [How to Set Up a Prometheus, Grafana and Alertmanager Monitoring Stack on DigitalOcean Kubernetes](https://dev.to/digitalocean/how-to-set-up-a-prometheus-grafana-and-alertmanager-monitoring-stack-on-digitalocean-kubernetes-268j) 									
- [How to Avoid Cost Pitfalls by Monitoring APIs in AWS Lambda](https://thenewstack.io/how-to-avoid-cost-pitfalls-by-monitoring-apis-in-aws-lambda/)
- [Learning the hard way: Microservices](https://itnext.io/microservices-c8b5dbdd58b8)
- [Managing data consistency in a microservice architecture using Sagas](https://youtu.be/cpdL73GsM5c) 			

The post [Weekly Cloud-Native Digest #13](https://educosta.dev/blog/weekly-cloud-native-digest-13/) appeared first on [Be Cloud Native](https://educosta.dev). If you have any doubts or questions feel free to drop a comment here or reach me out on Twitter [@educostadev](http://twitter.com/educostadev).
Ready To Use LinkedIn Clone Script
Tags: linkedinclone, linkedinclonescript, similartolinkedin, linkedinclonephp
Published: 2019-09-24 10:59:57

This LinkedIn Clone software script can help you to launch your own business networking website like LinkedIn. It will allow users to connect with millions of professionals around the globe. This clone is an interactional enterprise platform with social media network touch for professional job seekers, employees, freelancers and students.

 

User/Admin can register and login using their own credentials and manage their own account Members can post their feeds, images, video, document publically on their profile and connected groups. Responsive design. User friendly dashboard. Group management dashboard – Create Public, Private Groups, invite other members to join the group. Users can send public and private messages to others.

 

<b>LinkedIn Clone Features </b>

 

Our <a href="https://linkedin-clone.logicspice.com/">LinkedIn Clone</a> is a professional social network which provides the equivalent features as a Linkedin web and mobile app. Users can use the website properly to make a professional portfolio over it. The admin can manage accounts, pages, and users from the advanced dashboard.

User/Admin can register and login using their own credentials and manage their own account
Members can post their feeds, images, video, document publically on their profile and connected groups.
Responsive design.
User friendly dashboard.
Group management dashboard – Create Public, Private Groups, invite other members to join the group.
Users can send public and private messages to others.
What does our LinkedIn Clone Script offer you?

 

Logicspice offers the LinkedIn clone script , developed to build your own professional social networking website similar to LinkedIn. It will help you to receive quality website traffic, more signups, and active professional uses. Our clone is a social networking platform that helps users to connect with experts worldwide which will support to enhance their network and skills.

 

Our ready-made LinkedIn clone PHP script comes with updates and innovative features. We can easily post our jobs for people who are looking for jobs or internship projects. It is a cost-effective and less effort approach for those who are planning to develop a website like LinkedIn in a short time.

 

LinkedIn clone is the best option for startups, business organizations and entrepreneurs to start their own professional social networking platform. This LinkedIn Clone has been developed with WordPress framework. There are many ways to generate revenue from the LinkedIn clone.
Open Source Object Storage For All Of Your Data - Episode 99
Published: 2019-09-24 10:49:21

<p>Object storage is quickly becoming the unifying layer for data intensive applications and analytics. Modern, cloud oriented data warehouses and data lakes both rely on the durability and ease of use that it provides. S3 from Amazon has quickly become the de-facto API for interacting with this service, so the team at MinIO have built a production grade, easy to manage storage engine that replicates that interface. In this episode Anand Babu Periasamy shares the origin story for the MinIO platform, the myriad use cases that it supports, and the challenges that they have faced in replicating the functionality of S3. He also explains the technical implementation, innovative design, and broad vision for the project.</p><p><a href='https://www.dataengineeringpodcast.com/minio-object-storage-episode-99/'>Listen Now!</a></p>
Exploratory Data Analysis Made Easy At The Command Line
Published: 2019-09-24 10:48:04

<p>There are countless tools and libraries in Python for data scientists to perform powerful analyses, but they often have a setup cost that acts as a barrier to ad-hoc exploration of data. Visidata is a command line application that eliminates the friction involved with starting the discovery process. In this episode Saul Pwanson explains his motivation for creating it, why a terminal environment is a useful place for this work, and how you can use Visidata for your own work. If you have ever avoided looking at a data set because you couldn't be bothered with the boilerplate for a Jupyter notebook, then Visidata is the perfect addition to your toolbox.</p><p><a href='https://www.pythonpodcast.com/visidata-exploratory-data-analysis-episode-230/'>Listen Now!</a></p>
Learning about Developer tools for your iPhone by finding a bug at 4:30 AM.
Tags: codenewbie, beginners, debugging
Published: 2019-09-24 10:07:24

One beautiful morning at 4:35 AM I woke up and decided to check my twitter and found that there is a [Hypebae](https://hypebae.com/)! To be honest your girl is far from fasionable but I love looking at streetwear!  I am a huge fan of [Hypebeast](https://hypebeast.com/) which mainly focuses on contemporary men's streetwear but finally there is a sister site.  I was particularly interested because as I was scrolling through twitter I saw this awesome article on [Jasmyn Lawson and her Tech Journey](https://hypebae.com/2019/9/jasmyn-lawson-netflix-career-interview-strong-black-lead-editorial-brand-manager-giphy).  As a POC I love seeing black people achieve, I love seeing black women achieve, and even more so when it’s in tech!

So where am I going with this?  I found a bug while viewing the article on my ancient iPhone 6.  Hypebeast is known for their beautiful images of contemporary streetwear and it was particularly distracting to see the beautiful images by [Juan Veloz](http://www.juanveloz.com/) skewed.   Being an artist it is a pet peeve of mine to see art not represented as it was intended but as a coder I recognized it is a bug; not intentional but something to be fixed!

I decided to start by jumping on my computer and searching the developer tools on Google Chrome and Safari to inspect the image element.  Despite what I saw on my phone I could not replicate what I saw on my iPhone using the Chrome developer tools for iPhone 6/7/8. To be honest it looked perfectly fine but in reality this is what I was seeing;

![Screenshot of Hypebae article](https://thepracticaldev.s3.amazonaws.com/i/ausjtnjgiwwpm15o8rpz.PNG)

VERSUS

![Screenshot of desktop Chrome Developer Tools for iPhone 6/7/8](https://thepracticaldev.s3.amazonaws.com/i/4jxebvazxleuzx0cx2l3.png)

My question was how would I fix this?  How do I find this bug on my phone? Then I learned about how to use developer tools from an iPhone!  First I had to enable ‘Web Inspector’ on my iPhone settings which is located in the advance settings of Safari.  Then by connecting my phone to my laptop, I was able to go into Safari desktop application and click Develop in the tool bar and then scroll down to iPhone and select 'Use for Development.' Viola, I got exactly the answer I needed, the image was set to 700px x 500px.

![Screenshot of Developer Tools inspecting from iPhone 6](https://thepracticaldev.s3.amazonaws.com/i/ebif5nqfktbzjm1nong5.png)

As a code newbie I’m not sure how to go about fixing this (I'm guessing this is how contributing to open source works on github... you find a bug send a pull request etc?) but I just wanted to document this new developer tool I learn to use from this article. Also to say Hypebeast, if you see this show Jasmyn Lawson and Juan Veloz some love by fixing this bug.  The outfits and images are so fiya!!  Also shout out to the developers for their hard work, this is not easy!
Campus Employability Lab-Make Your College 100% Employable
Tags: javascript, career, employabilitylabs, campusplacementplan
Published: 2019-09-24 09:37:01

edWisor started Campus Employability Labs to end the problem of unemployability in the nation. Preparing students for job readiness and helping them find promising jobs. Helping colleges increase the placement rate. The core idea is to help students learn industry-centric skills and assist them in finding the right jobs.  read more:- https://cel.edwisor.com/
I have an idea for a new box game. What do you think about it?
Tags: discuss
Published: 2019-09-24 09:27:53

So here are the rules:

Use a standard set of [Rummikub](https://en.wikipedia.org/wiki/Rummikub) tile for this game.

Take out the Jokers and shuffle the tiles. 
Set the tiles face up in a square of 5 * 5, 7 * 7 or 9 * 9, depending on the difficulty level you want. Leave some margin around each tile.
(The remaining tiles are left out, facing down).

Two players sits on opposite sides of the square.
They start the game by taking one tile from the row closest to them.
Then they take one tile from the next row, either strait ahead, one to the left, or one to the right.
Both players plays simultaneously, so they should take the tiles as fast as they can.
When the first player takes the tile from his last row (which is the other player's first row), the game stops.

At this point, The players sums their tiles numeric values.
The player with the highest score wins the round.

Sample game play (7 * 7):																											

```
Player 1						
4	3	11	13	3	9	8
12	7	5	4	10	7	6
2	12	1	12	7	8	10
8	13	1	9	12	2	11
13	11	7	10	2	4	4
5	6	9	3	9	8	11
5	13	5	10	2	6	1
Player 2						

P1:	13
4	3	11		3	9	8
12	7	5	4	10	7	6
2	12	1	12	7	8	10
8	13	1	9	12	2	11
13	11	7	10	2	4	4
5	6	9	3	9	8	11
5		5	10	2	6	1
P2:	13

P1:	13, 10	
4	3	11		3	9	8
12	7	5	4		7	6
2	12	1	12	7	8	10
8	13	1	9	12	2	11
13	11	7	10	2	4	4
5		9	3	9	8	11
5		5	10	2	6	1
P2:	13,6

P1:	13, 10, 12	
4	3	11		3	9	8
12	7	5	4		7	6
2	12	1		7	8	10
8	13	1	9	12	2	11
	11	7	10	2	4	4
5		9	3	9	8	11
5		5	10	2	6	1
P2:	13,6, 13
```		

and so on...

**Optional rules** - Include the Joker (s):	
																															
Option 1.  When a player takes a joker, at the end of the round it's replaced by one of the left out tiles (without knowing what's the value of this tile).
																																
Option 2: When a player takes a joker, they can replace one of their tiles with one of the opponent's tiles. The joker doesn't carry score and can't be replaced.
This option means you have a really big advantage if you take a Joker - because you can replace your lowest tile with the opponent's highest tile.																																
																																
**Blind version** - play with the tiles up side down, so you can't see what cards you're taking. A combination of speed and pure dumb luck.																																

Another possibility: When the board is large enough, four players can play, each on every side of the square. 

So, would you play this game?
Any resources on SPA SEO?
Tags: javascript, spa
Published: 2019-09-24 09:09:12

Hi there! Can you please recommend me some reliable resources that help me understand (and defend if it's the case) the indexing and crawling of SPA by search engines?
I need to make a decision on what kind of app to make is SPA or MPA and the SEO is the most important aspect for marketing and against SPA...

Thanks a lot!
Slow
Published: 2019-09-24 09:04:51

I feel slow. Really slow. But I am motivated and willing :)
Now that i am no longer with my fellow students, I am trying to dig deeper in Javascript on my own.

This week I wanted to finish a project but a HTMLCollection got me down... But a voice in my head and heart goes: *Carry On and try again*

The internet is full of new stuff...
Ow yeah!!
Async/await?
Tags: async, await, multithreading
Published: 2019-09-24 09:04:35

---
title: Async/await?
published: true
description: 
tags: async, await, multi-threading
---

What if I told you that async/await is just managed multi-threading? Think about it. Thank me later.

Also, Node.js is multi-threaded it just runs your JS code in a single thread. (Except when you 'async', of course)

Don't look at me, they told us it was single-threaded.
Sizing Units in CSS: REM and EM
Tags: css, fontsize, cssunits
Published: 2019-09-24 08:42:12

CSS has different units for expressing length. Many units take a length property, such as: `font-size`, `padding`, `width` etc. There are two types of length units: absolute and relative.

This article focuses on two relative units: REM and EM. We discuss how the browser converts these into absolute units.

## REM to PX

The browser uses the root element's (`html`) font size as the multiplier when converting to pixels.

```css
html {
  font-size: 16px;
}

h1 {
  font-size: 1rem; 
}
```

In this example, the `font-size` of the `h1` will be `16px`.

The calculation the browser runs:

```bash
# root font size * property rem unit = px value
            16px * 1rem              = 16px
```

## EM to PX

The browser uses the `font-size` of the element that is being styled as the multiplier when converting to pixels. It will bubble up until it gets the first explicit font-size definition.

```css
html {
  font-size: 16px;
}

div {
  font-size: 22px;
}

div h1 {
  font-size: 2em
}
```

In this example, the `font-size` of the `h1` will be `44px`.

The calculation the browser runs:


```bash
# element font size * property em unit = px value
               22px * 2em              = 44px

```

In this scenario, the element font size is inherited from the parent `div`

It's important to remember that `font-size` inheritance will come into effect if no `font-size` is explicitly set. For `rem`, if there is no `font-size` explicitly set on the root element, it will inherit the value from the browser settings.
Passing Environment Variables with Sudo
Tags: linux, security, bash
Published: 2019-10-04 14:38:17

---
title: Passing Environment Variables with Sudo
published: true
tags: Linux, Security, Bash
canonical_url: https://www.petefreitag.com/item/877.cfm
---

Suppose you have a bash script that sets an environment variable, and then invokes something with sudo:

```
#!/bin/bash 

export MY_VAR=test 

sudo /do/something
```

You will find that the environment variable you set using `export` is not avaliable to the `/do/something` command.

When you run `sudo`, you are actually starting a new environment as the root user, so any environment variables that exist in your current shell will not exist in the new environment by default. There are two ways to get around this.

**Tell sudo to preserve environment**

The `sudo` has a handy argument `-E` or `--preserve-env` which will pass all your environment variables into the sudo environment.

**Passing only the variables you need**

A better approach is to just pass the environment variables you want to need to preserve, instead of passing everything. There are two ways to accomplish this, first you can supply a list of environment variable names to the `--preserve-env` argument. For example:

```
sudo --preserve-env=HOME /usr/bin/env
```

Finally you can also set environment variables directly in the `sudo` command, like this:

```
sudo ZEBRA=true /usr/bin/env
```

Note the `/usr/bin/env` command above simply echo's all the environment variables.
Kubernetes in Bitesize
Tags: kubernetes, beginners, news, productivity
Published: 2019-09-24 07:24:38

---
title:  Kubernetes in Bitesize
published: true
description: Kubernetes bitesize series for busy people. No more than 2 min read. Read it while waiting for the coffee to brew. 
tags: kubernetes, beginners, news, productivity
cover_image: https://github.com/adipola/my-posts/blob/master/pictures/kubernetes_sun_bitesize.gif?raw=true
series: Kubernetes in Bitesize
---

This is no joke that Kubernetes has a steep learning curve.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">the k8s learning &quot;curve&quot; <a href="https://t.co/H6ZFURb4w5">pic.twitter.com/H6ZFURb4w5</a></p>&mdash; I Am Devloper (@iamdevloper) <a href="https://twitter.com/iamdevloper/status/1176096620208893952?ref_src=twsrc%5Etfw">September 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Hence, everyone can benefit from some bitesize posts about Kubernetes.
Small steps are better than no steps, so relax and take it one step at a time.


<em> Kubernetes bitesize series is built for busy people.<em>


**No more than 2 min read.**



The main engine for the content is:
> Kubernetes frequently asked interviews questions



You are welcome to write me content requests, questions, interview questions and I will be more than happy to help and support!

Follow me **here** and on [twitter](https://twitter.com/AdiPolak) for updates. 
Let's demystify Kubernetes once and for all !

![](https://media.giphy.com/media/IPbS5R4fSUl5S/giphy.gif)
What is the most annoying thing your colleagues say all the time?
Tags: discuss, rant, collaboration, humor
Published: 2019-09-24 07:14:21

---
title: What is the most annoying thing your colleagues say all the time?
published: true
cover_image: https://media.giphy.com/media/q48v3Gr5m9Jp6/giphy.gif
description: vocal mannerism and other speech patterns that can drive you crazy at work
tags: #discuss, #rant, #collaboration, #humor
---

Is there something that you hear all the time in office, at the watercooler or in meetings that really gets on your nerves or is simply "funnily" annoying? 
Speech patterns, vocal mannerism, grammar or pronunciation mistakes, trendy words, anything.

For example:

* **Low hanging fruit** - being said over and over again by project managers
* **You was**  - being said by some Russian colleagues 
* **Ähm** - filler word used all the time by - um/ehm - every single german ( my kids now use both: Italian _mmm_ and German _ähm_... :-))
* **super** - as an answer to basically everything, or t spice up every adjective good or bad (super annoying, super exiciting - that was super!)

![It's a no brainer](https://media.giphy.com/media/l4pTosVr0iHCJ11hm/giphy.gif)

But that is nothing. What drives me really mad is when colleagues say all the time **"simply"** and **"just"**.

It could be a slightly brown nosy wannabe lead trying to please the upper levels by being condescending and saying 
> sure we can do that - It´s just a UI form, Easy!

even though all other people in the team stated that that task should not be underestimated in its complexity.

or it could be a junior dev "lying" during standups by saying:

> I am *almost done*, I _just_ need to apply some final touches but it should be _simple_ and quick

 while you know - because he asked for help - or you are reviewing the WorkInProgess MR - that he is faaar from done.

or a junior or senior - doesn't matter - developer that during an estimate meeting / [planning poker](https://dev.to/dvddpl/do-you-play-planning-poker-4f9f), say :
> Oh that should be simple, definitely, an S ticket, couple of days, tops!
 
when they really have NO clue what they are talking about  (a clear case of [Dunning Krueger Effect](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect) )

I will come back later on with a post about "lying at standups or underestimating task", for now, I am just curious about what you hear and hate the most and what you do when it happens. 

![Make it stop!](https://media.giphy.com/media/kGX3WmRxZ9HUs/giphy.gif)
module.exports v/s exports - Clearing the confusion
Tags: javascript, node, explainlikeimfive
Published: 2019-09-24 07:03:31

If you are one of those developers who spends majority of their time writing code in Node & Express, you might understand what I am talking about.

It's all well and good, you have written your code and now you want to use it in another file. You use module.exports this time and it works like a charm.

Next time around, you see an example wherein the "exports" variable is being used to do the same and you follow it. Works well this time too. 

But then, once in a while, you try to assign something to the exports global that you are trying to export out of the file and it does not seem to work and you are now confused. This video tries to clear some of that confusion:

https://www.youtube.com/watch?v=Bj1v1Yfg5TU