teleren/devto huggingface dataset:
Web Fullscreen Sheet with SFSafariViewController in SwiftUI
Tags: swift, swiftui
Published: 2020-03-29 21:20:42

---
title: Web Fullscreen Sheet with SFSafariViewController in SwiftUI
published: true
description: Creating Web Fullscreen Sheet with SFSafariViewController in SwiftUI
tags: swift, swiftui
---

![Web Sheet](https://media.giphy.com/media/W4idCFr6RlXX0ZEmhD/giphy.gif)

```swift

import SwiftUI
import SafariServices

struct ContentView: View {
    var body: some View {
        SafariButton()
    }
}

struct SafariButton: View {
    
    struct RootView: View, Hostable {
        @EnvironmentObject private var hostedObject: HostingObject<Self>
        
        var address = "https://example.com"
        
        func present() { // UIKit code
            let safari = SFSafariViewController(url: URL(string: address)!)
            hostedObject.viewController?.present(safari, animated: true)
        }
        
        var body: some View {
            Button(address, action: present)
        }
    }
    
    var body: some View {
        RootView().hosting()
    }
}

///=======

struct UIViewControllerView: UIViewControllerRepresentable {
    final class ViewController: UIViewController {
        var didAppear: (UIViewController) -> Void = { _ in }
        override func viewDidAppear(_ animated: Bool) {
            super.viewDidAppear(animated)
            didAppear(self)
        }
    }
    
    var didAppear: (UIViewController) -> Void
    
    func makeUIViewController(context: Context) -> UIViewController {
        let viewController = ViewController()
        viewController.didAppear = didAppear
        return viewController
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        //
    }
}

struct UIViewControllerViewModifier: ViewModifier {
    var didAppear: (UIViewController) -> Void
    var viewControllerView: some View {
        UIViewControllerView(didAppear:didAppear).frame(width:0,height:0)
    }
    func body(content: Content) -> some View {
        content.background(viewControllerView)
    }
}

extension View {
    func uiViewController(didAppear: @escaping (UIViewController) -> ()) -> some View {
        modifier(UIViewControllerViewModifier(didAppear:didAppear))
    }
}

class HostingObject<Content: View>: ObservableObject {
    @Published var viewController: UIViewController? = nil
}

struct HostingObjectView<Content: View>: View {
    var rootView: Content
    let hostedObject = HostingObject<Content>()
    func getHost(viewController: UIViewController) {
        hostedObject.viewController = viewController.parent
    }
    var body: some View {
        rootView
            .uiViewController(didAppear: getHost(viewController:))
            .environmentObject(hostedObject)
    }
}

protocol Hostable: View {
    associatedtype Content: View
    func hosting() -> Content
}

extension Hostable {
    func hosting() -> some View {
        HostingObjectView(rootView: self)
    }
}

///=======

import PlaygroundSupport

PlaygroundPage.current.setLiveView( ContentView() )
```
Absolute center position with CSS
Tags: webdesign, ui, webdev, frontenddev
Published: 2020-03-29 19:58:17

---
title: Absolute center position with CSS
published: true
date: 2020-03-29 19:55:38 UTC
tags: web-design,ui,web-development,front-end-developmen
canonical_url: 
---

# Absolute center position

One of very common problems many web developers come across is positioning content in the middle of container. There are different ways of achieving that, but in this post, I will cover how to do it by using absolute position.

![](https://cdn-images-1.medium.com/max/960/1*3ZzgCdy_Jkjo17ro3VyG6g.jpeg)

For this post I will be using simple HTML structure of just two elements where I will be placing element with ID content in the middle of element with ID container.

```html
<div id=”container”>
    <div id=”content”>
        Centered content
    </div>
</div>
```

### Step 1: Container

When you are positioning something absolute, position will be decided based on first parent element that has relative position. For this I will use element with ID container. I will also define its fixed width, height and background different from content element just so it is easier to see which element is which and their positions.

```css
#container {
    background: #eee;
    height: 500px;
    position: relative;
    width: 100%;
}
```

### Step 2: Absolute position

If we want to position content element to absolute center, we need to define its position to center. But there are few more things. We also need to define all positions to 0 and its margin to auto. Again, different background is just there for demo purposes to easier see which element is which.

```css
#content {
    background: #aaa;
    bottom: 0; 
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0; 
}
```

### Step 3: Define width and height

If you run this, you will notice that content element covers container fully. This is because we don’t have defined width and height for content. For this to work you will need to define those two properties. Otherwise, content will just grow to its position on each side, which is 0 in this case.

```css
#content {
    background: #aaa;
    bottom: 0;
    height: 100px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;  
}
```

## Conclusion

This is just one of several different ways to solve this problem. While it will work everywhere, there are some limitations you should be aware of. One of them is resizing and overflow of parent element that you would need to handle separately. Other one is that you are positioning content element, but content inside of it might not be properly centered. However, once you get to this point, everything else is much easier to solve.

Example code for this can be found in my [Github repository](https://github.com/kristijan-pajtasev/css-absolute-position-example).
Show DEV: I built a chrome extension to inspect element on hover
Tags: javascript, showdev, webdev, chrome
Published: 2020-03-29 21:01:16

---
title: Show DEV: I built a chrome extension to inspect element on hover
published: true
description: Chrome extension to inspect element on hover made with jquery and vanilla javascript
tags: #javascript #showdev #webdev #chrome
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/t7s0nctoagadp5dwtg55.png
---

Hi Devs,
My name is Himanshu Mishra, I'm an independent maker from India.
I recently launched a chrome extension that lets you inspect element on hover. It shows all the styles and HTML attributes in a sweet window which you can dock.
You can even live edit CSS, HTML attributes and content. It is jammed with nifty little features that make web design a smooth experience. You can know more about it [here](https://www.tryhoverify.com/).

![Hoverify demo](https://dev-to-uploads.s3.amazonaws.com/i/r42ay2knw7ntvjaa3bxf.gif)

## Development
I started working on it about 6 months ago, We don't do this but I decided on using vanilla javascript and jquery for it. Which gives me control over the final code and made build size significantly smaller (< 286KB). 
I made a custom build system that takes every javascript file in the source folder and minifies it. I wrote a small tutorial on it. [Check it out](https://dev.to/zicsus/writing-simple-obfuscation-and-minification-system-3395).
I even took this vanilla craze of mine to the landing page and rewrote it from React to simple HTML, CSS and javascript. 

The extension is available for every chromium-based browser. Sadly, other browsers like Firefox and safari do not provide permissions like debugger and capture API which make some of the features possible. Although I may add support to these browsers but some of those features may suffer. 

I would love to hear your feedback. Thank you!
Web Components
Published: 2020-03-29 20:36:14

Web Components are from a set of web platform APIs which allows the user to create new HTML tags that are customized and encapsulated for web pages and web applications. The web components are a suite of different technologies that ultimately allows the developers to create reusable custom elements. There are several advantages of using web components and for example, the functionality itself is encapsulated away from the rest of the code and it can also be utilized in the web apps creating efficiency. This is an example of why many business organizations like YouTube and GitHub use it for their business and web development. 

Firstly, being able to create reusable HTML elements can make the coding process extremely faster, easier, as well as increase the overall efficiency. The advantages web components can bring to the users during the process of development is very crucial, because, reusing the codes and quickly retrieving the useful stylized HTML to put into another place is much easier to understand and utilize. The ability to put any type of code across wherever on the web component makes the process consistent and rapid. Also, using web components can prevent the developers from getting error messages while constructing the codes, which eventually decreases the cost in the business.

Overall, web components are a standardized technology system that allows the creation of customized and reusable codes for development by sharing components across the company’s development platform. That is why I believe that current business organizations should utilize web components more for efficiency in their business web development. 

YouTube Video: https://youtu.be/JA-ieJ7YeC0
Let's talk about how powerful split function is
Tags: javascript, beginners, showdev
Published: 2020-03-29 20:27:33

---
title: Let's talk about how powerful split function is
published: true
description:
tags: #javascript #beginners #showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/g47tj96oqdduf0v512ei.png
---
`Split()` function in JavaScript is super cool. It looks into a given string and split it into an array.

```js
const array = "Jan\n Feb\n Mar".split(/\n/)

// ["Jan", " Feb", " Mar"]
```
So, if we are curious about knowing how many lines in a given string:

```js
const lines = "Jan\n Feb\n Mar".split(/\n/).length

// 3
```

Let's put our code into one function so we can develop it easily:

```js
/**
 * split string in each line and put it into array.
 */
function splitToLines(lines) {
  const linesArray = lines.split(/\n/);

  return linesArray;
}

const str = "Hello World\n How are you doing";
const strArr = splitToLines(str) // [ 'Hello World', ' How are you doing' ]
const strLength = strArr.length // 2
```
We may dive more into each line individually by counting words:

```js
/**
 * counts words in an array of lines.
 */
function countWords(linesArr) {
  let words = 0;

  // go into each line individually.
  linesArr.forEach(line => {
    // line1: Hello World
    // line2: How are you doing

    // let's trim the line to avoid spaces in the beginning.
    // split each line by spaces so we can count words in each line.
    const wordsArr = line.trim().split(/\s/);
    // line1-arr: ["Hello", "World"];
    // line2-arr: [ "How", "are", "you", "doing" ]

    words += wordsArr.length;
    // for line1: words equal to 2
    // for line1: words equal to 4
  });
  return words;
}


const str = "Hello World\n How are you doing";
const linesArr = splitToLines(str) //  [ 'Hello World', ' How are you doing' ]
const wordsNum = countWords(linesArr) // 6
const linesNum = linesArr.length // 2
```

It's fun, exactly like solving a puzzle. You start with the first piece and suddenly you nearly there. 

Think about it, if you have lines and words number, you can easily count characters in each word and calculate spaces. 

This is exactly how I built a function called [textics](https://github.com/jalal246/textics). It counts lines, words, chars and spaces for a given string using `split()` function and that all can be done with couple lines of code.

---

Do you like it? Please leave a ⭐️. I appreciate any feedback or PRs 👋👋👋
Web Components: The Future of Web Development
Published: 2020-03-29 20:27:19


BtoPro once said, "In 2019 the web created the foundation for what will be looked back on as a 2000 year leap forward in development capabilities." He was talking about web components. 

In many ways, web components are fundamentally shaping the ways in which the web development community thinks about code. Web components are a set of Javascript APIs that allows custom HTML tags that can be reused across all web pages and web apps that can be interpreted by all browsers. In other words, it is a standard way we can share and used everyone's complex code without compatibility issues. It is predicated on the, "use it once, use it everywhere" philosophy. 

What makes web components fundamentally appealing to developers? The core reason is that it's built on existing web standards. This means it doesn't rely on front end frameworks like React or Angular that are large and opinionated. In other words, web components will work on any website.

One of the most important aspects of web components that developers are starting to paying attention too with web components is style reusability. Web components make it easier to brand companies because it reuses code. For example, a university can create a web header using web components and reuse that same header or footer throughout all of their websites and pages. This saves in numerous time and money for organizations and developers. For instance, Brigham Young University utilizes web components for their sites and maintain a sense of brand uniformity across all of their sites, as well as countless other companies such as Xfinity, EA Sports, and YouTube. 

Time efficiency is another crucial aspect that makes web components so appealing. For example, Vaadin is an open-source Javascript framework that offers a headless experience that cuts back on development. Using this Vaadin grid can help developers create a stylish prototype within hours, in comparison to what use to take them months to develop.

Web components are also going to be changing the mobile development as well.  Progressive web apps take existing web applications and allow their code to be experienced like a mobile application. As the mobile development community shifts its focus to progressive web apps, web components development could potentially garner an even stronger focus as its components will be reused by developers. 

In conclusion, businesses can benefit from this because of its design consistency and ground-breaking implications for future-use as the business landscape constantly changes. 

YouTube Video: https://youtu.be/UD7NHv1Mcuc
2. The dot(.)
Tags: regex, java
Published: 2020-03-29 20:04:10

The dot(.) matches anything except a new line.
e.g : Regex Pattern :-  **.**
      Test String : **Hi everyone**.
*Sample code in java:*
import java.io.*;
import java.util.Scanner;
import java.util.regex.*;
public class RegexSearch {
     public void Pattern (String Regex_Pattern){
          Scanner sc = new Scanner(System.in);
          String Test_String = sc.nextLine();
          Pattern p = Pattern.compile(Regex_Pattern);
          Matcher m = p.matcher(Test_String);
          while(m.find()){
              System.out.print(m.group());
          }
     }
}
public class Main{
    public static void main (String[] args){
        RegexSearch obj = new RegexSearch();
        obj.Pattern(".");
   }
}

 [you can view the code here also.] (https://onlinegdb.com/BkCyTdC8U)
 
 **Do read my first article about regex.**{% link https://dev.to/shalya21/1-introduction-about-regex-3ig3 %}
Lacrosse prediction update #1
Tags: showdev, python
Published: 2020-03-29 19:29:55

It is apparent to me that I am very rusty with python. Yes I had a class in college for it and I’ve done a couple of small projects with it but I’ve really hit some things with this project that I’ve never done before. 

Starting this project I’m going super simple just to get something out there and to do it before I get too bored with the it. I’m just comparing to stats for teams and whoever has the better stat gets the point. No machine learning with it just yet. 

For each game I’m using 12 stats for each team. I then send each team stat over to a method and compare them. For most of the stats I just see which one is greater and then award the winning team the point. Whichever team has the most points and is predicted to win. If that teams win the same amount of categories then I do the high technical method of randomly picking a winner. But in my testing I haven’t needed this option. 

I know it’s not a perfect method but it’s fine for me know. I’ve tested it on four games thus far and it’s 50% accurate. 🤷‍♂️
So there’s that. 

For this part of the project I still have a couple things to do before moving on. I need to fix the csv reader so I can put all the game in at a time and list out the winners. Once I get that I’m going to run the 5 years it data I have. That way when I get the learning model figured out I can compare and see which one was more accurate.

This is one of those projects that really has no purpose other than for learning and as a way to bring two of my passions together.
1.Introduction about Regex 
Tags: regex, java
Published: 2020-03-29 19:23:10

Regular  expression is a sequence of characters used for searching of pattern or matching of pattern.
e.g : Regex Pattern :- Java
      Test String :- **Java** , C and Python all are programming languages.

**Sample code in java :**


import java.io.*;
import java.util.Scanner;
import java.util.regex.*;
class RegexSearch {
    public void Pattern (String Regex_Pattern){
        Scanner sc = new Scanner (System.in);
        String Test_String = sc.nextLine();
        Pattern p = Pattern.compile(Regex_Pattern);
        Matcher m = p.matcher(Test_String);
        System.out.println(m.find());
    }
}
public class Main{
   public static void main(String[] args){
       RegexSearch obj = new RegexSearch();
       obj.Pattern("Java");
}

**Input:** Java , C and python all are programming languages.
**Output:** true

[You can view code here also.](https://onlinegdb.com/HkpBNd088)
                **Have a nice day , Coders.**
Hacking, Programming music. Electronic Intense concentration
Tags: programming, spotify, playlist, music
Published: 2020-03-29 19:20:27

---
title: Hacking, Programming music. Electronic Intense concentration
published: true
description: Background music while coding/programming, hacking, PenTest, focus. The right music allows to catch the flow and improve the concentration and performance during the task. No disturbing vocal, Pure Electronic! 

tags: programming, spotify, playlist, music,
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1881hh5pnc48vjm6orzq.jpg)

Intense, "movie-like" sensation for coding/programming, hacking, PenTest & focus. Carefully sorted out tempo with an appropriate pace. Dark, but not gothic ,not gloomy, Just enough and proper.

If you want to add music suggestion, I am gladly review it and as long as it fit with the mood, it can be included. Just give comments

Spotify [link](https://open.spotify.com/playlist/4Z57FE7zT7tE9ijo1rQWN3?si=l63c4gjKQ_iKWrwTNK-kUA)


<iframe src="https://open.spotify.com/embed/playlist/4Z57FE7zT7tE9ijo1rQWN3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Rearranging for WFH
Published: 2020-03-29 20:53:33

---
title: Rearranging for WFH
published: true
date: 2020-03-29 19:09:05 UTC
tags: 
canonical_url: https://www.gilcreque.blog/2020/03/29/rearranging-for-wfh.html
cover_image: https://www.gilcreque.blog/uploads/2020/918bf8695e.jpg
---

Did some rearranging of my office area yesterday to accommodate my newish coworkers and classmates. I separated desks and now my side desks sits behind me with my iMac and 3D printer (and my Nanoleaf until I get more command tape). My son’s gaming PC and desk will be in front so we will share this space when he is done with school work. He’ll be in his room during school hours. I have to put together my wife’s desk and put it in the living room where my son’s desk used to be. Anyone else have to make arrangements for better WFH for all?

![](https://www.gilcreque.blog/uploads/2020/918bf8695e.jpg) ![](https://www.gilcreque.blog/uploads/2020/cc5bee0c01.jpg)
HELLOWORLD.BAT - VanillaJS plain text editor
Tags: javascript, css, codepen, showdev
Published: 2020-03-29 19:03:30

Inspired by this week's Codepen challenge to create something related to "HELLO WORLD" using Javascript, I decided to mimic an old-school DOS terminal.

{% codepen https://codepen.io/5t3ph/pen/GRJPeeQ %}

_If you missed the typing animation, click "Rerun" in the bottom right of the Codepen frame._

This uses Javascript to "type" the content, and CSS animation for the cursor.

The layout was made in a snap with CSS grid 😎

While not truly a full editor, you can type in your own content thanks to the humble `contenteditable` HTML attribute.

It would be neat to level this up by actually moving the cursor animation wherever you click, and perhaps provide some kind of fun functionality to create working menus 😊 Feel free to fork and make it happen!
Simple use of ⚛️React useState Hook
Tags: javascript, react, showdev
Published: 2020-03-29 18:55:45

Just an ordinary day and was jumping around videos on YouTube and came across a short video tutorial on creating a react app that uses the [Advice Slip API](https://api.adviceslip.com/). It is a pretty easy and quick example but in this tutorial react's class component was used to make the app.

So I thought let's re-develop it using the latest React Hooks, so used the [`useState`](https://reactjs.org/docs/hooks-state.html) hook of React v16.8 to re-implement the app.

### [Live Demo](https://61mzz.csb.app/)
### [Codesandbox Link](https://codesandbox.io/s/quizzical-paper-61mzz)

###Following is the code:
File: `App.js`
```react
// Importing useState from react
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  /**
   * We declare a new state variable(advice) by calling the useState Hook,
   * and set it to ''(empty string) initially.
   * React will remember its current value between re-renders,
   * and provide the most recent one to our function.
   * If we want to update the current advice, we can call setAdvice.
   */

  const [advice, setAdvice] = useState("");

  const fetchAdvice = () => {
    const adviceAPI = "https://api.adviceslip.com/advice";

    // Fetch a random advice slip
    fetch(adviceAPI)
      .then(response => response.json())
      .then(data => {
        // destructuring the advice from data
        const { advice } = data.slip;

        // update to new advice we just fetched
        setAdvice(advice);
      })
      .catch(error => console.error(`Error: ${error}`));
  };

  return (
    <div className="app">
      <div className="card">
        <h2 className="heading">{advice}</h2>
        {/* Trigger fetchAdvice on button click */}
        <button className="button" onClick={fetchAdvice}>
          <span>GIVE ME ADVICE!</span>
        </button>
      </div>
    </div>
  );
}
```

File: `styles.css` If you want to decorate it a bit.
```css
body {
  background-color: #666;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: #999;
  max-width: 500px;
  padding: 12px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 60%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}
```

### Credits
This is a re-implementation of Adrian Hajdin's work 👏:
- 📝 Source Code: [GitHub](https://github.com/adrianhajdin/advice_app/blob/master/src/App.js)
- 🎥 Video Tutorial: [YouTube](https://www.youtube.com/watch?v=o5CdCETh8cQ)