teleren/devto huggingface dataset:
Hacktoberfest - Working with v-tooltip
Tags: opensource, hacktoberfest
Published: 2021-10-26 02:57:07

# Project Introduction
👉During the Hacktoberfest month, I worked a project using Javascript Framework - Vue. This is the first time I work with this framework so it's worth my try.

👉The project is about an online tool to visualize the color palette. You can take a look at its [GitHub Repo](https://github.com/dylan-snyder/site-color-visualizer) or my [Folked Repo](https://github.com/kiennguyenchi/site-color-visualizer).

# Project Issue
❓I took an issue on this project: Whenever user hovers over a button on the website, it would display a small hover text in order to show the explanation how the button works. There are 9 buttons I needed to implement in total. 
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5po2s7pzvvjgna4os2kb.png)
👉After researching for hours how to implement a hover text nicely, I tried several ways and it seemed too long, complicated and duplicated code to implement. Finally, I found out that Vue Framework providing a very useful tool to implement hover text, which is v-tooltip.

🔗This is my filing [Issue](https://github.com/dylan-snyder/site-color-visualizer/issues/10) on GitHub.
# Project Process
I installed the v-tooltip package by the Command Prompt.
```
npm install --save v-tooltip
```
I imported package in main.js file.
```
import VTooltip from "v-tooltip";
//some code
Vue.use(VTooltip);
```
I added the attributes of v-tooltip to any tag that I want to show when hovering. Specifically, in this time, I add it to a button. The value of that v-tooltip attribute in Export Button is "Export color to JSON".

```
<button @click="exportColors" v-tooltip="'Export color to JSON'">
Export
</button>
```
And here is the result when I hover the Export button. Of course, I implemented all 9 buttons but I just screenshot 1 for example.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ba7p3abh7pjaefrvmwv.JPG)
🔗This is my [Pull Request](https://github.com/dylan-snyder/site-color-visualizer/pull/13) on GitHub.

👉The owner of this repo is really nice. He always replies as soon as possible, shows me to clean the code so he would merge it to main branch. It is nice to work with him.

✔️Overall, it is fantastic to learn a new tool from a new framework. Last project on Hacktoberfest, I worked with Rust, language I have never coded before. I'm looking forward to learn as many new programming languages/frameworks as possible during this Hacktoberfest.
Implement Fonts in Lit
Published: 2021-10-26 02:52:57

In a [previous post of mine](https://dev.to/ejm5763/things-to-consider-when-building-web-components-9jk), I mentioned I was in a group project creating web component learning cards (shown in the image below) that are composed of several different elements.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu6ljn032aj0jk95vdce.png)

An important aspect of design and accessibility that may often be overlooked is the use of fonts. We are able to implement fonts in Lit by importing something like Google Font. This can be simply done in HTML using the following code:


```
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
```


[Click for Reference Link](https://stackoverflow.com/questions/57489637/how-to-load-google-font-in-litelement)
Cheapest professional cloud and web hosting for beginners on the market.
Published: 2021-10-26 02:50:03

Probably you are reading this article because you want to find the cheapest and most professional web hosting platform on the market.
Let me just get straight to the point. The platform is called [interserver](https://www.interserver.net/r/656116).

## Features.
The standard plan has some really good features you can’t find anywhere.
### Managed Web Hosting Features.
- Unlimited Storage Space
- Unlimited Data Transfer
- Weekly Backups
- Unlimited FTP Accounts
- Cloud Apps
- SSD Caching Servers
- Raid-10 Storage
- Speed Optimization
- Ultra Fast Web Server
- Cloud Linux OS
- 10GB Cisco Network
- Free CloudFlare CDN
- Free Migration (?)
- 30 Day Guarantee (?)
- Price Lock Guarantee (?)
- 99.9% Uptime Guarantee
- 24/7 Support

### DOMAIN NAMES
- Unlimited Websites / Domains
- Unlimited Parked Domains
- Unlimited Subdomains
- Discounted Domain Registration
- Free SSL Certificates

### CLOUD APPS
- 450+ Available Apps
- WordPress
- AbanteCart
- PrestaShop
- Drupal
- Joomla
- Magento
- phpBB
- SMF
- WHMCS
- Dolphin
- PHP-Fusion
- Cubecart
- osCommerce

### E-MAIL FEATURES
- Unlimited E-Mail Accounts
- Guranteed Mail Delivery (?)
- Unlimited Forwarders
- WebMail Access
- iPhone Supported
- Black Berry Supported
- Android Supported
- Windows Mobile Supported
- MX Record Changes
- Spam Filtering
- SSL Encryption
- Outgoing SMTP

### C-PANEL FEATURES
- Control Panel
- Cron Jobs
- File Manager
- Backup / Restore
- phpMyAdmin
- Visitor Statistics
- Git Source Management

### DEVELOPMENT, FRAMEWORKS AND LANGUAGES
- Unlimited MySQL DB
- PHP 5.5 & 5.6
- PHP 7
- Fast CGI
- Ruby on Rails
- Python and all it’s frameworks
- node.js (beta)
- PERL 5.10
- SSH Access

### WORDPRESS FEATURES
- Easy WordPress Installer
- Weekly Backups
- Automatic Updates
- Use Any Plugin
___

## Other Services

### HOSTING SERVICES
- Standard Web Hosting
- Reseller Hosting
- ASP.Net Hosting
- Boost Web Hosting
- Email Hosting
- Cpanel Hosting
- Non Profit Hosting
- Student Web Hosting
- Website Builder
- E-Commerce
- Blog Hosting

### VPS & CLOUD
- VPS Home
- Windows VPS
- WordPress VPS
- Backups
- Webuzo VPS
- Storage
- cPanel VPS
- Debian VPS
- CentOS VPS

### DEDICATED SERVERS
- Dedicated Home
- Storage Servers
- 10Gbps Dedicated Servers
- GPU Dedicated Servers
- Rapid Deploy Servers

For more information visit the official [website](https://www.interserver.net/r/656116).
You can get a huge discount if you use my [link](https://www.interserver.net/r/656116) to get a standard package and price can go to as low as $2.5 or even $1 for 3 months.
[Check it out](https://www.interserver.net/r/656116)
Hope this article was helpful to you.
code every day with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-10-26 02:36:34

##--DAY 8--
Hi, I am going to make #100DaysOfCode Challenge. Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
-Problem: Breaking the Records
-Detail: https://www.hackerrank.com/challenges/breaking-best-and-worst-records/problem
-My solution (javascript):
```
function breakingRecords(scores) {
    let min=scores[0],max=scores[0];
    let ans=[0,0];
    for(let i=1;i<scores.length;i++){
        if(scores[i]>max){
            ans[0]++;
            max=scores[i];
        }
        else if(scores[i]<min){
            ans[1]++;
            min=scores[i];
        }
    }
    return ans;
}
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
Running Valheim on an Linux Server
Tags: valheim, ubuntu, bash
Published: 2021-10-26 01:33:01

> Commands standardized for Ubuntu, you will have to adjust if you are using another distro. 

## Starting from ground zero

1). Install dependencies

```sh
# As root or with sudo run the following:
apt update
useradd -m steam
apt install software-properties-common -y
add-apt-repository multiverse
dpkg --add-architecture i386
apt update
apt install -y \
  lib32gcc1 steamcmd unzip wget curl gosu jq
```


## Running as steam user

1). 

```sh
gosu steam bash
```

2). Edit steams `.bashrc`
3). Add the following to the bashrc: 

```sh
export PATH="$HOME/.bin:/usr/games/:$PATH"
```

4). Run the following to download the latest release:

```sh
DOWNLOAD_URL="$(curl  https://api.github.com/repos/mbround18/valheim-docker/releases/latest | jq -r '.assets[0].browser_download_url')"
wget -O bundle.zip "${DOWNLOAD_URL}"
```

5). Unzip the bundle `unzip bundle.zip`
6). Move the files to the `.bin` folder

```sh
mkdir -p $HOME/.bin
chmod +x {odin,huginn}
mv odin $HOME/.bin
mv huginn $HOME/.bin
```

7). Navigate to the folder you wish to install the server to. 
8). Configure odin with `odin configure --password "Your Password"`
9). Start the server :) `odin start`
CSS is !important
Published: 2021-10-26 01:23:09

An app or website without CSS looks kind of blah. It’s like having an empty house, the structure is there but there’s no style. 

Cascading Style Sheets (CSS) [is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.](https://developer.mozilla.org/en-US/docs/Web/CSS) Essentially, it allows us to style our HTML elements. 

CSS will either be an attached document or embedded directly in the HTML. These three ways of making use of CSS in an HTML document are:

**Inline styles**- Using the style attribute in the HTML start tag.

```
<p style =“color: red; font-size: 15px;">This paragraph will be red.</p>
```

**Embedded styles**- Using the style tag in the head section of a document.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <style>
        body { background: black; }
        p { color: red; }
    </style>
</head>
<body>
    <p>This paragraph will also be read, and the entire background will be black.</p>
</body>
</html>
```

**External style sheets**- Using the link tag, pointing to an external CSS file.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
  <link rel="stylesheet" href="css/style.css">
    <style>
        body { background: black; }
        p { color: red; }
    </style>
</head>
<body>
    <p>This paragraph will also be read, and the entire background will be black.</p>
</body>
</html>
```
Arguably, the best way to use CSS for styling is an external style sheet. This way all of the CSS-related code is in a separate file and if you need to change something you don’t have to try and go line by line to find where you need to make the change in your HTML.

While we can usually get around well enough with the CSS basics- background, color, font-family, text-align, etc. There are so many other CSS properties that we use and we can do some pretty amazing things with CSS. A good way to learn or brush up on CSS is playing games! Here are some resources to make learning CSS more fun: 

**Flexbox Froggy**- https://flexboxfroggy.com
**Grid Garden**- https://cssgridgarden.com
**CSS Diner**- https://flukeout.github.io
**CSS Battle**- https://cssbattle.dev
**Flexbox Defense**- https://www.flexboxdefense.com

The properties are seemingly endless and no doubt there are some that will likely never get used, W3Schools has a great list [here.](https://www.w3schools.com/cssref/default.asp)

In writing this article I realized just how much there is to know about CSS and I've really only just scratched the surface. I think this will be a topic I explore more in the future. Thanks for reading!
ww88
Published: 2021-10-26 01:16:28

ลิงค์ W88 ล่าสุดในไทย อัพเดทเป็นประจำ ใช้สำหรับสมาชิกลงทะเบียนหรือล็อกอิน W88 ในประเทศไทย
Website : https://w88th2.com/%E0%B8%97%E0%B8%B2%E0%B8%87-%E0%B9%80%E0%B8%82%E0%B9%89%E0%B8%B2-w88-%E0%B8%A1%E0%B8%B7%E0%B8%AD-%E0%B8%96%E0%B8%B7%E0%B8%AD.html
Địa chỉ : 999/9 đường Rama I, Bangkok, 10330
Google maps : https://goo.gl/maps/1m25xukRDhxWymFTA
SĐT: 02036085161
#ww88
Micro service communication over a message bus 
Tags: programming, question, microservices
Published: 2021-10-26 00:17:37

So I’ve got a question - 

Consider the following scenario I have a service that aggregates leads, a lead can be a good / goods I can buy and another service for Pricing said goods. 
My architecture is following the API gateway pattern, so my services in theory shouldn’t introspect or communicate with one and other. 
I’d ideally want this operation to be asynchronous. Being that the leads service inserts into my database and I publish an event called - LeadCreated. 

The pricing api consumes that event and emits an event called LeadPriced which obviously in turn contains the pricing information for the lead.  The leads service then listens to that event and then appends the pricing information to the lead. 
Is this an appropriate way to handle this kind of communication?
Worth noting that each micro services has and is the only thing allowed to communicate with its dataset.
Re-Ordered Lists
Tags: html, todayilearned
Published: 2021-10-26 00:13:32

Recently I posted a list of [programming platitudes](https://dev.to/terrychild/programming-platitudes-nfc).  It contains all my wisdom from the past 20 years squeezed into 20 tongue in cheek phrases.  For humour value I wanted to mess with the numbering in the list and this led me to discover some attributes of HTML ordered lists that I thought I would share.

As many of you may know, articles on dev.to are written in Markdown and I wanted my list to start at zero, so I wrote the following:
```markdown
0. zero
1. one
2. two
```
While the Markdown parser recognised this as an ordered list, unfortunately it ignored the values before the full stop (period) and started the list at one which resulted in something like this:

> 1. zero
> 2. one
> 3. two

I did a quick check and found that the `<ol>` tag (ordered list) supports a `start` attribute.  There is no way in Markdown syntax to set this attribute however you can embed HTML in Markdown. Therefore I updated my article use HTML:
```html
<ol start=0>
	<li>zero</li>
	<li>one</li>
	<li>two</li>
</ol>
```
This worked just as required.

<blockquote>
	<ol start=0>
		<li>zero</li>
		<li>one</li>
		<li>two</li>
	</ol>
</blockquote>

Further on in the article I wanted have one item listed out of order, another quick check and I found the `<li>` tag supports a `value` attribute when in an ordered list.  This specifies what number to use for that item.  Items after this will carry on incrementing from that value.
```html
<ol start=0>
	<li>zero</li>
	<li>one</li>
	<li>two</li>
	<li value=5>skip to five</li>
	<li>carry on with six</li>
</ol>
```
<blockquote>
	<ol start=0>
		<li>zero</li>
		<li>one</li>
		<li>two</li>
		<li value=5>skip to five</li>
		<li>carry on with six</li>
	</ol>
</blockquote>

You can use the `value` attribute in a later item to jump back or skip to what ever number you like.  With these two attributes you really can make a mess of your ordered list.

In addition the `<ol>` tag support a Boolean attribute `reversed` which predictably reverses the list and numbers the items from high to low.  It also supports a `type` attribute to switch from numbers to letters or roman numerals.  See the full spec [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)

Nothing earth shattering, but sometimes it's nice to discover some core functionality of basic HTML you never knew (or forgot) about.
Can small companies do effective A/B testing?
Tags: abtesting, podcast, video
Published: 2021-11-04 12:14:42

---
title: Can small companies do effective A/B testing?
published: true
date: 2021-10-26 00:00:00 UTC
tags: abtesting,podcast,video
canonical_url: https://jhall.io/archive/2021/10/26/can-small-companies-do-effective-a/b-testing/
---

After a bit longer-than-anticipated vacation, [The Tiny DevOps Podcast](https://podcast.jhall.io.) is back! And I have some great episodes coming up on topics such as QA, flow engineering, and observability. Be sure to subscribe in your favorite podcatcher, or on YouTube to be notified when these episodes go live.

In this week’s episode I speak with Lukas Vermeer, former head of experimentation at Booking.com, and currently working with Vistaprint. He answers the question of whether A/B testing makes sense in small companies and startups, and with small numbers of customers. We also discuss the broader topic of experimentation in general, and applying the scientific method to business development.

[Listen](https://share.transistor.fm/s/ba8005a8), [watch](https://youtu.be/Komi_N8W_IM), or [read the transcript](https://share.transistor.fm/s/ba8005a8/transcript).

[![](https://jhall.io/images/icon-podcast-512_hudba6b7b089bf867fab369dd7c8de54ef_15339_0x100_resize_q85_box_2.png)](https://share.transistor.fm/s/ba8005a8)   [![](https://jhall.io/images/icon-youtube-512_hu472b17e2e29474aa989a586bfaf501e7_5679_0x100_resize_q85_box_2.png)](https://youtu.be/Komi_N8W_IM)   [![](https://jhall.io/images/icon-transcript-512_hu61121fb4158683053abb5347949e43dd_14667_0x100_resize_q85_box_2.png)](https://share.transistor.fm/s/ba8005a8/transcript)

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Identify items in an Amazon DynamoDB table that haven't been accessed and move them to Amazon S3.
Tags: aws, dynamodb, database, nosql
Published: 2021-10-25 23:49:55

Question: How to identify items in an Amazon DynamoDB table that haven't been accessed for a time and move them to Amazon S3.

Answer: There is no built in way for DynamoDB to know which items have or have not been accessed lately. More than likely, your best option is to do the following:

Prerequisites:
1. Have TTL enabled on the table and a TTL attribute on every item in the table. If not, you will have to do that first.
2. If you do not already update TTL attributes on items when they are accessed, you must change your application code to update the TTL attribute on an item when you access that item. Otherwise none of this will work.

With that in place, enable DynamoDB Streams. Then create a Lambda function that [watches DDB Streams specifically for TTL Deletes](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/time-to-live-ttl-streams.html) which reads from the table's stream, then write the expired items to S3. [Here is an older blog post which should still be mostly relevant for this purpose](https://aws.amazon.com/blogs/database/automatically-archive-items-to-s3-using-dynamodb-time-to-live-with-aws-lambda-and-amazon-kinesis-firehose/).
#100DaysOfSwift: Project 13 
Tags: ios, beginners, swift
Published: 2021-10-25 23:04:21

Hello, project 13 introduced me to CIContext, CIFilter, and UIImageWriteToSavedPhotosAlbum. The project was to allow the user to add filters to a picture and save it in their photos album. 

Key Takeaways: 

1. IBOulet connects the storyboard to your code and is used by Xcode to understand which properties and methods are relevant to IB. IBAction is a way of making your storyboard layout trigger code. 

2. Picker.delegate : delegate receives notifications when the user picks an image, movie or exits the picker interface. Picker must have a delegate because it decides when to dismiss the picker interface. 

3. After the user selects the image they want to add a filter to, we added a method where we check if the image selected was an UIImage and input it as the value for the variable currentImage. Example, 

func imagePickerController(_picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.Infokey: Any]){

guard let image = info[.editedImage] as? UIImage else {return}

dismiss(animated: true)

currentImage = image
}

4. CIImage is created from the UIImage selected by the user that is stored in the currentImage property and KCIInputImageKey is a key for the CIImage object to use as an input image. Example, 

let beginImage = CIImage(image: currentImage)
currentFilter.setValue(beginImage, forKey: KCIInputImageKey)

5. CIContext stands for Core Image Context and it handles rending. CIFilter store the filer the user activated.
Var VS Let in Javascript
Tags: javascript, codenewbie, beginners
Published: 2021-10-25 22:24:11

In Javascript, you can declare a variable using “Var” or “let” BUT there is an inconvenient, don’t worry, I will give you context.
Some years ago(2015) Javascript changed. Var had a global scope before 2015, BUT with ecmascript6 it changed because We can use “Let” to declare a variable.
You shouldn’t use “Var” because it is considered a bad practice , It can get you into a value reassignment problem.
Example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf7afdp7cpz1wpdwme10.png)

In this example I created a variable using “var” and printed on console three times to show you this…
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxj61wwgusiyeny0vu29.png)

You can see that the variable var was added to window’s global object.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3587w57hygfk756fz27.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mitp6n2gk1i4terd42it.png)

BUT if you create a variable using LET, you won’t have that problem, and the variable LET could be a local or global variable.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3g4x12a77nsqmx4w2w9.png)

I hope I have helped you by solving this question and You have saved time.
I look forward to your comments, have a nice day. =D
Code Smell 96 - My Objects
Tags: oop, programming, webdev, tutorial
Published: 2021-10-25 22:12:37

*You don't own objects.*

> TL;DR: don't use *my* as a name prefix.

# Problems

- Lack of context

- Bijection Fault

# Solutions

1. Remove *my* prefix. 

2. Change to a role suggesting name.

# Context

Several old tutorials use the word 'my' as a lazy name. 
This is vague and lead to context mistakes.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/5c9ab47e5af40a643dee30ace2b57a93)
```csharp
MainWindow myWindow = Application.Current.MainWindow as MainWindow;
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/8d230b138e3220e08064acedd585dd7d)
```csharp
MainWindow salesWindow = Application.Current.MainWindow as MainWindow;

/*

Since window is instanciated, we are currently working
with a specialized window playing a special role

*/
```

# Detection

[x] Automatic

We can tell our linters and static checkers to search for this prefix and warn us.

# Tags

- Naming

# Conclusion

Avoid using *my*. Objects change according to the usage context.

# More Info

- {% post https://dev.to/mcsee/what-exactly-is-a-name-part-ii-rehab-20gd %}

# Credits

Photo by <a href="https://unsplash.com/@bozu">Michał Bożek</a> on <a href="https://unsplash.com/s/photos/kid-toy">Unsplash</a>
  
* * *

> Thinking about my experience of modifying code, I see that I spend much more time reading the existing code than I do writing new code. If I want to make my code cheap, therefore, I should make it easy to read.

_Kent Beck_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}