teleren/devto huggingface dataset:
Adding a Unified `NSToolbar` to a SwiftUI window
Tags: macos, swiftui, swift, appkit
Published: 2020-03-30 00:20:19

---
title: Adding a Unified `NSToolbar` to a SwiftUI window
published: true
description: Wrangling the a popular AppKit pattern in to the SwiftUI world
tags: macos, swiftui, swift, appkit
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/15yj8l59hfcq5lk9n61a.jpeg
---

Previously on "Adventures in SwiftUI", I [discussed adding an `NSTableView` to a SwiftUI project](https://dev.to/hugh_jeremy/adding-an-nstableview-to-a-swiftui-view-212p). I received a follow up question from Axel:

{% twitter 1244403543584526341 %}

To be honest, I don't have the faintest idea how I did this. So, I'll dig through the code and blog the process. That way, if anyone else has the same question, Google will hopefully land them here.

First stop, where do we create the `NSWindow`?

```swift
@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    var window: NSWindow!


    func applicationDidFinishLaunching(_ aNotification: Notification) {
    // Snip
```

It's declared in the AppDelegate. I can't recall if all SwiftUI apps depend on the AppDelegate pattern... If yours does not, then the following is probably still useful, but you will likely need to adapt to your circumstances.

Here is the point of `NSWindow` creation:

```swift
// Enclosing code snipped
window = NSWindow(
    contentRect: NSRect(x: 0, y: 0, width: 640, height: 480),
    styleMask: [
        .titled,
        .unifiedTitleAndToolbar,
        .closable,
        .miniaturizable,
        .resizable,
        .fullSizeContentView
    ],
    backing: .buffered,
    defer: false
)
window.center()
window.title = "Draft Sport"
window.titleVisibility = .hidden
window.setFrameAutosaveName("Draft Sport")
window.contentView = NSHostingView(rootView: contentView)
```

The key thing to note here is the provision of the [`.unifiedTitleAndToolbar`](https://developer.apple.com/documentation/appkit/nswindow/stylemask/1644619-unifiedtitleandtoolbar) mask in the style mask array.

Next, we need to create the actual toolbar content.

```swift
// Enclosing code snipped
let toolbarButtons = NSHostingView(rootView: ToolbarButtons())
toolbarButtons.frame.size = toolbarButtons.fittingSize

let titlebarAccessory = NSTitlebarAccessoryViewController()
titlebarAccessory.view = toolbarButtons
titlebarAccessory.layoutAttribute = .trailing
```

Finally, we add the `titlebarAccessory` to the `NSWindow` instance:

```swift
// Enclosing code snipped
window.toolbar = NSToolbar()
window.addTitlebarAccessoryViewController(titlebarAccessory)
```

And voila, you've got a unified toolbar. Watch out though: I haven't gone any further with this. I imagine there are going to be all sorts of challenges developing the typical behaviour expected of a unified toolbar.

I hope this helps you Axel, and anyone else enjoying SwiftUI!

[Hugh](https://twitter.com/hugh_jeremy)
TIL: git branch can show more than only the name of branches
Tags: webdev, git
Published: 2020-03-30 07:00:08

---
title: TIL: git branch can show more than only the name of branches
published: true
date: 2020-03-30 00:00:00 UTC
tags: webdev, git
canonical_url: https://www.stefanjudis.com/today-i-learned/git-branch-can-show-more-than-only-the-name-of-branches/
---

Today I came across [How To Make Life Easier When Using Git](https://www.smashingmagazine.com/make-life-easier-when-using-git/) by [Shane Hudson](https://twitter.com/shanehudson). The article shares lots of useful git tricks, and one particularly caught my eye.

When you're working with git, you'll deal with several local branches. To get an overview of all the branches, you can use `git branch -l`.

```
$ git branch -l
  JonUK/master
  adding-draw.io
  fix-contributors
  fix-puppeteer
* master
(END)
```

I learned that the `branch` command also provides two other flags that can come in handy. `git branch -v` shows you the list of branches, including their last commit.

```
$ git branch -v
  JonUK/master     6fce128 Used an IIFE for better browser compatibility
  adding-draw.io   7351a8c draw.io added to helper library
  fix-contributors 75da189 Set github access token to maybe avoid rate limiting
  fix-puppeteer    a2b633b Fix headless chrome on zeit
* master           a04c5bb Update desc of css arrows
(END)
```

And `git branch -vv` even goes further and shows you the last commit plus a possibly available tracked remote branch. 😲

```
$ git branch -vv
  JonUK/master     6fce128 Used an IIFE for better browser compatibility
  adding-draw.io   7351a8c draw.io added to helper library
  fix-contributors 75da189 Set github access token to maybe avoid rate limiting
  fix-puppeteer    a2b633b Fix headless chrome on zeit
* master           a04c5bb [origin/master] Update desc of css arrows
(END)
```

That's pretty cool, and I'll switch my workflow from using `git branch -l` to using `git branch -vv` in the future.
Callback Functions
Published: 2020-03-29 23:48:36

Reading through code can oftentimes become confusing. Keeping track of functions and variables is hard enough, but when you notice that a previously defined function is being used as an argument to another function things can become complicated. Thankfully there are valid reasons why this sometimes occurs and we are going to explore those use-cases. The concept that we are discussing is a Callback Function. 

MDN docs defines a callback function as "a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action." 

Here's an example of a simple callback function...

```javascript
function feedDog(dogName, callback) {
  alert(`Time to feed ${dogName}!`);
  callback();
}
function postMeal(){
  alert("Let's keep those teeth pearly white... Here's a dental treat");
}
feedDog('Bruno', postMeal);
```

First, I'm defining a function, 'feedDog', which creates an alert to feed a dog by name. Inside 'feedDog' I call a function, 'callback', that is not yet known. Next I define the function 'postMeal', which creates an alert to give the dog a dental treat. 

To bring it all together, I call 'feedDog' and pass two arguments - the dog's name and the 'postMeal' function. At this point, I could have passed any function as the second parameter. When the code executes it creates the first alert to feed 'Bruno', then calls 'postMeal' which creates an alert to give him his dental treat. 

This example could have easily been consolidated to one function. So when are callback functions particularly useful? 

Callback functions are very useful for the handling of events. If specific functions should only execute for predetermined user actions (a mouse click, scroll, text entry - all examples of events), the use of an 'event listener' is common in JavaScript. An event listener acts as a callback function to start a process that was triggered by the user action.

Callback functions are also useful when managing asynchronous functions. JavaScript executes asynchronously, which means that it does not wait for a previous function to finish before executing the next function. This is sometimes problematic because a function may require information that is provided upon the completion of a previous function. To prevent an asynchronous function from continuing without prerequisite data, it is helpful to use an asynchronous callback. An example of an asynchronous callback is '.then', which is commonly found in fetch requests.

The use of callback functions is something that frequently appears in JavaScript code. While some callback functions become maze-like, the typical use of callback functions makes our lives easier as programmers and expands the possibilities of asynchronous code. 

Resources:

1. [MDN web docs - Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)

2. [MDN web docs - EventTarget.addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)
Why Businesses Should Consider Web Components
Published: 2020-03-29 23:39:06

Web Components are a very convenient way to create custom HTML tags that are usable across many browsers. They also integrate with any JS framework which adds a lot of flexibility and mobility to your web app. With Web Components, you are not tied to one framework because all of your components will work in any other framework just as well. You don't need to rewrite any components. Web components also helps with brand consistency. You just have to create a component one time and you can then use it across as many projects and pages as you wish. This makes it very easy to have a standard way to present content. For more information, check out my [YouTube video.] (https://www.youtube.com/watch?v=Tfr4mwQ0egs&feature=youtu.be)
Caveats When Choosing 3rd Party Libraries For Your Application
Tags: javascript, architecture
Published: 2020-03-29 23:35:45


# Introduction

This is the first of a series of articles providing insights on choosing 3rd party libraries.

There are caveats and pitfalls to be aware of which may have a huge impact on your application, such as complete code rewrites, resource usage, etc.

Such caveats might have overlooked, not stated on the documentation, or hidden somewhere in the issues list.

Hence, one has to do their due diligence when choosing 3rd party libraries and study their ABCs (architecture, behavior and codes) before using them.

Some of actions to take before on-boarding a library are:
- searching online for more information, reviews, comparison with alternatives
- looking into the issues list
- going through the code and dependencies (if library is opensource)
- testing out with debugging tools, monitor console, network requests, slow network conditions

---

# The Caveat

"Hidden" performance issues. On the surface the library may look to be working well.

However, it may be written in a way that can cause usability problems in poor network environment, as we shall see...

---

# The Example

Here we look at a feature rich phone number input library [vue-phone-number-input](https://github.com/LouisMazel/vue-phone-number-input) and its [demo site](https://louismazel.github.io/vue-phone-number-input/). **NOTE:** A few other Javascript country flag selection libraries has the same caveat too!

The evaluation on the demo site was performed on **18 March 2019 1130Hrs +8GMT** 

![gotcha - initial load](https://dev-to-uploads.s3.amazonaws.com/i/iu74gu621xdc4ee3i6jf.png)

The initial load looks alright, with only a few requests fired.

---

# The Issue

When you click the country dropdown with flag, you see many HTTP requests (refer to image below). There are about **240** of them, each of them representing a country flag.

This can be a problem on slow or intermittent networks. Also seeing 240 requests  being made on a single click just does not look professional.

![gotcha - flags load](https://dev-to-uploads.s3.amazonaws.com/i/48lu8jnns6wtvz56tigq.png)

---

# Some Suggestions

- Look for similar libraries that uses Intersection Observer to lazy load the images, or load the images as a single image and then use offsets to get the portion you need. You basically want to reduce the number of requests
- Learn more about i18n in-depth. Countries and flags are politically sensitive, some libraries have different list of "recognized countries"
- You also need to consider number and date formats, LTR or RTL, character sets, etc. Balancing application size and language support
- Try to go Native as much as possible
- Consider CSS customization flexibility and frontend UI being used
- Worst case, you may need to implement your own better solution... really!

---

Thank you for taking you time to read this article. Hope it has provided you some useful insights.
Idea: An app to troll people violating social distancing 
Tags: javascript, 100daysofcode, webdev, showdev
Published: 2020-03-29 23:23:15

COVID-19 fun experiment.
 
**Target user - Police.**
Because a common person should ideally practice social distancing.

## Features:
- Take their photos and upload on the app
- Add comments/reactions
- Post on favourite social media
- Virtual rewards for users catching more people violating 



### What else could we add to this?

--- 


I love jotting down my thoughts on my blog [NgNinja Academy](http://ngninja.com/)
For Web Components
Published: 2020-03-29 23:10:03

To my next employer,

Please consider using Web Components. Not only do they allow developers to streamline their commonly used processes and styles but it also allows them to reuse them, share them with others, or use other developers' web components.

An example of this would be Youtube and their usage of their own web components. When you open up Youtube you see a grid of videos with a thumbnail, time, view count, etc. To make the process of uploading videos more efficient they've created web components like thumbnail, details, and more. This way they don't have to write the same code for each video and just call the web component when and where it's needed. 

Using web components allows for a seamless and continuous design throughout an entire website with minimal work. It makes replication of similar things (buttons, videos, pictures, etc.) quick and simple by simply writing a single line of code rather than the dozens it would take otherwise. 

Understandably there are some skeptics, however, nothing is perfect. Whether it's a security flaw, design flaw, bug, or otherwise there are ways to fix them. Maybe the web component is too unsafe for the project at hand, if that's the case, don't use it and find a better one. If there isn't a better one, make one or find another web component to compliment that one to deal with its flaws. 

Best Regards,
A student looking for a job


For a slightly more in-depth explanation and example:
https://youtu.be/7DLICE24f5o
Top 10 Discord Servers For Developers
Tags: discord, social, productivity, motivation
Published: 2020-03-30 02:19:04

---
title: Top 10 Discord Servers For Developers
published: true
description: A list of top 10 discord servers that developers should know about
date: 2020-03-29 10:40:32 UTC
tags: discord,social,productivity,motivation
canonical_url: https://www.devsurvival.com/top-10-discord-servers-for-developers/
---

### What The Heck is [Discord](https://discordapp.com/company) ?

Discord is a community based chatting app that allows you to directly connect with other people within your niche. Although Discord was initially built for gamers, it grew and people from all walks of life started using it to empower their connectivity.

One of those communities is obviously the developer’s communities. I say **communities** , plural, because there are multiple sub-communities. One might focus on web development while another might focus on game development.

### Here Are My Top 10 Discord Servers To Join As a Developer

1. [Programmer’s Hangout](https://discord.me/coding)
2. [Devcord](https://discord.me/devcord)
3. [The Coding Den](https://discordapp.com/invite/code)
4. [SpeakJS](https://discord.me/speakjs)
5. [CodeSupport](https://discord.me/codesupport)
6. [Nodeiflux](https://disboard.org/server/425824580918181889)
7. [Lazy Developer](https://discordsl.com/server/4837/lazy-developers)
8. [TensorFlow](https://disboard.org/server/395520812347686912)
9. [Programmer Humor](https://discordapp.com/invite/ph)
10. [Python](https://discordapp.com/invite/python)

### Did I Miss One?

There are a lot of servers, so narrowing it down to a handful is quite a difficult task, so if I missed a very reputable one, please forgive me 😥 and post it in the comment below.

Here are the additional suggestions made by contributors like you:

[Reactiflux](https://www.reactiflux.com/)
[Vue Land](https://vue.land/)
[Typescript](https://discordapp.com/invite/typescript)
[Laravel](https://discordapp.com/invite/mPZNm7A)
[Qovery](https://discordapp.com/invite/Bed5FRa)
How Many Hours Do You Code In a Day During a Crisis
Tags: discuss, motivation, productivity
Published: 2020-03-30 02:44:09

---
title: How Many Hours Do You Code In a Day During a Crisis
published: true
date: 2020-03-29 22:40:32 UTC
tags: discuss,motivation,productivity
canonical_url: https://www.devsurvival.com/coding-during-crisis/
---

[![coding during a pandemic](https://www.devsurvival.com/static/5b6d4e418f644633a3c0bc80a77517a4/46713/virus.jpg "coding during a pandemic")](/static/5b6d4e418f644633a3c0bc80a77517a4/46713/virus.jpg)

  

At the time of writing this, I was under locked down due to the [coronavirus](https://www.cdc.gov/coronavirus/2019-ncov/index.html). There was not a lot that I could do to pass the time. I could waste time on youtube or browse the latest viral news. Instead, I decided to code and learn something new while I’m at it. Yeah yeah, “overachiever over hurr”. What? I like to code. Coding and **A LOT** of free time is a perfect combination.

For the last week or so, I have put in an average of 6-8 hrs a day ≈ a full day job without the pay.

### So what about you? What crisis are you in right now? How has that affected your productivity?
tsParticles v1.11.2 released
Tags: javascript, typescript, react, showdev
Published: 2020-03-29 21:39:00

# New tsParticles version released, 1.11.2.

## Release notes

- Fixed critical bug on polygon mask, that won't load correctly sometimes
- React.js ready

---

## Want to integrate in React.js?

I've forked the react-particles-js repository and added the tsParticles support.

You can checkout the fork here: <https://github.com/matteobruni/react-particles-js>

And the sample demo here: <https://github.com/matteobruni/react-particles-js-demo>

Hope this will be merged in the main repository.

---

## Useful links

Checkout the demo here: <https://particles.matteobruni.it>

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

---

## GitHub repo
<https://github.com/matteobruni/tsparticles>

##npm
<https://www.npmjs.com/package/tsparticles>

##yarn
<https://yarnpkg.com/package/tsparticles>

##jsDelivr
<https://www.jsdelivr.com/package/npm/tsparticles>

## CDNJS
<https://cdnjs.com/libraries/tsparticles>

---

Feel free to contribute to the project!

---

## Demos

Here are some demos!

### Characters as particles

{% codepen https://codepen.io/matteobruni/pen/xxGdyjd %}

#### FontAwesome characters as particles:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

### Mouse hover connections

{% codepen https://codepen.io/matteobruni/pen/GRJMgBp %}

---

### Polygon mask

{% codepen https://codepen.io/matteobruni/pen/yLNpgKW %}

---

### Background Mask particles

{% codepen https://codepen.io/matteobruni/pen/WNvYKgW %}

---

### COVID-19 SARS-CoV-2 particles

{% codepen https://codepen.io/matteobruni/pen/dyoZbMb %}

**Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!**

*COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME*
Damm tech
Published: 2020-03-29 22:30:38

---
title: Damm tech
published: true
description: How our relationships have been affected by tech.
tags: 
---
I have been 3 months just finding and thinking about how to be happy, asked many people how are they happy?  , and I can see that the things that feel them happy are the tiny things, go for karaoke to sing so loud,  feel free and without chains do whatever that they want, but why are they happy? 
But how this is connected with the tech?
it is true that our lives depend so much on our virtual life, how we are? how many likes we have, who are following us and who interacting with us, for me all this is important because I live in this century and I want to be informed about all, but I think that is affected me at this moment. so how we can find equilibrium about real life and virtual life?
(jajajaja)
I know, I have many questions and I want to find all answers but with time, for that reason, I will an experiment, I will try to uninstall all social networks, but how you can go without keeping connected for your family? or disconnected about your love?
Looking for a multi-tenants CMS 
Tags: tenancy, multitenancy, cms, backoffice
Published: 2020-03-29 21:51:35

I'm looking for a CMS/BackOffice/Admin site to help me manage my multiple B2B customers.

Our needs are:
- Providing a backoffice to our customers, where each user can connect to its own tenant and access its tenant's data only.
- The backoffice must be generated automatically from a data structure (db schema for instance)
- An API must be generated automatically from the data structure (allows to consume the data from web apps, mobiles, etc.)
- Ideally, this API would be a GraphQL server because that's what we use already. 
- Advanced permissions and roles for internal users, basically need to configure who can view which tables, or has update/delete permissions on which tables. It must be flexible and non-blocking for our business evolution/future needs
- The backoffice needs to be flexible about UI components/views so that we can create our own workflows, views and components.
- Theming capabilities of the backoffice, per tenant, would nice to have.

I've been looking for quite some time but none of my findings were satisfying.

Strapi is close but doesn't support anything related to multi tenancy, also permissions aren't as flexible as what we're looking for.

Any suggestion?
LearningPitStop Explains Web Components Security Implementation
Published: 2020-03-29 21:27:58

Web components are an extremely powerful tool for developers and businesses alike as they allow components to be broken up without the use of a framework making them virtually future proof.  Web components allow developers to reuse different parts of a web page across many different platforms and essentially function as Lego bricks.  Web components are also beneficial from an organizational information security prospective.  This is because many vulnerabilities that are exploited in the wild are caused by programming complexity and anomalies which means that the simplicity of web components are already a step toward a more secure organization.  Along with simplicity, web components ensure that developers are implementing components consistently across all platforms.  This is extremely important as development projects with multiple developers or even multiple teams can become very complicated very quickly.  Developers are also able to spend more time per component to ensure that it is the very best and most secure as they can build a component once and implement it everywhere and not have to keep building the component for every implementation.  Finally, breaches do occur and when they do a fast response is imperative to maintain service level agreements and customer loyalty which is the most important reason why web components can help with security.  If there is a vulnerability found within one of these web components, a team of developers can patch the issue and change every implementation at once and not be forced to search through the entire codebase to find every implementation.  Web components are an extremely important change within the industry and a change that is growing in popularity.

Youtube Video
https://www.youtube.com/watch?v=bUt2WDWDLqY