teleren/devto huggingface dataset:
Top 5 Angular Design Systems/ Component Libraries
Tags: angular, javascript, css
Published: 2020-08-02 12:16:40

I was about to start a side project with Angular and began wondering what design system should I use to avoid my app looking like plain html during the process. After doing some research I decided that it is worth noting down my research and sharing it with the world.

Some of the requirements by which the selected design systems were selected:

1. The system has to be designed to be compatible with Angular (installable via Angular CLI)
2. It has to look cool and modern
3. It has to have a large component library (a lot of the one I have seen actually don't have all the components you might think they should have!) 


##5. Onsen UI
https://onsen.io/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yhjsyif0eusgsmp9lxhu.png)

Onsen UI focuses on providing ui elements for hybrid apps and PWA's. The design of components looks very inspired by google material design with its own twist to it. I think could be a great library if you want to focus on mobile experience.

##4.Kendo UI
https://www.telerik.com/kendo-angular-ui
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v1o1rg6alrbug23v4qcl.png)

Kendo UI is one of the largest components librarys that I have seen with a lot of focus put on data visualisation and developing data intensive UI's. If Kendo UI was a free service it would definitely deserve the first place on this list. 

##3.Semantic UI
https://semantic-ui.com/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ehmxxzmgpbxuljs3wmo.png)

What is unique about Semantic UI is that its design resemble IOS design system. I think it is a fantastic library if you would like your app to blend in on your Iphone or Mac.

##2.NGX bootstrap
https://valor-software.com/ngx-bootstrap/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bfzf1u93xs23m561s194.png)

Even though bootstrap is already quit an old component library I still think it is one of the most versatile and flexible libraries available out there. I must give my kudos to bootstrap for keeping up date with web technologies and still making it a solid choice in 2020.

##1. Angular material         
https://material.angular.io/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/804jrbx6rgfilk51pk57.png)


Angular material design is the library to pick if you want the most well developed and supported library for Angular. Why is it so? Angular and material design origins can be traced back to Google, therefor I can see how both of these ideas have developed together over the last decade. Outside of that Angular material is quit a refined UI library which I have used on several project and it have not let me down.

Conclusion:
There are a lot of different component libraries out there and you must pick the one that fits your project the best. In the end, for my project I picked Semantic UI just because I have never developed anything that looks like IOS.

What is your experience with Angular ui libraries?
เส้นทางบันทึก...Week3/14
Published: 2020-08-02 13:12:55

---
title: เส้นทางบันทึก...Week3/14
published: true
description: 
tags: 
---
สวัสดีครับ สัปดาห์นี้ก็เป็นสัปดาห์ที่ 3 แล้วนะครับของการฝึกกล้ามหน้าท้องด้วยวิธีหาข้อมูลด้วยตนเอง สัปดาห์นี้ผมสามารถออกกำลังกายตามตารางการออกกำลังกายได้ต่อเนื่องมากกว่าสัปดาห์ที่แล้วครับ ส่วนอาหารผมสามารถคุมอาหารและหลีกเลี่ยงอาหารที่มีไขมันสูงได้มากขึ้น ซึ่งสัปดาห์นี้ผมรู้สึกว่าผมเริ่มสามารถที่จะควบคุมพฤติกรรมการออกกำลังกายและพฤติกรรมการบริโภคของตัวเองให้อยู่ในเส้นทางที่ตั้งไว้ได้มากขึ้นครับ

**สิ่งที่ได้เรียนรู้** : ผมยังไม่สามารถทำตามตางรางได้เต็ม 100% ผมต้องหาวิธีการฝึกฝนตนเองเพื่อให้ตนเองสามารถทำตามตารางอย่างมีประสิทธิภาพมากขึ้นครับ

ขอบคุณมากครับที่ติดตาม แล้วเจอกันใหม่ในบทความถัดไปครับ...
How Did I learn React in 10 months
Tags: react, beginners, javascript, productivity
Published: 2020-08-02 13:12:10

I always see questions like that how many time is need to learn some new technology. 

The truth is you can't learn a new language/framework in 5 hours (yes I'm talking about that immersive course of 10 hours).

So I decided to write something's based in my small experiences.

Before starting learning react it's a good idea to pratice ES6 features,that can make your life easier.

**Note:** This is not a silver bullet or the secret way of learning react, it's just guide that will put you in the right way, you decide if you follow or not.<br><br>

### **How did I start with React**

I started learning react reading the documentation. Most of us start learning the things in the "wrong way", we getting started with courses and tutorials then when we have troubles we dive into documentation.<br><br>

Documentation it's like a manual guide, we just ignore it and start using the things, then we go back to them when the things don't work well.<br><br>

We can avoid much pain if we start in that way, documentation will give you a deep knowledge about the technology and you will learn more fast and in a detailed way more than a course or tutorial.<br><br>

React documentation it's one of the most well write documentation, you can learn through tutorial or ***step by step***.<br><br>

I highly recommend getting started reading the documentation, that's made a lot of difference for me.<br><br>

### **Practice, practice and practice**
Just reading the documentation will not make you a pro without practice.

I did read the documentation every single day, and practice step by step each functionality.

Read it's the 50%, practice it's the other half. You have to practice every single commands and tips. See the results by yourself and understand how the things work deeply.

You will learn more fast and in the right way if you practice the things. <br><br>

### **Dive into a Project**
There is something's that you will discovery only if you dive into a project.

You can learn more if you build small or big projects. The project can be a Todo list or a simple chat, but needs to be challenge for you.

When you dive into projects you will find new complex problems, that will increase your level as react developer.
 
Build real projects made all the difference for me, I found new problems and discovered better ways of doing the things.<br><br>
 
So dive into a projects when you're a learning.<br><br>

### **Conclusion** 
When you feel more comfortable working with React, you can watch courses and videos tutorials.

You will notice a big difference. I think this tips will help you getting started in the right way.
รู้ต่อเมื่อ...ลงมือทำ
Published: 2020-08-02 13:05:24

เคยเป็นไหมคะ ที่บางครั้งถ้าให้มานั่งคิด คิดแล้วคิดอีกว่าตัวเองชอบอะไร มักจะคิดไม่ออก หรือคำตอบคือ ไม่รู้เหมือนกัน หรือแม้ว่าเราคิดว่าเราชอบทำสิ่งนี้ แต่กลับ ไม่ใช่คำตอบที่แท้จริง แล้วเราจะรู้ได้อย่างไรว่า อะไรคือสิ่งที่เราชอบ อะไรคือสิ่งที่เราทำแล้วได้ผลลัพธ์ที่ดีเกิดขึ้นจริงๆ คำตอบคือ การลงมือทำหลายๆอย่างๆ 

ในตอนที่เราเลือกว่าเราจะเรียนสายไหน จะเป็นอะไร หรือประกอบอาชีพอะไรในอนาคต เราเพียงแค่จินตนาการถึงสิ่งนั้นๆ ซึ่งอาจเป็นสิ่งที่เราชอบจริงๆหรือไม่ก็ได้ มีหลายปัจจัยที่ทำให้เราเลือกเดินทางตามเส้นทางในจินตนาการนั้นๆ เช่น อยากเป็นสัตวแพทย์ เพราะรักสัตว์ แต่พอเอาเข้าจริง เราอาจได้เปลี่ยนสายไปเป็นวิศวกร แทนเพราะอีกหลายเหตุผลที่มากลบความฝันเดิมของเรา หรือ แม้แต่เมื่อเราได้เป็นตามที่เราต้องการแล้ว เช่น ได้เป็นหมอ แต่พอได้เริ่มอาชีพนี้จริงจังกลับ ไม่ใช่สิ่งที่ชอบจริงๆ แต่พอได้เรียนรู้เรื่องโปรแกรมคอมพิวเตอร์กลับชอบมากกว่าการเป็นหมอ จึงตัดสินใจเปลี่ยนอาชีพ มาเป็นโปรแกรมเมอร์แทน ทั้งนี้ทั้งนั้น เราไม่สามารถรู้ได้เลยว่า จริงๆแล้ว สิ่งที่ใช่สิ่งที่เราทำแล้วสนุกมีความสุขกับมันจะเป็นอะไร ถ้าไม่ได้ลองลงมือทำในหลายๆสิ่งนั้นๆก่อน บางคนอาจจะลังเลว่าจะทำดีไม่ดี จนความลังเลนั้นหยุดเราที่จะได้พบกับสิ่งที่เราชอบทำจริงๆ และจมปลักอยู่กับความจำเจซ้ำซากจนเกิดเป็นความทุกข์ เครียด มีผลกระทบต่อชีวิตในหลายๆด้านตามมา แต่คุณจะตระหนักรู้ไม่ได้เลยถ้าคุณไม่พร้อมที่จะเปลี่ยนแปลงให้ชีวิตดีขึ้น 

เริ่มจากให้เราลองสำรวจสิ่งที่ทำอยู่ว่าเรามีความสุข สนุก และ ชอบ กับสิ่งที่เราทำไหม หากคุณอยากตื่นมาทุกๆเช้าเพื่อไปทำงาน มีความสุขในขณะที่ทำ มีความคิดริเริ่มใหม่ๆ แสดงว่าคุณพบงานที่ใช่สำหรับคูรแล้ว ยินดีด้วย!!! 

แต่หากในทางกลับกัน คุณกับรู้สึกห่อเหี่ยว ไม่อยากลุกไปทำงาน เช้าชามเย็นชาม พอให้เสร็จๆไป นั่น อาจเป็นสัญญาณที่บอกได้ว่า คุณควรออกไปค้นพบสิ่งใหม่ๆ เพื่อทำให้คุณได้พบสิ่งที่ชอบอย่างแท้จริง 

ลองทำสิ่งที่ไม่เคยทำมาก่อนคุณอาจจะค้นพบว่าแท้จริงแล้วเราอาจชอบสิ่งนั้นแบบที่เราไม่เคยรู้มาก่อนก็ได้ และคุณจะทำมันได้ดีทีเดียว
Learning Binary Trees Part 2: Breadth First Search
Tags: beginners, javascript, computerscience, algorithms
Published: 2020-08-02 03:52:10

In my [last post](https://dev.to/123jackcole/learning-binary-trees-part-1-implementation-55bb) I started discussing trees and how to implement them. In this lesson we're going to be looking at how to traverse a tree structure to find a certain node. When it comes to traversing a tree there are two main methods, breadth-first search (BFS) or depth-first search (DFS).

##**Breadth-First Search**

![Wiki image for BFS](https://dev-to-uploads.s3.amazonaws.com/i/5uivncduget3h145idux.png)

The name of the method is pretty self explanatory, you traverse the tree in layers. Starting at the top and working your way down left to right, visiting each node once as you go. *In general*, you want to use BFS when finding the shortest path from one node to another, or when the tree is wide.

An important problem that we need to address when searching through a tree is that nodes don't keep track of their parents or what is left or right of them, only their respective children. Take the above image for example, after navigating from node 1 to node 2, how do we get to 3? Node 2 only has information regarding node 5 and 6. The answer is another data structure that we've talked about in the past, a [queue](https://dev.to/123jackcole/learning-queues-4jnc).

![Wiki image for queue](https://dev-to-uploads.s3.amazonaws.com/i/c9bnxxj8nqckrpwj8bti.png)

For this example we are going to continue using our binary search tree from our previous post. Now let's look at the code. 

![Code for BFS](https://dev-to-uploads.s3.amazonaws.com/i/ghzj8zvgvtpvegl58ije.png)

We start with our current node and add the value to our visited array. This can vary depend on what you want you want to accomplish. In this case we are just recording the values of each node. We then and add each child to our queue, from there we go to the next node in the queue and repeat the process until we've gone through each node in the tree.

The code for the post can be found [here](https://github.com/123JackCole/Binary-Trees).
deep learning to discovered a group of heart conditions through Echocardiography 
Tags: machinelearning, deeplearning
Published: 2020-08-02 13:02:25

This project introduces echocardiography to discover a group of patients with a variety of heart conditions including lower fibrillation, coronary artery disease, cardiomyopathy, aortic valve stenosis and amyloidosis
This program outperforms human experts in diagnosing patients with serious disease
It uses the left ventricular cardiac functions which is used to diagnose cardiomyopathy through a wide range of videos 10030 Anatomical Echocardiography by EchoNet

|Normal|Low Ejection Fraction|Arrhythmia|
| --- | --- | --- |
|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/heapwyu6roezy3ju5iny.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ogt62jh9qflrp09vcb1e.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6aal6cp0os5b4a9qxy6r.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l5ent3im19r3741xncu4.gif)
|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kwfy7bz330mpe9290mj0.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o0r5t08xnmk10yhh0l0e.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f7nq4p26tv6kclelgn27.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yjh3rem8fh9rb2dpxb15.gif)
|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9iyuntmfs22dvdf39fnv.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d2ouch2wccfsk3bod4i1.gif)|![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2dvckglh6agz59uvfkut.gif)|

		

The results were conducted by three patients who had normal cardiac functions in the left column and three who had low expulsion fractures as you see in the middle column where the color blue is greater than normal and three of them in the right column suffer from arrhythmias (as you see in the photo once, it beats properly and again strongly and once Varying)

The project discovers and predicts three heart conditions:

* Divide the left ventricle
* Predicting a fracture of premature ejaculation
* And cardiomyopathy by predictions that each beats


This project introduces the EchoNet-Dynamic Data Set, a publicly available data set from unspecified Echocardiogram videos, available at https://echonet.github.io/dynamic/.


The code is available on
https://github.com/echonet/dynamic
Which coffee do you drink? ☕️ 🧐
Tags: discuss, watercooler, productivity
Published: 2020-08-02 12:45:37

---
title: Which coffee do you drink? ☕️ 🧐
published: true
description: Let's discuss coffee 
tags: discuss, watercooler, productivity 
//cover_image: https://direct_url_to_image.jpg
---

{% youtube liGwcuFyaNY %}

I recently watched this video learnt a lot from this so I thought let's share with my homies and ask about which coffee they drink. 

So Post a picture of your beans, if you use them or coffee of pack if not. 

**Here is mine**
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wx0hi6qmioynos6vp9x4.jpg)

Also, if you feel like writing after drinking coffee we are looking for author 😅. 
[***🔥 Apply here 🔥***](https://teamxenox.com/#4thPage)
ES6 Default Parameters
Tags: javascript, defaultparameters, todayilearned
Published: 2020-08-02 12:28:13

### Brief Introduction
Default parameters were released in ES2015 and are used to give default values to function parameters.

When the function is invoked without passing arguments, the default values are used instead.

```
function multiply(a, b = 3) {
  return a * b;
}

console.log(multiply(5));   // console logs 15
console.log(multiply(3, 2));   // console logs 6
```

## 1. Use default parameters at the end.

Using default parameters at the start will require you to pass undefined as an argument (to use the default value) and then the other arguments. An example will make it more clear.

```
function multiply(a = 5, b) {
  return a * b;
}

console.log(multiply(undefined, 3));   // console logs 15
```
whereas you could've done
```
function multiply(a, b = 5) {
  return a * b;
}

console.log(multiply(3));   // console logs 15
```

## 2. Default parameters will also override an explicit undefined argument

With default parameters you cannot pass an undefined argument explicitly as seen in the above example. This is not a bummer as undefined is rarely passed as an argument.

```
function multiply(a, b = 5) {
  return a * b;
}

console.log(multiply(3, undefined));   // console logs 15
```

## 3. Use parameters in subsequent default parameters.

What I mean by this is you can set the value of default parameters using the parameters to its left. For example -

```
function square(a, b = a) {
  return a * b;
}

console.log(square(3));   // console logs 9
```

## 4. Call functions as default parameters

Functions invocations can also be used as default parameters. This will be clear with an example.

```
function square(x) {
  return x * x;
}

function addWithItsOwnSquare(a, b = square(a)) {
  return a + b;
}

console.log(addWithItsOwnSquare(3));   // console logs 12
```

Please read the code slowly and you will understand what is happening here. This above example demonstrates both the points 3 and 4.

## 5. Define functions as default parameters

Functions can even be defined instead of being called in default parameters. This can be useful if you don't need this function elsewhere in your code.

```
function addWithTwenty(a, b = () => 20) {
  return a + b();   //   invoking the function here
}

console.log(addWithTwenty(10))   // console logs 30
```


Note - These examples are only for demonstration and I don't write square and addWIthItsOwnSquare functions this way and you shouldn't too but it's always good to know the things you can do.
Need Help to Learn Web Development for mobile version 
Tags: html, css, javascript, mobile
Published: 2020-08-02 12:27:47

Hi guy's..
I hope u all are doing well and taking good care of your own and your loved one's.. 

I have recently  started the front-end development but facing some problems when going to build the mobile version of website..so my question is where to learn mobile web development any suggestions.. 

Thank you 😊😊
RFC: A Community-Led Search Engine
Tags: google, discuss, search, rfc
Published: 2020-08-02 12:08:06

---
title: RFC: A Community-Led Search Engine
published: true
description: Are there any community driven search engines
tags: #google #discuss #search #RFC
//cover_image: https://direct_url_to_image.jpg
---

I've recently gotten into using [DuckDuckGo](duckduckgo.com) as my main search engine. Looking at DDG, and others, I started to wonder:
> Are there any community driven, open source, search engines currently running?

After doing some searching, I couldn't find any. This struck me as odd considering there are number of initiatives out there from mapping ([OpenStreetMaps](https://www.openstreetmap.org)) to music ([Open Music Archive](http://openmusicarchive.org/)) to human knowledge ([Wikipedia](https://www.wikipedia.org/)).

Does this exist? And if not, why not? Is there any appetite for such a project?
Eliminar comentarios rápidamente en Android Studio o VS Code
Tags: androidstudio, vscode, productivity
Published: 2020-08-02 12:00:42

Algunos archivos y plantillas vienen con excesivos comentarios, como por ejemplo la aplicación inicial por defecto de Flutter, con 50 comentarios en un archivo de 117 líneas en total.

![Antes](https://dev-to-uploads.s3.amazonaws.com/i/aa3ds3sjc0c2uknmwtq9.png)

En vez de eliminar uno por uno los comentarios, podemos hacer lo siguiente para acelerar un poco la tarea desde el mismo IDE, sin recurrir a herramientas como `sed` en la consola.

![Después](https://dev-to-uploads.s3.amazonaws.com/i/6exuxmh6zdzbeuoiwigl.png)


## Android Studio
- Abrir el diálogo para buscar y reemplazar con `Ctrl + R` o desde `Editar > Buscar > Reemplazar...`
- En el diálogo, activar la opción `Regex`. 
- En el campo para buscar, introducir `//.*` (Alternativamente se pueden reemplazar las barras con el o los caracteres de comentario de otros lenguajes, como `#`)
- Seleccionar `Reemplazar todo`
- Reformatear código para eliminar espacios en blanco.

## VS Code
- Abrir el diálogo para buscar y reemplazar con `Ctrl + H` o desde `Editar > Reemplazar`
- En el diálogo, activar la opción regex representada por el ícono `.*`
- En el campo para buscar, introducir `//.*` (Alternativamente se pueden reemplazar las barras con el o los caracteres de comentario de otros lenguajes, como `#`)
- Seleccionar `Reemplazar todo`
- Reformatear código para eliminar espacios en blanco.

## Explicación
La expresión regular `.*` quiere decir "hacer match con cualquier caracter a continuación hasta que termine la línea", por lo que `//.*` quiere decir hacer match con `//` y todo lo que le siga.

Al dejar el campo para reemplazar vacío, estaremos reemplazando las coincidencias con nada, es decir, borrándo lo que haga match.

El resultado será que se eliminarán los comentarios que se encuentran al final de líneas, y las líneas que sólo contenían comentarios quedarán en blanco.


Links relacionados:
- Formatear código Flutter en distintos IDEs: https://flutter.dev/docs/development/tools/formatting
Daily Developer Jokes - Sunday, Aug 2, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-08-02 12:00:19

---
title: "Daily Developer Jokes - Sunday, Aug 2, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Aug%202%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259316ab83.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What are the three hardest problems in computer science?

___A:___ Naming things and off-by-one errors
 -->
SwiftUI Scroll Magic
Tags: ios, swift, swiftui, scrollview
Published: 2020-07-31 10:47:59

Scroll views in SwiftUI are very straight-forward but give us no information or control over the current position of its content. So how can we detect for instance that the user has scrolled beyond certain threshold off the top?

![Scrolling](https://swiftui.diegolavalle.com/posts/scroll-magic/screenshot.gif)

Suppose we have some scrollable content with a title bar that is outside the `ScrollView`.

```swift
public struct JumpingTitleBar: View {
  
  var scrollView: some View {
    ScrollView(.vertical) {
      Text("""
      Scroll down to see the title bar jump from top to bottom.
      …
      """)
    }
  }

  var topBar: some View { … }
  var bottomBar: some View { … }

  var body: some View {
    ZStack {
      scrollView
      VStack {
        topBar
        Spacer()
        bottomBar
      }
    }
  }
}
```

We want the title bar to _jump_ to the bottom once the user started scrolling down the text. Let's start by adding an `onTop` state variable to represent this behavior.

```swift
@State var onTop = true

var body: some View {
  ZStack {
    scrollView
    VStack {
      if onTop { topBar }
      Spacer()
      if !onTop { bottomBar }
    }
  }
}
```

Now for the _magic_ bit of the article, how do we actually find out what the offset of the contents is at all times? For this we leverage `.anchorPreference`.

Anchor preferences let us compile geometry data about our descendants, of which our scrollable `Text` is part. We start by defining the key type with a default value and a reducer.

```swift
struct OffsetKey: PreferenceKey {
  static var defaultValue: CGFloat = 0
  static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
    value = nextValue()
  }
}
```

From the text view itself we report our top anchor's `y` position to our ancestors.

```swift
  GeometryReader { g in
    ScrollView(.vertical) {
      Text(…)
      .anchorPreference(key: OffsetKey.self, value: .top) {
        g[$0].y
      }
      …
```

We will catch the offset value on the flip side using the `onPreferenceChange()` modifier on the scroll view itself.

```swift
var body: some View {
  ZStack {
    scrollView
    .onPreferenceChange(OffsetKey.self) {
    …
    }
    …
```

At this point the only thing remaining is to update our internal state according to the received offset.

```swift
…
scrollView
.onPreferenceChange(OffsetKey.self) {
  if $0 < -10 {
    self.onTop = false
  } else {
    self.onTop = true
  }
}
…
```

The title bar now slides away shortly after we start scrolling down and the footer instantly fades in. The whole action reverses when scrolling all the way back to the top.

For sample code featuring this and other techniques please checkout our [working examples](https://github.com/swift-you-and-i/working-examples/tree/master/Sources/WorkingExamples/scroll-magic/) repo.

FEATURED EXAMPLE: [Scroll Magic](https://swiftui.diegolavalle.com/examples/scroll-magic/) - See the title bar jump from top to bottom

---

Originally published at [Swift You and I](https://swiftui.diegolavalle.com/posts/scroll-magic/)