teleren/devto huggingface dataset:
How to open target="_blank" links in WKWebView in iOS
Published: 2020-01-31 15:10:41

If you ever worked with `WKWebView` in your iOS application you may have noticed, that some links just don’t work. Meaning nothing happens when you click them. This post exaplains **why `WKWebView` does not open** some links and what to do about it.

The culprit is HTML attribute `target` set to value `_blank` which is used to signal links that should be opened in new tab instead of the current one.

```html
<a href="dev.to" target="_blank" >Link</a>
```

However if you have basic `WKWebView` setup, these links just don’t work. 
The fix is hidden inside `WKUIDelegate`, more specifically in this method:

```swift
webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView?
```

It is pretty long and automatically called whenever user is trying to open link from `WKWebView`.

It is there to give you opportunity to create new screen/tab in your application to provide user with same behavior as Safari or any other browsers.

You don’t have to implement this and still have working `_blank` links with this implementation:

```swift
func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        if let frame = navigationAction.targetFrame,
            frame.isMainFrame {
            return nil
        }
        webView.load(navigationAction.request)
        return nil
}
```

You first check, whether the `targetFrame`  is main frame, meaning your current `WKWebView`. If so, then do nothing and return. If not, you can simply load this request in your current instance and once again return `nil`.

Of course, don’t forget to set the `WKUIDelegate` otherwise this method won’t be called.

```swift
 webView.uiDelegate = self
```

And that is all!

This is also published on my [blog](https://nemecek.be/blog/1/how-to-open-target_blank-links-in-wkwebview-in-ios) where you can check other [Swift & iOS](https://nemecek.be/blog/swift-and-ios) articles. 

_Is anything not clear? Do you want more information? Ask in the comments and I will do my best to help you. Thanks for reading!_

[![Scan it - wide banner](https://nemecek.be/media/images/scanItWideBanner.png)](https://apps.apple.com/app/scan-it-scan-and-export-pdf/id1509634112)
-- 
Need to *focus on your iPhone*? Get free WebBlock app for scheduled website blocking from the [App Store](https://apps.apple.com/us/app/webblock/id1513121732)!
🛸 Web Components: Components on Steroids.
Tags: webcomponents, webdev, javascript
Published: 2020-01-31 14:45:33

Lately, there has been a lot of buzzes and hype on web components, but not everyone knows exactly what it is, how it works or why it's even needed, that's going to change soon because we are going to be taking a peek 🤓.


---

## 🤔 What are Web Components?


Well according to MDN Web Docs.

**Web Components is a suite of different technologies allowing you to create reusable custom elements with their functionality encapsulated away from the rest of your code and utilize them in your web apps.**

But I would like to simplify that:

**Web Components allows you to create components or UI controls that are universal and can be reused in any web app, regardless of what the app is built with, it can be React, Vue, Angular, Svelte, etc or even without a framework (vanilla js, HTML5, CSS3).**

## Why do we even need Web Components? 🤷🏻‍♂️

Reusability of code has proven to be useful, and before web components, it's been quite difficult to implement reusable UI controls that work across diverse frameworks and projects.

Web Components allow us to build reusable UI controls, using built-in Web APIs.


---

## How does it work? ⚙️
Web components consist of 3 main technology, which can be used to build custom elements.
- Custom Elements
- Shadow DOM
- HTML Templates

These are the building blocks of web-components, can be used together or in isolation. Let's take a deeper dive.

### Custom Elements:
These are custom HTML elements that have a custom behavior, functionality, template, and tag name built on a set of javascript API called Custom Elements API.

Let's create a simple <hello-world> element.

{% codepen https://codepen.io/marvinified/pen/oNgJpVZ %\}

### Shadow DOM:

This is for isolating components (CSS, Javascript) of a custom HTML element by encapsulating its resources in a DOM different from the main document's DOM.
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.

Let's have a feel of the shadows:

{% codepen https://codepen.io/marvinified/pen/KKwbQpO %\}


### HTML Templates:

The <template> and <slot> elements let you write mark up templates that are not rendered but can be reused multiple times as the base of a custom element.

It's time to create some template:


{% codepen https://codepen.io/marvinified/pen/BayvYKv %\}


You should be ready to explore web components now.


---

Resources:
MDN web documentation: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements



---

More to come on web components, watch out 🚩
Daily Challenge #177 - Supersize Me
Tags: challenge
Published: 2020-01-31 14:30:12

---
title: Daily Challenge #177 - Supersize Me
published: true
series: Daily Challenge
description: Supersize these integers by rearranging them into their largest value. 
tags: challenge
---
###Setup
Implement a function that rearranges an integer into its largest possible value. If the integer is already in its maximum possible value, simply return it. 

###Examples
`superSize(123456)` //654321
`superSize(105)` //510

###Tests
`superSize(513)`
`superSize(2020)`
`superSize(4194)`
`superSize(608719)`
`superSize(123456789)`
`superSize(700000000001)`
`superSize(666666)`

Good luck!

***
_This [challenge](https://www.codewars.com/kata/5709bdd2f088096786000008) comes from ozymandias1 on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
How to Embed CodePens into your dev.to posts - It's easy.
Tags: beginners, tutorial, discuss
Published: 2020-01-31 14:28:06

Hey Devs, 

So I recently started writing blog series to share and help me keep track of some courses I have been taking. The only challenge I had was trying to figure out how to display and demonstrate the way code works on the dev.to platform itself. <em>I literally tweeted asking someone to do a tutorial.</em> 

Turns out it is really as simple as typing
```
{% codepen https://codepen.io/cassidoo/pen/MyaWzp %}
```
just make sure to avoid putting the back ticks that cause the black background.

So if it is done correctly, 
{% codepen https://codepen.io/cassidoo/pen/MyaWzp %}

this should happen.
<em>Ps. I used one of <a href="https://dev.to/cassidoo"> Cassidy's </a> codepens.</em>

Yep so IT IS really simple.
I am happy to answer any questions or demonstrate in any other way possible. 

Thank you for reading.
Ruby On Rails for 2020?
Tags: ruby, rails
Published: 2020-01-15 13:30:18



The initial release of <a href="https://codersera.com/blog/ruby-on-rails-in-2020/">Ruby on rails</a> was on 13 December 2005 and in its initial years, it greatly affected the web app development through new features that comprise Seamless database table creation, a scaffolding of views to allow the rapid application development.

<img src="https://codersera.com/blog/wp-content/uploads/2019/11/r1.jpg">

ROR or <a href="https://rubyonrails.org/">Ruby on Rails</a> is older and mature technology to use but in the last couple of years, it has been facing a difficult time as many new technologies came over by taking over this sector. Some people say Rails is dead and it isn’t worth it but here we are going to see why it’s worth learning in 2020.

<B>Where Has ROR Been The Best</B>

Rails have been the talk of the town and it is quite an old language. There are a few reasons that make the Rails best and really tough to compete. So, we would be looking for those reasons.

<B>Simpler business logic Execution</B>

ROR has a simple and fast process of implementation for difficult business logic. For example, you need API for your application at the earliest so you can ask the developer. Rails developers can develop it really fast. You have to put the front- end framework like React and Vue and you are done.

<B>Huge Collection of Gems</B>

Ruby has a huge collection of gems created by its developers. They act as a bridge to fill in the gap left in web apps and their services. And the best thing about them is that they are free for commercial use. And the minor things that might be left by the development team can be cleared with the help of these.

Ruby collection has made it really easier for developers to use it. It is like a readymade gem for developers when they get stuck at developing some features but they have it sorted with gems.

There are various companies that use Ruby on Rails in their products and apps that we would be discussing later.

<B>Rapid development Process</B>

Rails or ROR is known for its fast development process. Developers use Ruby on Rails to develop a project for its quick nature and creating a project with Rails is quite easy.

There is a difference of 40 to 45% in terms of speed in creating a project with ROR instead of Stacks. In layman terms, if a developer uses Stacks for developing a project then it will take 40% extra time than Rails.
A Quick Guide to Selecting HTML Elements with CSS
Tags: css, html, webdev, beginners
Published: 2020-01-31 13:46:14

Knowing when to use a particular selector can be a chore. In this short post, I'll show you how to know when exactly to use different types of selectors when styling with CSS.

<h4> 1. Type selector</h4> 
Use this when you need to style all or most of the instances of an HTML element the same way

Here's a quick example:

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


<h4> 2. ID selector</h4>
If you want to style a unique element, this is your best bet. You should use an ID selector for only unique styles you don't want to repeat again. This is because IDs are unique elements in HTML and can only be used once in a page.

Here's an example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9lteesrjdscasteete0l.png)

<h4> 3. Class selector</h4>
If you have elements that are reusable and specific, class selectors are great for those.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o484h4smdljh3gw32qmg.png)
  
In the example above, .beauty-products can be used for multiple HTML elements in your code and they will all be aligned to the left and have a color of pink. 

<h4> 4. Descendant selector</h4>
In CSS, a descendant selector is one that selects the elements that are descendants of a specified element. For instance, if you have a div element that houses a h3 element and a p tag, the hierarchy will look something like this:

div element - superior/parent element
h3 element - descendant element
p tag - descendant element

To style these descendant elements, you should use a descendant selector.

Here's an example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9bcdeuxzrakw4v51bssh.png)

Ideally, you should not go deeper than three levels like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ly2q2kxmzfwt03f98p9.png)


While it actually works, it is not recommended as many selectors can cause your page to load slowly. 

So, that's how you choose selectors in CSS. Hope you've found this post helpful!
Website vs. Web Application: the differences you need to know.
Tags: webdev, javascript, beginners, html
Published: 2020-01-31 13:38:46

“Anything that is accessed through a web browser is a website” - it’s a thought of the end consumer and general public and it’s totally ok for them. 

But this article is not for them, it’s for you the developers 😎 who should know the differences between these two to better serve your customer needs and also it’ll help you to understand the requirements when developing your digital/tech business.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v73lel9myp67a7wfjida.png)
###What is a website? 🖖

A website is simply some static web pages built for displaying and updating content for people to see and know about your products or services. For example: if you want to get subscribers for your newsletter or you may want customers to fill up a contact form, that’s when you need a website. A website is a one-way interaction.

**Some websites example:** TechCrunch.com, TheVerge.com, KausikDas.com


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kk7ro5mwnxmkptrvewl4.png)
###What is a Web Application? 💪

A web application or you can say web app is a two-way communication system. Just like mobile apps are software for mobile devices, web apps are software running on web browsers. Web apps are fully interactive to the users and perform some business operations also. In simple words, Every web app is a website but every website is not a web app.

**Some web apps example:** Linkedin.com, Amazon.com, Gmail.com


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/llh3a5px2i9qyx3qqfdq.png)
###What’s best for business? 🤔

At this point, it should be clear that a web app is a better choice for most of the situations, especially for modern-day tech-based businesses like E-commerce, SaaS and many more. If it's a small service-based business where it doesn't offer any physical or digital product then a simple website showing the business information will be enough. But in other cases, a web app will be the best bet for you.


Thank you for reading, I hope this is helpful to you. If you have any questions about it or anything else, let me know in the comment section below. 👇

For tips on software development and programming follow [**Kausik Das**](https://www.kausikdas.com) 😃🙏

Linkedin: [**@ikausik**](https://www.linkedin.com/in/ikausik/)

Twitter: [**@kausik47**](https://twitter.com/Kausik47)

Instagram: [**@ikausik**](https://www.instagram.com/ikausik/)
ASP.NET MVC Spreadsheet Viewer - Spreadsheet File Viewer
Tags: webdev, csharp, dotnet
Published: 2020-01-31 13:36:07

If you are looking for a simple and easy to code ASP.NET MVC Spreadsheet File Viewer, please have a look at the following article. It is a comprehensive tutorial along with the source code on how to create a Spreadsheet File Viewer in ASP.NET MVC using C# within a few steps. Read the article and download the source code [ASP.NET MVC Spreadsheet - An Excel Viewer](https://blog.aspose.com/2020/01/31/view-excel-files-in-asp-net-mvc-csharp-excel-viewer/)
Learn How to Use Laravel Model Events
Tags: laravel, model, eloquent, events
Published: 2020-01-31 13:31:37

Do you know we can fire specific event from model without passing data from controller ? In this tutorial i am going to show you how we can do it without passing data from controller. 

Suppose, let think when new user is created then we will fire a event. For doing this we can pass newly created user from controller, but now we can do it without passing data. Let's try.

https://www.codechief.org/article/learn-how-to-use-laravel-model-events
Note to Self: The Tests are not to blame
Tags: rspec, testing, tdd
Published: 2020-01-31 13:28:25

**I remember this place**

The code works fine. Like, the program does what it's meant to, so why are the tests now acting up?

**The heck is rspec?**

I'd done a bit of programming before I started at a bootcamp last year, but testing was completely new. I remember talking to the rest of the cohort on Slack, and the general attitude was 'my program works, but these tests aren't passing'.

**But soon**

A week later, we were making our own tests, and everyone was suddenly very into testing. Very clearly useful, how were we ever programming without _testing_ before now? Madness.

**And then**

Darn these tests, they're holding me back!

**The point is**

It's easy to slip into a mindset where tests appear to be working against me, despite the fact that I made these tests, so...am I the enemy?
Yes. Tests are also programs that can be filled with bugs, and if the 'real program' works but my tests don't, then the program doesn't work.

If nothing else, tests help you understand how a computer understands your program, so I have to consider how every change I make will be interpreted.

Iterate on code, and iterate on yourself.
Quick developer tools tip: simulating dark/light colour mode
Tags: development, browsertools, darkmode, lightmode
Published: 2020-01-31 13:24:42

---
title: Quick developer tools tip: simulating dark/light colour mode
published: true
description: How to simulate different rendering modes using browser developer tools instead of changing to OS
tags: development,browsertools,darkmode,lightmode
---

Newer operating systems come with a dark/light mode option and also a "prefers reduced motion" mode. This also affects our products and we should test them in these modes to make sure there is no glaring problem. There is also a high contrast mode in Windows which is an accessibility feature that should be on our radar to test for. 

Now, to avoid having to change your whole OS to test for this, browser developer tools have simulators for these modes. 

In Microsoft Edge, these are in the "more tools" section. 

Here's the journey; 

* Click the "..." 
* Select "More tools"
* Select "Rendering"
* In the lower console, scroll down to "Emulate CSS media feature prefers-color-scheme" and toggle.

Here's [a screencast showing it in action](https://youtu.be/w8FpovkqEeQ) .

{% youtube w8FpovkqEeQ %} 

If you prefer screenshots of the journey, here they are: 

<img src="https://christianheilmann.com/wp-content/uploads/2020/01/rendering-menu-1024x856.png" class="hero" alt="Finding the rendering menu in Microsoft Edge devtools">

<img src="https://christianheilmann.com/wp-content/uploads/2020/01/color-scheme-emulation-1024x384.png" class="hero" alt="Colour scheme emulation menu in Microsoft Edge devtools">

Now, on a personal note, I think these are kind of hidden and I am not surprised people don't know about that. Given that we are also considering extending these to add more emulations (like high contrast mode) the question is what we could do to make this easier. 

One way is to use the keyboard shortcuts. You can open the developer tools and press Ctrl/Cmd + Shift + P and type "dark" or "light". Make sure to select the rendering parts of the menu though and not switching the theme of the devtools themselves. 

{% youtube 6NhVm_C1xPk %} 

<img src="https://christianheilmann.com/wp-content/uploads/2020/01/keyboard-switching-1024x473.png" alt="keyboard access to simulator" class="hero" />

This is not a Microsoft Edge specific functionality, any Chromium based browser has this. 

Do you have any idea how to make this even easier? Please report issues you find using the feedback tool in the developer tools: 

<img src="https://christianheilmann.com/wp-content/uploads/2020/01/feedback-in-devtools-1024x423.png" alt="Feedback mechanism in developer tools" class="hero">

You can also always ping me <a href="https://twitter.com/codepo8">@ codepo8</a> or the official Microsoft Edge Devtools account <a href="https://twitter.com/EdgeDevTools">@ EdgeDevTools</a> on Twitter.
What is Minikube and Kubectl? 🤔 Setup a Minikube cluster for Kubernetes Beginners
Tags: kubernetes, docker, devops, beginners
Published: 2020-01-31 13:10:09

Usually in a production cluster setup you will have multiple master and worker nodes on separate machines. 💪🏼

But what ***if you want to test something on your local machine or try something out?*** Setting up the whole cluster would be difficult or even impossible. 🤨

For that use case you can use _minikube_: a ONE Node cluster, where the master and worker processes are ***on the same machine***.

_Kubectl_, the command line tool for Kubernetes, then ***enables the interaction*** with the cluster: to create pods, services and other components.


In the below video I’ll explain everything in more detail with animations and show a demo of installing these components and start the minikube cluster.

{% youtube E2pP1MOfo3g %}

-----------------

You can follow me on [Twitter](https://twitter.com/Njuchi_) and [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1).
Truths about code optimization & developer careers
Tags: todayilearned, beginners, career
Published: 2020-01-31 13:00:15

*TL;DR notes from articles I read today.*

### [Truths about code optimization](http://bit.ly/37FeahB)

- Make sure you start with working code in the first place and have good unit tests so that speeding it up does not break anything.
- Don’t assume you know the problem. Run your code with a profiler and see which bits are the slow ones before you start to write new code. Your obvious best guess could well be wrong.
- As you optimize your code, run the profiler after every change to check whether the change actually helped and whether there is a new bottleneck now. 
- It is obvious but if a change did not measurably help, take it out no matter how brilliant you think it was. 
- You can always keep on making things faster, lighter, cheaper but it will also gradually make the code harder to read, longer, complex. Know when to stop. 

*[Full post here](http://bit.ly/37FeahB), 5 mins read*

---

### [Hard truths for new software developers](http://bit.ly/2u1Go7J)

- Accept that you don’t know everything, that tech knowledge is competitive and that you have to keep working and learning to stay relevant throughout your career.
- Acknowledge that social and soft skills matter as much as tech knowledge. You will need to hold mature human conversations that solve human problems to grow through your career. 
- You don’t need to reinvent the wheel to make a difference. In the early years of your career, aim to learn about others’ thought processes and why things are being done the way they are. 
- You will not always get the help you need, so seek out a mentor you can trust, who is also invested in your success and with a 5-10 years’ experience gap.
- Your goal in the workforce is not just your success but that of the product. So assume that in interviews you are being evaluated not for accuracy but for brainstorming human factors that can affect the product’s success and learn to test for them. 

*[Full post here](http://bit.ly/2u1Go7J), 9 mins read*

---

### [Tips for more helpful code reviews](http://bit.ly/2RD9Qd3)

- Consider the impact of your words. If necessary, rewrite comments for empathy and clarity both. 
- Elaborate on your concerns to be more specific and to avoid ambiguity, even if it sounds more verbose. 
- While suggesting changes include code samples. Treat a code review as a public conversation, and remember even experienced developers can gain from ideas on implementation.
- Include a link to relevant documentation when referencing a function, commit or pull request. For concepts, link a blogpost. Make it easy for the author to get to things you reference with a single click.
- Offer to chat in person or on video call for clarifications, and volunteer to pair up and collaborate on any suggested changes. 

*[Full post here](http://bit.ly/2RD9Qd3), 5 mins read*

---

*[Get these notes directly in your inbox every weekday by signing up for my newsletter, in.snippets().](https://mailchi.mp/appsmith/insnippets?utm_source=devto&utm_medium=post08&utm_campaign=is)*