teleren/devto huggingface dataset:
Day 17 - Hover Overlay
Tags: codenewbie, beginners, css
Published: 2020-10-02 12:21:31

I spent the last three days redesigning my portfolio site and one of the things that took a long time was deciding on a simplified way to display my project details. I chose to create a hover overlay to display the details for each project.

![hover gif](https://media.giphy.com/media/O5nqgrAcEYuMgyx2x7/giphy.gif)

### Set Up

We need to start with the following:
- Div container to hover over 
- Div container for overlay
- Div container for text

Then we add elements we need for our final component. My [example](https://codepen.io/josno/pen/WNwqPpm) is a component for an image link for an apple pie recipe.

![Set Up](https://dev-to-uploads.s3.amazonaws.com/i/amzmq8yaunw2sklc7e73.png)

With some initial CSS I have the following:
![initial styles](https://dev-to-uploads.s3.amazonaws.com/i/t7lcsn9mdgn03ld3l8mt.png)

### Positioning
The overlay is about positioning the elements against the parent element. 

In this example, we do the following: 
- Set parent div (main-container) to relative position
- Set child div (overlay-container) to absolute position
- Set box sizing to border-box (takes manual calculation out of the equation)
- Set child divs to 100% of parent width
- Set flex styles on overlay-component so the text can sit at the bottom
- We also set the height of overlay-component to 100% so when someone hovers over the entire box it will trigger the effect

![Overlay set up](https://dev-to-uploads.s3.amazonaws.com/i/19sk2k9owpjy62756c5t.png)

### Setting Up The Text And Dark Background

For the dark background we set a transparent background. We will use opacity when we adjust the opacity during hover. We also make the text color white.

![Text Dark](https://dev-to-uploads.s3.amazonaws.com/i/s0zf0r4183odepu5uwcv.png)
<figcaption> You can also set the height here</figcaption>

### Creating The Hover Effect
Set an opacity of 0 to the overlay-component, then in the hover property, we set the opacity to 1 to show the dark background and text.

![hover code](https://dev-to-uploads.s3.amazonaws.com/i/fgc7vf2179pufv8zb8pu.png)
<figcaption>Since the text container is a child of the overlay component, the opacity rules will also apply</figcaption>

### Make It Fancy! 

I added a transition property to make a sliding effect. See the complete code [here](https://codepen.io/josno/pen/WNwqPpm).


## What I Learned

More practice with building animation hover effects.

## How This Will Help Me

Having the ability to create this component from memory adds to my toolkit!

Onto the next challenge!
I review my old Git commit messages 🤦‍♂️
Tags: beginners, codenewbie, git, github
Published: 2020-10-03 22:59:55

---
title: I review my old Git commit messages 🤦‍♂️
description: I dig deep into my GitHub account and evaluate some of my old Git commit messages. Learn from my mistakes to start writing better commit messages. Your colleagues will love you, and you'll immediately become the life of every party (once parties are a thing people do again).
published: true
date: 2020-10-02 12:21:00 UTC
tags: beginners,codenewbie,git,github
canonical_url: https://raddevon.com/articles/i-review-my-old-git-commit-messages/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fgge4ezfczrqql9rdy6l.jpg
---
<table><tr><td>
**Before you start…**

If you don't even know Git yet, let alone how to write good commit messages, check out these videos to learn the basics:

*   [Learn Git and Github Part 1](https://raddevon.com/articles/learn-version-control-with-git-and-github-part-1/)
*   [Learn Git and Github Part 2](https://raddevon.com/articles/learn-version-control-with-git-and-github-part-2/)</table></tr></td>

I dig deep into my GitHub account and evaluate some of my commit messages. **Learn from my mistakes** to start writing better commit messages. Your colleagues will love you, and you’ll immediately become the life of every party (once parties are a thing people do again). 🎉

{% youtube HJYY3NtQIus %}

The criteria I used to evaluate these come from an excellent article by Chris Beam called [_How to Write a Git Commit Message_](https://chris.beams.io/posts/git-commit/).

Here are Chris’s 7 tips:

1.  **Separate subject from body** with a blank line
2.  Limit the subject line to **50 characters**
3.  **Capitalize** the subject line
4.  **Do not end the subject line with a period**
5.  Use the **imperative mood** in the subject line
6.  Wrap the body at **72 characters**
7.  Use the body to explain **what and why** vs. how

Now that you know how to write an incredible commit message, you just need some commits to test out your new skills on. [Grab my project starter kit](https://raddevon.com/articles/10-great-web-development-learning-project-ideas/) to get up and running on a project. Start making those commits!
Daily Developer Jokes - Friday, Oct 2, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-10-02 12:00:27

---
title: "Daily Developer Jokes - Friday, Oct 2, 2020"
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%20Oct%202%2C%202020"
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/5e1259a37a785.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:
A new database query walks into a bar.

The server says "Sorry, cache only."
 -->
CDN and TypeScript support (also JavaScript typing for IDE)
Tags: typescript, webdev, discuss, javascript
Published: 2020-10-02 11:31:48

This is quite easy. You will need `cdn.d.ts`, but you will also need to install the module in `package.json`, (or at least `@types/`), no matter what.

```ts
declare module 'https://cdn.skypack.dev/js-yaml@*' {
  export * from 'js-yaml'
}
```

Also, I am consider if `cdn.d.ts` file can be generated programmatically? (Next.js also generate typings for CSS modules on the fly.)

It would be nice if I can use Deno for Skypack CDN, but it seems that it does not have web-browser-related typings.

Or, do have have a better way?
Introduction
Tags: sn00pycode, indonesia
Published: 2020-10-02 11:13:15

Halo perkenalkan saya Mohamad Achun Armando seorang mahasiswa IT di suatu kampus di Indonesia, ini merupakan post pertama saya di Dev.to, tujuan pertama saya post disini adalah untuk membagikan hal yang sudah saya pernah pelajari supaya suatu saat nanti saya dapat membacanya kembali dan harapannya bermanfaat juga bagi orang banyak. Semua post saya selalu menggunakan tag #sn00pycode supaya mudah dicari.

Sebagai penutup sama seperti halnya manusia pada umumnya yang tak luput akan kesalahan maka dari itu saya terbuka atas diskusi saran dan masukannya terkait apa yang saya tulis disini. Terima kasih
I contributed to open source for the first time!
Tags: watercooler, hacktoberfest
Published: 2020-10-02 11:08:18

Hi everyone,

I'm over the moon, I did my first open-source contributions and already had PRs merged!

This made me confident and took on a bigger project for today, where I actually made a whole new function for a random generator.

How is your hacktoberfest going?
GitLab has Blocked Iran!
Tags: discuss, webdev, opensource, github
Published: 2020-10-02 11:03:35

Today When I tried to __Sign in__ into my __GitLab__ account I faced this page :

Look at this :(

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/39u6pa8qjbx6h72zxqmf.png)<figcaption>What's the reason?</figcaption>

Just give me a reason to accept this problem :(
There's a lot of Iranian developers and so many open-source projects ...

Thanks, GitLab and GitHub, and the open-source community to do all your best, effort, and hard work for the developers all around the world to make things easier EXCEPT IRAN(Make it hard for Iranian developers)! 
##🅑🅐🅝🅙🅘

[Ben](https://dev.to/ben)
How I cut down my local build time to half.

Tags: devops, android, npm, javascript
Published: 2020-10-02 10:48:04

Hi,
I used to work in Microsoft Teams and the build time over there used to take about 25 minutes. It was big sync for developers' productivity.
I tried various optimizations in my local build by tuning various parameters in the package.json and changing the task runner from npm to yarn.

The most speed up I got was compiling my code on a powerful cloud instance. It cut the compile time of my code to half.
Check out this amazing tool https://stormyapp.com
It will help you reduce the compile time.
Key Business Benefits of Cross-platform Apps You Need to Know
Tags: flutter, android, mobileapp, ios
Published: 2020-10-02 10:45:56

 Globally, many entrepreneurs and business persons have embraced the concept of cross-platform app development. On one hand, it enables developers to finish the project rapidly by writing the code once for Android and iOS, and on the other hand, it enables entrepreneurs to address a huge audience through a user-friendly app.

These days, every industry sector, ranging from manufacturing to retail and healthcare to hospitality, wants to make the most of mobility. This trend keeps the mobile app development company busy in developing applications that can seamlessly run across multiple platforms while meeting the client’s business needs effectively.

Let’s go through some of the major advantages of developing cross-platform apps from the perspectives of mobile app developers and entrepreneurs.
Bidding hello to the world, again!
Tags: ngchenhon, mutatedbread, firstpostinalongwhile, helloworld
Published: 2020-10-02 10:24:19

---
title: Bidding hello to the world, again!
published: true
description: Hello there, and welcome to my blog! In the past, I had written on dev.to but stopped. Today, this will be my first post on my very own blog after a long hiatus. Hopefully I will write much more often.
tags: ngchenhon, mutatedbread, firstpostinalongwhile, helloworld
---

> Originally posted at my [blog](https://mutatedbread.space/blogs/2020-10-02/hello_world_again)

Hello there, and welcome to my blog! In the past, I had written on [dev.to](https://dev.to/) but stopped. Today, this will be my first post on my very own blog after a long hiatus. Hopefully I will write much more often.

Here I bid hello world to everyone again!

![Hello There](https://media.giphy.com/media/Nx0rz3jtxtEre/giphy.gif)

## A little bit about me.

My full name is Ng Chen Hon. Currently, I mostly mine rubies with Ruby on Rails and flex yoga with React Native. My common tech stacks are on Ruby on Rails, React.JS, React Native and Typescript.

> Well [RoR](https://rubyonrails.org/) runs on [Ruby](https://www.ruby-lang.org/en/) and React Native runs on [Yoga Layout](https://yogalayout.com/), geddit?

I am a developer who puts emphasis on productivity quality, there will be time for quality code writing and time for quality brainstorming. Also, developer-kinds aren't machines 😫, we got to take breaks from writing code.

As a person, I have this belief that we should learn like a child would and embrace whatever that might be new with an open heart, however, with past experience and your intricate bull💩 sensor attached on.

My current favourite thing is working with Ruby and with Rails. It was on 2019 when I first came in touch with Ruby. I had fallen in love with the language after learning Ruby and working with Rails after a couple of months. The syntax, at initial glance, was weird and disconnected from the common family of C languages we came to learnt. However, as time went by, only then I discovered how beautiful and elegant the language is. Then, with Rails, I find it handy that development and testing came bundled together within the same hierachy.

It is so enjoyable, happy and productive to write code with Ruby.

I am currently working Singapore for a small Rails shop. If you are in Singapore and love to have a beer or kopi, feel free to ping me. 🙂
Make Your First Open Source Contribution
Tags: opensource, codenewbie, webdev, javascript
Published: 2020-10-02 10:24:15

Hello Everyone,
If you are a beginner and interested in contributing to opensource then I made a video about it.
This video will help you to get started with open source and helps you to make your first open-source contribution.
If you are interested in contributing in opensource then click on this link to get started with open source.
https://youtu.be/9yx3XZq4JxM

Thank You.
Recap of Vue
Tags: 100daysofcode, vue
Published: 2020-10-02 10:20:08

I reviewed the fundamentals of Vue

####Creating a Vue instance
``` javascript
new Vue { 
//options
}
```
Template syntax
```html
<p>{{ variables }}</p>
```
#### Vue instnace Options/ properties
`el` - selects a html element to mount the vue instance
`data` - holds the data properties
`computed` - handles presentation logic
`methods` - handles data manipulation logic
``

_Computed properties are best used when changing the presentation of data while methods are best used to change data_
####Vue directives
`v-model` use to enable two-way data binding
`v-on` Used to listen to events to dom events. The shorthand is @
`v-for` used to loop through data in Vue
`v-if` and `v-else`  Used for conditional rendering
`v-bind` used to bind javascript expressions to a HTML attribute. The shorthand is :

_That's it for day 78_
_Let's do this again tomorrow_
To DevOps and beyond
Tags: devops, engineering, development
Published: 2020-10-02 10:14:31

---
title: To DevOps and beyond
published: true
description: the take on DevOps culture
tags: #devops #engineering #development
//cover_image: https://direct_url_to_image.jpg
---

I finally got to reading Sam Newman's "Monolith to Microservices". It's a pretty good book that underlines not only technical challenges but also organizational and cultural transformations that are needed to make the mindset switch.

What prompted me to write this was a bit of wording that made me think, mainly that Newman spoke of the "DevOps movement".

I've been contacted along the way by recruiters working to find people to fill in "DevOps" positions. As it happens in the vast majority of cases, the job description reads like a plain Ops role, simply renamed to DevOps to take advantage of the buzzword of the day.

It's difficult to explain to people that DevOps is better described as a mindset, a culture or, indeed, a movement. In many ways, it's the next transformational step leading towards agility.

While Scrum has done a good job in promoting the idea of cross-functional teams, heralding an era of dismantling silos, the process has been long and painful:

- step 1 was the role of product owner, or in general teams adding the business component to development teams
- step 2 was dismantling QA teams that would take development input and instead having QE specialists in every team, which was made easier by automation (in the way that QE's job is also more about coding automated tests)
- step 3 is now, the dismantling of Ops silos and bringing in the Ops knowledge to development teams.

Of course, true transformation is much more than shifting people around. The main benefit is that knowledge isn't restricted to specialised teams and people with different backgrounds can get in touch with but also that it prevents the creation of bubbles around people
Export Mac OLM Emails to Outlook PST

Tags: olmtopst, convertolmtopst, olmtopstconversion
Published: 2020-10-02 10:07:14

Convert OLM to PST file format install an effective tool OLM to PST Converter and easily Convert OLM file to PST file in just few clicks. The tool quickly & safely converts all email items including email, calendar, attachment, contact, etc. This Software easily Convert your large size of OLM file to PST file format without any file size limit. You can also try free trial version of this Software and also save 30 emails per folder at free of cost.

You can try this software free trial version from here: http://www.convertolmtopst.emltopstsoftware.com/
Piring Melamin Glori Pabrik Terbesar
Tags: distributedsystems
Published: 2020-10-02 09:59:40

Piring melamin glori dijual grosir dengan harga murah, langsung dari pabrik melamin merk terkenal Glori Melamin. Sudah ribuan yang bergabung tanpa ragu. Sudah terbukti aman tidak berbahaya karena sudah berstandar SNI.

Merk terkenal <a href="http://https://www.glorimelamine.com/">piring melamin</a> Glori dengan makanan cepat saji yang lebih modern, pasti bisa membuat partai sukiyaki atau shabu-shabu Anda menjadi lebih menarik, karena cara penggunaannya sangat mudah dan tidak rumit.

Hai Taukah melamin elemen merupakan senyawa organik yang terbuat dari formaldehida, urea dan sintetis. Sebuah senyawa yang dapat membuat resin dengan berbagai bentuk kebutuhan home plate melamin Glori
A Study Guide to prepare for Kubernetes Security Specialist Certificate (CKSS)
Tags: kubernetes, ckss, devops, security
Published: 2020-10-02 09:48:54

---
title: A Study Guide to prepare for Kubernetes Security Specialist Certificate (CKSS)
published: true
description: Study Guide to prepare for the upcoming Kubernetes Security Specialist Certificate (CKSS)
tags: Kubernetes, CKSS, DevOps, Security
cover_image: https://miro.medium.com/max/875/1*_3-6eJ_h7gr3bFzuPR6lFA.png
---
Earlier this year CNCF announced an upcoming new Certified Kubernetes Security Specialist (CKS) Certification Exam, This new certification is for those who have passed the CKA exam and want third party validation for their working knowledge of container security.
If you don’t pass the CKA exam yet, I published an article on how I passed the [CKA & CKAD + September Curriculum Update Tips](https://www.ibrahimjelliti.com/my-take-towards-cka-ckad-september-curriculum-update-tips)

From the announcement of the CNCF, the CKS is described as:
> CKS is similar in format to CKA and will consist of a performance-based certification exam — testing competence across best practices for securing container-based applications and Kubernetes platforms during build, deployment, and runtime.

> The certification is expected to be generally available before the KubeCon + CloudNativeCon North America Virtual event taking place on November 17–20.

# CKSS Outline

The CKS test will be online, proctored, performance-based. the candidates have 2 hours to complete the exam tasks.

From the CKS Exam Curriculum repository, The exam will test domains and competencies including:
1. **Cluster Setup (10%)**: Best practice configuration to control the environment’s access, rights, and platform conformity.
2. **Cluster Hardening (15%)**: Protecting K8s API and utilize RBAC.
3. **System Hardening (15%)**: Improve the security of OS & Network; restrict access through IAM
4. **Minimize Microservice Vulnerabilities (20%)**: Utilizing on K8s various mechanisms to isolate, protect, and control workload.
5. **Supply Chain Security (20%)**: Container oriented security, trusted resources, optimized container images, CVE scanning.
6. **Monitoring, Logging, and Runtime Security (20%)**: Analyse and detect threads.

I have created a Github repository collecting References for CKS Exam Objectives.

> The given references and links in the repository are assumptions and ideas around the [CKSS curriculum](https://github.com/cncf/curriculum/blob/master/CKS_Curriculum_%20v1.19%20Coming%20Soon%20November%202020.pdf).

PRs are always welcome so Star 🌟, fork 🍴 , and contribute

{% github https://github.com/ijelliti/CKSS-Certified-Kubernetes-Security-Specialist no-readme %}
NodeJS malware caught exfiltrating IPs, username, and device information on GitHub
Tags: security, malware, showdev, news
Published: 2020-10-02 09:44:26

Multiple NodeJS packages laden with malicious code have been spotted on npm registry.

These “typosquatting” packages served no purpose other than collecting data from the user’s device and broadcasting it on public GitHub pages.

The findings were spotted by Sonatype’s [automated malware detection systems](https://blog.sonatype.com/sonatype-spots-malicious-npm-packages) and further investigated by the company’s Security Research team which includes me.

The packages previously present on the open source npm registry included:

1.  [electorn](https://www.npmjs.com/package/electorn) (intentional misspelling of a legitimate package “electron”)
2.  [loadyaml](https://www.npmjs.com/package/loadyaml)
3.  loadyml
4.  lodashs  (intentional misspelling of a legitimate package "lodash")

All four packages were published by the same user “simplelive12” and have now been removed, with the first two having been taken down by npm as of October 1, 2020. The previous two packages were unpublished by the author themselves.

Once installed, `electorn` ran a script in the background **every** **hour** which collected the logged-in user’s IP, geolocation data, username, path to home directory, and CPU model information.

![](https://securityreport.com/wp-content/uploads/2020/10/image-1-1024x356.png)

The malicious code within `electorn` and 3 other identical packages which exfiltrated user information

This information, part of which constitutes the device “fingerprint” was uploaded and published on [GitHub](http://web.archive.org/web/20201001065601/https://github.com/h4ppyl1ve/collect/issues/4) in real-time.

Some of the information being published is base64-encoded but this can be trivially decoded by anyone who has access to it:

![](https://securityreport.com/wp-content/uploads/2020/10/image-1024x488.png)

Sonatype’s Security Research team has accounted for these malicious packages into their products, and had notified both npm and GitHub teams of the malicious activity stemming from the components. This led to the takedown of these malicious packages.

To this date, all 4 packages have scores a little over **400** total downloads.

It is not exactly clear what was the purpose of collecting this data and why was it being published on the web for the world to see, however, incidents like these highlight the potential of typosquatting attacks on the open-source ecosystem.

We can only imagine what the next possible version of these packages could have been capable of – possibly carrying out even more sinister activities.

By tricking an unsuspecting developer into mistakenly installing a misspelled package, attackers can push their malicious code “downstream” into any other open-source projects that use the misspelled malicious component as a transitive dependency.

Adopting DevSecOps best practices and building security early on into your software development lifecycle can prevent “counterfeit components” such as `electorn` and `loadyaml` from entering, and thriving in your software supply chains.