teleren/devto huggingface dataset:
Hiding Secret Links With CSS
Tags: webdev, css
Published: 2020-06-26 21:56:05

Every now and then I like to browse the hiring pages of companies I like and admire.

Last week, I noticed an opening that didn't feature the usual prominent call-to-action prompt to apply.

Instead of a button or a link, there was only a message with instructions for applicants.

<!--more-->

> "To apply, submit [...] at the URL that appears when you append the class [`secret-class`] to this tag."

Alright then. A few clicks in devtools give the paragraph its `secret-class`. Lo and behold, a URL appears!

> "To apply, submit [...] at the URL that appears when you append the class [`secret-class`] to this tag. **bit.ly/...**"

So what's the secret sauce that makes this link show up?

A further glance at devtools points to a few inlined styles in the page. Here's the key excerpt.

```css
.secret-class::after {
    content: " bit.ly/...";
    color: #6ba53a;
    font-weight: 600;
}
```

Let's break it down.

Once the target paragraph has the necessary class, the CSS selector kicks in. It creates a special [`::after` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) that's placed after all of the paragraph's content.

The [`content` property](https://developer.mozilla.org/en-US/docs/Web/CSS/content) used inside the block is a special property that only applies to `::before` and `::after` pseudo-elements. It replaces them with a provided value. In the case of this job posting, that's the application link! With a few more properties to make the link pretty, we've got a cleverly hidden link!

Why employ a move like this? I could hazard a few guesses.

-   A hurdle for applicants to prove some level of familiarity with web tools and development (a requirement of the job)
-   Obscuring the application link encourages applicants to read the complete posting, rather than skimming the page and hitting apply
-   Dissuade third parties (web crawlers, recruiters) from finding and sharing the application link

At the end of the day though, I'm just hypothesising.

My concern with this approach is its accessibility. It's hard to be certain that CSS `content` will be visible to those using assistive technologies, especially screen readers.

This could even be seen as discriminatory, preventing a particular audience from applying for the job. In the case of sufficiently inaccessible content, [adding an `aria-label`](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html) can make a world of difference. Even with this label, the link itself remains visually hidden!

As an extra step, you can share the link between the `aria-label` and its paragraph using the [`attr()` CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/attr)!

---

You can see it in action in this CodePen!

{% codepen https://codepen.io/nchlswhttkr/pen/pogwJEK %}
Day 163: Clones
Tags: hiphop, code, coding, lifelongdev
Published: 2020-06-26 21:49:12

_liner notes_:
- Professional : Pretty chill day. Posted up in the Web Component channel to get some feedback on the one I've been working on. Had some thoughts about where we should take the component. Got some good insights. I'll also be doing a review of some code snippets so I cloned the repo and got everything running on my local machine.

- Personal : Didn't really feel like doing much last night. Watched some anime. Set up the admin section for my next side project. Also went through some tracks for the radio show.

![Tents on a lake in Zug, Switzerland](https://dev-to-uploads.s3.amazonaws.com/i/jyjnnkrnnsfakxa5p0mx.png)

Going to finish up everything for the radio show. Work on the side project's admin section login. Probably watch some anime and work on the layout for my van.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube _I1IX2cqjQ4 %}
Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in
Published: 2020-06-26 21:39:39

foreach ($sql->select(array('table' => 'categories', 'where' => array("parent = $id"), 'orderby' => array('ord', 'ASC'))) as $row){
  $find = array('/{id}/i', '/{name}/i', '/{url}/i', '/{icon}/i', '/{template}/i', '/{prefix}/i', '/\[php\](.*?)\[\/php\]/ie', '/{parent}/i', '/{ord}/i');
  $repl = array($row['id'], $row['name'], $row['url'], ($row['icon'] ? '<img src="'.$row['icon'].'" alt="'.$row['icon'].'" border="0" align="absmiddle">' : ''), $row['template'], (($row['parent'] or !$no_prefix) ? $prefix : ''), '\\1', $row['parent'], $row['ord']);
  $johnny_left_teat .= ($no_prefix ? preg_replace('/('.$prefix.'{1})$/i', '', str_repeat($prefix, $level)) : str_repeat($prefix, $level));
  $johnny_left_teat .= preg_replace($find, $repl, $tpl); **// the error in this line**
Bong Da Truc Tuyen Ativi.net
Tags: tructiepbongda, bongdatructuyen, ativinet
Published: 2020-06-26 21:33:54

<a href="https://ativi.net/"> Ativi.net</a> là website trực tiếp bóng đá,cung cấp link <a href="https://ativi.net/">xem bóng đá trực tuyến</a> Cập nhật liên tục lịch thi đấu, kết quả, bảng xếp hạng các giải đấu ngoại hạng anh, C1, Laliga, Bạn sẽ không cần phải đi tìm link sopcast, link xem bóng đá nữa, link xemchua bóng đá</a>,...
Với chức năng bình luận tiếng Việt, hỗ trợ đặt cược bóng đá tip kèo cập nhật tự động từ kèo nhà cái trực tiếp thú vị. Nhằm mang lại không gian xem trực tiếp bóng đá cho mọi người, giúp bạn không bỏ lỡ những trận bóng đỉnh cao hay những bàn thắng đẹp với video tổng hợp diễn biến chính mỗi trận đấu đã qua.
Anh em cũng có thể theo dõi tất cả toàn bộ giải đấu Hot nhất hành tinh Champions League, Ngoại Hạng Anh, Bundesliga, La Liga, Serie A, Ligue 1,… hoàn toàn miễn phí.

Khác với trước kia, khi việc xem trực tiếp bóng đá là phổ biến trên các kênh truyền hình quốc gia lớn (K+1, K+pm, K+ns, K+pc, TTTV, VTV VTC...). Thì giờ đây, Chi phí bản quyền khủng khiến việc mua được bản quyền trở nên khó khăn hơn đối với các nhà đài.

Hiện tại, Chỉ có K+ là kênh truyền hình trực tiếp bóng đá những giải lớn song không phải ai cũng có đủ điều kiện để lắp đặt K+ để theo dõi. Ngoài kênh truyền hình nói trên, VTV6, Bóng đá TV, Bóng đá tv HD, TTTV, TTTV HD hiện cũng đã mua bản quyền của giải bóng đá Ngoại Hạng Anh. Nhờ đó, người hâm mộ có thể xem truc tiep bong da ngoai hang Anh trên VTV6, Bóng đá TV, Bóng đá tv HD, TTTV, TTTV HD mà không phải mất thêm phí lắp đặt K+. Tuy nhiên phát sóng truc tiep bong da VTV6, Bóng đá TV, Bóng đá tv HD, TTTV, TTTV HD không đầy đủ và quá ít.

Vì thế, chúng tôi đã tạo ra Ativi.net để mang giải pháp xem chùa bóng đá trực tuyến chất lượng cao nhất đến anh em. Bất kể bạn là ai, hâm mộ Chelsea, Manchester United, Liverpool, Arsenal, Real Madrid hay Barcelona cũng có thể gia nhập cộng đồng xem bóng đá trực tuyến của Ativi.net thật dễ dàng. Nếu bạn là fan cứng La Liga và đang nóng lòng muốn theo dõi trận Siêu kinh điển, song tivi lại chỉ chiếu derby Ngoại Hạng Anh nhưng đừng tuyệt vọng bởi chúng tôi sẽ đem đến đầy đủ cho bạn.

Với hệ thống chuyên ngiệp hàng đầu về lĩnh vực bóng đá, Ativi sẽ giúp bạn nhận định, phân tích thống kê đỏ hay đen đến những thông tin nóng hổi nhất về thị trường bóng đá, thị trường chuyển nhượng. Đến với Ativi.net bạn sẽ xem được thông tin đội hình, lịch sử đối đầu của 2 đội, tỷ lệ kèo nhà cái đưa ra tối nay, hay kết quả trận đấu chi tiết tình huống phạt góc.
----------- Contacts Ativi ------------------
Ativi - Suu tam nguon truc tiep bong da moi ngay de phuc vu nhom doc nhai yeu bong da ma ko so huu co hoi duoc xem vi ly do gi do, chung toi la nhom thanh vien hoat dong phi loi nhuan.
Website: https://ativi.net
Email: quangcao@ativi.net
Nativefier is bonkers
Tags: npm, electron, music, app
Published: 2020-06-26 21:26:59

I made an electron app in 4 lines...

```sh
nativefier "http://musicforprogramming.net/" -n "musicforprogramming"
cd musicforprogramming-linux-x64/
sudo chmod +x musicforprogramming
./musicforprogramming
```

# Motivation

I like music, but don't like music in browser tabs. Basically because i have it open all the time, I want to find and control it easily, and I don't want it cluttering up an area that might be soley focused on work. 

I discovered some neat apps for google play, and wanted to see if there was one for my other go to, [musicforprogramming](http://musicforprogramming.net/). There wasn't, so I just casually googled how to convert a page into an electron app and OMFG!

# Solution

{% github jiahaog/nativefier %}

[This post](https://www.todesktop.com/guides/nativefier) and [this one](https://www.addictivetips.com/ubuntu-linux-tips/nativefier-turn-websites-into-linux-apps/) helped iron out some kinks and now I can launch programming music right from my VS code terminal!

![vs code and an electron app of musicforprogramming made with nativefier](https://dev-to-uploads.s3.amazonaws.com/i/7dh4uokd2pt0zxgeye0n.png)

# Extra credit

```sh
alias musicforprogramming="~/Dev/musicforprogramming-linux-x64/musicforprogramming
```
React tooltip
Tags: react, javascript, tooltip, css
Published: 2020-06-26 20:48:48

```jsx
import React from "react";
import styled from "styled-components";

const TooltipContainer = styled.span`
	position: relative;
	
	&:hover > .tip {
		display: block;
	}
	
	& > .tip {
		display: none;
		position: absolute;
		
		background: #1F2531;
		opacity: 0.9;
		border-radius: 5px;
		
		color: #FFFFFF;
		padding: 12px 8px;
		width: 100%;
		min-width: 100px;
	}
	
	& > .tip::after {
		content: "";
		position: absolute;
		opacity: 0.9;
		top: -10px;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color:  transparent transparent black transparent;
	}
`;

const Tooltip = ({children, tip}) => {
	return <TooltipContainer>
		{children}
		<span className="tip">{tip}</span>
	</TooltipContainer>
};

export default Tooltip;
```

### Usage:
```jsx
<Tooltip tip="I'm a tooltip">
	<p>Example paragraph</p>
</Tooltip>
```
Top free Live TV App in India
Published: 2020-06-26 20:38:19

today we are going to discuss <a href="https://techypatcher.com/abbasi-tv-apk/">Abbasi TV APK</a>, which circulates on the web on the Internet. This is an apk recently known by Abbasi Studio with enjoying free TV channels, movies and dramas. Here you will download the Abbasi TV apk on your versatile Android. After introducing this app, you can enjoy more than 200 free television stations on your gadget. You can also watch dramatizations, TV shows, movies and more.
In the fun class, you can watch all the scenes and periods of the Ertugrul Drama Serial on your Android phone. You can also watch the LIVE spill of Ertugrul in URDU by PTV Home in this application. There is a huge variety of episodes of Ertugrul Ghazi. You can enjoy online for free in this TV app. In the event that you are looking for, Abbasi TV for IOS or PC, will be in the ideal location. We are dealing with this venture. You can follow us on YouTube to receive news about the iPhone or PC variant. get Abbasi Tv APK from https://techypatcher.com/abbasi-tv-apk
Collection Caching in Rails with Local Variables
Tags: rails, ruby, performance, discuss
Published: 2020-06-26 20:20:42

Yesterday I was trying to improve the performance of collection rendering in my rails app. The page I was working on is a schedule, which renders many collections of various data types.

The basic method for rendering a collection in Rails using a specific view file is this:
```erb
<%= render partial: 'my_template', collection: 'my_collection' %>
```

For basic cases, you can add caching like this:
```erb
<%= render partial: 'my_template', collection: 'my_collection', cached: true %>
```

My problem is that different user have different permissions to act on items on the schedule, so the rendering is specific to the user. This requires caching the `current_user` as a local variable.

I could not find this anywhere in the Rails guides or docs, but I did find the option in the code. The syntax is this:

```erb
<%= render partial: 'my_template',
           collection: 'my_collection',
           cached: ->(collection_item) { [collection_item, current_user] } %>
```

If that syntax is unfamiliar, it's a lambda literal. It will be called for each item in the collection, using that item as an argument. I'm using the lambda to return an array that will be used to [make the cache key](https://github.com/rails/rails/blob/357e15290ab06af8b4f32dd480b48a8c6e31e9e7/actionview/lib/action_view/renderer/partial_renderer/collection_caching.rb#L58). This works beautifully for my purposes.

Now, normally with Rails, any methods or syntax not in the guides or API docs are subject to change without deprecation, putting you on thin ice. You're at risk of relying on code that the framework maintainers consider an implementation detail, not public API. In this case, though, the git blame led me to this [pull request](https://github.com/rails/rails/pull/25616) in which it seems pretty clear that this feature was added for public use.

I'm posting this as a discussion to see if anyone else is using this feature, or knows its history, or knows a reason not to use it.
Unifye
Tags: javascript, python, webdev
Published: 2020-06-26 20:11:04

Hello,

Me and a partner are looking for backend developers for a project. It will be written most in Javascript and Python. More information can be found here: flytlabs.dev/unifye

We communicate mostly on Discord are looking for serious developers who believe in the idea! Let us know if you're interested by emailing me at ben@flytlabs.dev. We can then further discuss terms, information, and questions you have.
You can also contact me on findcollabs:
https://findcollabs.com/project/unifye-ZJiRx1k5FBZx6ADSCHmS

Thanks!
How to fix React Native version mismatch
Tags: reactnative, javascript, android, ios
Published: 2020-06-26 19:47:41

To fix this just do the following

1). Open **package.json**

2). Change this line

```"react-native": "^0.61.4",```
 to reflect the new version.

For example if it says Javascript version is 20 and React Version is 19, your line would become

```"react-native": "20",```
3). Save the file
4). Close your eyes, delete the node_modules folder
5). Open your eyes and type

**If you use Yarn:**
```yarn install```

**if you use NPM:** 
```npm install``` 

6). Start the app by typing
```yarn start -c``` or ```npm start -c``` or ```expo start```
RSS import missing entries
Tags: help
Published: 2020-06-26 19:46:16

---
title: RSS import missing entries
published: true
description: Problems with RSS feed entries not showing in the dev.to dashboard
tags: ["#help"]
//cover_image: https://direct_url_to_image.jpg
---

I'm trying to import articles from my blog to Dev.to, but they don't seem to appear in my draft posts.  

I've check that my RSS feed is valid at [W3C](https://validator.w3.org/feed/check.cgi?url=https%3A%2F%2Fbarneyparker.com%2Findex.xml) and that seems fine, but only an "about me" page gets imported despite there being three other posts listed in the RSS feed.

Any suggestions?
The .NET Docs Show: Exploring Custom Vision and Hololens
Tags: dotnet, aspnet, webdev, dotnetdocsshow
Published: 2020-06-26 19:30:41

---
title: The .NET Docs Show: Exploring Custom Vision and Hololens
published: true
description: April Speight was a guest on The .NET Docs Show and featured Hololens with Custom Vision.
tags: dotnet, aspnet, webdev, dotnetdocsshow
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f7o3tdbtrnikecu6i3nr.jpg
---

We were thrilled to have April Speight (Microsoft, Developer Advocate) join [The .NET Docs Show](https://dotnetdocs.dev) as a guest on the show! She shared details about developing for Hololens. Taking it a step further, we explored how to integrate with Custom Vision from Azure Cognitive Services.

{% youtube UrvpAKZVOzI %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [The .NET Docs Show YouTube Channel](https://www.youtube.com/channel/UCIy_nKrwrd-naf_MPWtXdLA).

# Useful links

- [Custom Vision - Azure Cognitive Services](https://docs.microsoft.com/en-us/azure/cognitive-services/custom-vision-service/home?WT.mc_id=devto-thedotnetdocs-dapine)
- [Microsoft Hololens](https://www.microsoft.com/en-us/hololens)
What is "this" in JavaScript?
Tags: javascript
Published: 2020-06-26 19:14:13

---
title: What is "this" in JavaScript?
published: true
description: 
tags: javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ghcm4kko0utt39btuxyi.jpg
---

Here's a question I often get in class:

> May we spend a little bit more time going over the fundamentals of how `this` works and how to identify what it’s referring to? I’d love for someone who is a bit more familiar with the concept to explain it like I’m 5.

The simplest explanation of `this` is that it's defined when a function is called. If the function is an attribute of an object, and that object is used when calling it, like `object.coolFunction()`, then `this` is the object. If the function is not an attribute of an object, then `this` is `null`.

Check it out:

```js
const person = {
  name: "Amiro",
  sayHello: function () {
    console.log("Hello from " + this.name)
  }
}
person.sayHello() // => prints "Hello from Amiro"
const sayHello = person.sayHello
sayHello() // what happens here? What is "this" when we call this function?
```

Here's where it gets super hard: callbacks. Here's an example. Assume there's a button element stored in the variable `button`.

```js
button.addEventListener('click', person.sayHello)
```

When the button is clicked, the function stored in `person.sayHello` is called, but it's important to note that it's called like a function, not like an attribute of `person`. So `this` is null when you click the button.

There's two ways to set `this` permanently so that it's what you want it to be at all times: the method `.bind()` and using arrow functions.

## `.bind()`

All functions have a method `.bind()` that takes one argument. `.bind()` returns a new function that does the same thing, but it will have the variable `this` bound to that argument. An example:

```js
function sayHello() {
  console.log("hello from " + this.name)
}

const sayHelloFromAmiro = sayHello.bind({name: 'Amiro'})
sayHelloFromAmiro() // => prints "hello from Amiro"
```

`{name: 'Amiro'}` was bound to `this` when we called `.bind({name: 'Amiro'})` on `sayHello`.

## Arrow functions

When you make a function using the `() => {}` syntax, known as _the arrow syntax_, `this` is bound at the time you create the function. This is really useful if you have a function on an object you want to act as an event listener.

Think back to the example of a DOM button element called `button`. Here it is with arrow functions:

```js
const person = {
  name: "Amiro",
  sayHello: () => {
    console.log("Hello from " + this.name)
  }
}
person.sayHello() // => prints "Hello from Amiro"
button.addEventListener('click', person.sayHello)
```

This time, we'll get what we expect when we click `button`.
Master Array Data structure.
Tags: java, computerscience, career, algorithms
Published: 2020-06-26 19:01:16

Most interviews for an SDE (software development engineer) role require you to have a good grasp of Data structures and algorithms.

One important data structure is *Arrays*. 

An array is a linear data structure and is famous for storing values at contiguous memory locations.

This article will help you to get **started with arrays**. 🥳

I will be using **Java**, but don't worry, you should be able to understand these pseudo-codes irrespective of programming language.

Let us understand the basic manipulation on arrays like insert, delete, sort, etc.

## 1. Create an array.
To create an integer array of size 100,

```java
int[] array = new int[100];
```
## 2. Insert an element into an array.
The following function will insert any element at any position specified by the user and will return the size of the modified array after insertion.

```java
int insert(int array[], int n, int x, int capacity, int position)
{
  if(n==capacity)
    return n; //cannot insert any element since exceeding capacity
  int index = position-1;
  for(int i=n-1; i>=index;i--)
    array[i+1]=array[i];
  array[index]=x;
  return (n+1); //returns the size of the new array.
}
```

## 3. Delete an element from an array.
The following function will delete any element at the position specified by the user and will return the size of the modified array after deletion.

```java
int delete(int array[],int n, int x)
{
  int i;
  for(int i=0;i<n;i++)
    if(array[i]==x)
      break;
    if (i==n)
      return n; // the element is not present in the array
    for(int j=i;j<n-1;j++)
      array[j]=array[j+1];
    return (n-1); // returns the size of array after deletion
}
```

## 4. Sort an array (Ascending order).
Java has an arrays class which can be used to sort arrays by importing java.util.Arrays.

```java
Arrays.sort(array);
```

These were the basic manipulation of arrays that can get you started with. If you want to dive deeper and master them to crack technical interviews, then try to build your logic to solve the following questions:

1. How to reverse an array?
2. How to find leaders in an array?
3. How to left rotate an array?
4. What is kadane's algorithm?
5. What is the sliding window technique?
6. How to solve the Trapping rainwater problem?
7. How to remove duplicate elements in an array?
8. How to find subarrays for a given condition?

You can find the pseudo-codes to the above questions my [Github repository](https://github.com/rakshakannu/Datastructures-arrays). (Pssst... do give it a star if you found it helpful) 😄

If you can explore the above-listed problems and as well as solve the questions on your favorite coding platform, that should give you enough confidence to crack any type of coding question based on arrays. 🎉

To get started with, try [Hackerrank](https://www.hackerrank.com/) or [Hackerearth](https://www.hackerearth.com/). 👩🏻‍💻

Happy learning! happy coding! 💖