teleren/devto huggingface dataset:
App Onboarding Experience in Flutter
Tags: flutter, dart, ux
Published: 2021-01-20 23:41:43

---
title: App Onboarding Experience in Flutter
published: true
description: I show snippets of how I created a simple App Onboard Experience with Animated Page Position Indicator in Flutter
tags: flutter, dart, ux
cover_image: https://mariusreimer.com/images/flutter-onboarding-experience-hq.png
---

![App Onboarding Experience in Flutter](https://mariusreimer.com/images/flutter-onboarding-experience-hq.png)

Many mobile apps have a unique flow of experience that the user has to go through. A tutorial or onboarding screen can help with explaining the steps that the user has to do in the app. I show roughly how I created such a screen in Flutter. The source code can be found [on Github](https://github.com/reime005/FlutterOnboarding).

{% youtube XgtzUORaYKU %}

## The Important Widgets

Widgets that I have used in this example are the following:

- SafeArea
- Column, Row, Container, AnimatedContainer
- Text, FlatButton
- SvgPicture from 'flutter_svg'
- Expanded, Padding
- PageView

Important to highlight here are the first and last one. The `SafeArea` helps you using only the area of the phone that is safe to be used for designing. That is, rounded borders from certain devices. With help of the `PageView` you can create the horizontal page scroll effect.

![Flutter Animated Page Position Indicator](https://mariusreimer.com/images/flutter-onboarding-experience-1.png)

First, we want to define the data that we use for the explanation screens. For that, a specific class `ExplanationData` will be defined, to hold these information. Each page has a specific background color, title, short description and an image on top. The image will handled as vector graphics via `flutter_svg`.

{% gist https://gist.github.com/reime005/60247e72636920314967a9811b9c8852 %}

## The Animated Page Position Indicator

The next code snippet shows the state handling of the `PageView` widget, so that we can track the current page index and programmatically (when pressing on a button) jump the next page. It also shows the create function for the page indicator circles. For each page we render a specific circle, with when the current page is selected, the circle is about three times wider. This gives a better impression of where the user is currently. Using the `AnimatedContainer` we can achieve a simple animation effect.

{% gist https://gist.github.com/reime005/786c3a3c9a37a49f010c9811ddd674d6 %}

Lastly, you see a snippet of the horizontal `PageView` widget. Using the `onPageChanged` callback, we can track the current index, leading to a re-render of the page indicators. These indicators are generated with the help of `List.generate` and by using the length of the previously defined `data`, put into a `Row` widget.

{% gist https://gist.github.com/reime005/748e1ad76cae4447b13065e0b6968e85 %}

Originally published at [https://mariusreimer.com](https://mariusreimer.com) on January 20, 2021.
Learning Docker
Tags: learning, docker, todayilearned
Published: 2021-01-20 23:37:24

Disclaimer
> This is not a tutorial, I am just documenting what I have learned

> I will have some links for tutorials at the end of the post if that's what you are here for

---

Hello folks

If there is one thing that makes me question my own knowledge about back-end and engineering in general is that I know close to nothing about docker

I have followed some tutorials in the past and got an app working with docker containers and I also studied it a little bit when I was studying CI/CD with Circle CI

But I really do not feel confident to write in resume that I _know_ docker

So I will take some hours in the following weeks to fix this

---

### Creating containers with simple Node apps

Following [this tutorial](https://youtu.be/vmSMrQ8Ev9w) I've created the most simple possible container with node, it's an app that runs on port 3333 and when it receives a get request, it returns "waddup"

So, the first cool thing I've learned is that I can create multiple instances of the same container assigning them to different ports:

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

I won't show each one, but believe me, they all answer "waddup" when I navigate to their ports (8001, 8002 and 8003)

---

### Load balancing container

Alright, next thing, I've seen [this tutorial](https://youtu.be/BRPvjNQsqis) (I really like this channel)

And have set up a load balancer that keeps calling my waddup apps

This one was a bit more challenging, mostly because I am a noob in writing Nginx config files than anything else

---

### Docker compose

Ok, I have seen [this video](https://youtu.be/gAkwW2tuIqE), from another great channel and started trying to use compose to create all my containers with a single command

However, I ended up watching [another video](https://youtu.be/9sAg7RooEDc) from Hussein before actually doing it, in this video he is using HAProxy to do the load balancing, but I know even less about HAProxy than I know about Nginx, so I kept using it

And after some minutes fighting with the yml file, I've managed to, with a single command, create my 3 containers with a load balancer

hell yeah

---

### Repository

Everything I did in this post can be found in this repository 

{% github ciochetta/learn-docker no-readme %}

---

### Conclusion

Loving to learn docker

Will probably try something more complex tomorrow, like creating a database and accessing it from various containers

I don't know, but I feel like I could do some very nice things with docker

Also, I know that there is a way to automatize docker containers creation with Kubernetes, I will probably also study this 

---

### Resources

This is what I have used to study for this post 

https://docs.docker.com/docker-for-windows/install/

https://youtu.be/vmSMrQ8Ev9w

https://youtu.be/BRPvjNQsqis

https://youtu.be/gAkwW2tuIqE

https://youtu.be/9sAg7RooEDc
Day 10, 11, 12, 13, 14, 15, 16 of #100DaysOfCode 🤖🦾

Tags: 100daysofcode, webdev, programming, challenge
Published: 2021-01-20 23:22:58

#### Been getting the hang of [Tailwind CSS](https://tailwindcss.com/) for the past week and finally after 3 days and 25 commits, I'm finally done with the [challenge](https://devchallenges.io/challenges/xobQBuf8zWWmiYMIAZe0) I took from [Devchallenges.io](https://devchallenges.io/) using [Gatsby.js](https://www.gatsbyjs.com/) and Tailwind CSS!

![edie.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611182821424/fb4st6DvN.gif)

Check out the 👉[Github Repo](https://github.com/rahi-khan/edie_homepage-devchallenges.io) and [Demo](https://edie-homepage69.netlify.app/)👈

---

#### So far I've been using [Bootstrap](https://getbootstrap.com/) and [React Bootstrap](https://react-bootstrap.github.io/) in my projects and I was pretty happy with it. But now, after mingling with TailwindCSS a little, one thing's for sure, I'm a big fan of it and I guess I won't be going back to Bootstrap or any other CSS Frameworks anytime soon 🤣 Tailwind projects might look a little bit messy with all those little clusters of utility classes but oh boy, it surely is worth it!
useUpdateEffect: useEffect that doesn't trigger on mount
Tags: react, javascript, tutorial
Published: 2021-01-20 23:18:25

Since its debut in 2018, React Hooks introduced `useEffect`: a Hook that adds lifecycle to functional components. As the [wiki](https://reactjs.org/docs/hooks-effect.html) says: We can think of it as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` combined. It can be called only on the initial render by providing an empty array, but, what if we want it not to be called when mounted? Enter: `useUpdateEffect`.

The code behind it is very simple. It only takes a `useRef`, to keep track of the initial render, and a useEffect with a guard to check whether if it's the first mount or not:
```jsx
const useUpdateEffect: typeof useEffect = (effect, deps) => {
  const isFirstMount = useRef(true);

  useEffect(() => {
    if (!isFirstMount.current) effect();
    else isFirstMount.current = false;
  }, deps);
};
```
Some of you may be asking: "Why `useRef`?". Well, because it persists its value across renders and doesn't trigger a re-render. `useState`, on the other side, would make the component be re-rendered, which is not the desired behavior.

And here's a (classic) example of a counter button!
{% codesandbox autumn-water-17bzt %}
Processing large amount of WhatsApp jpeg files in Adobe Photoshop
Tags: photoshop, utils, whatsapp, go
Published: 2021-01-20 23:15:00

Just a few days ago, when I tried to open a jpeg file, downloaded from WhatsApp in Adobe Photoshop I've got the following Photoshop error:

```
Could not complete your request because a SOFn, DQT, 
or DHT JPEG marker is missing before a JPEG SOS marker
```
This problem occurs when you make photos and send these photos via WhatsApp. Then, when your addressee is trying to open received jpeg files in Photoshop, he gets the error, I described above.

The simplest way to solve this issue: open broken jpeg file in a generic image editor (MS Paint for Windows, for example), and save it again as a jpeg file.

But, when you have a large amount of such files, opening every file and saving it could be a tedious and time consuming task.

I decided to create a free open-source tool, to solve this task and help others who experience the same issue.

Link to the repository with the source code: https://github.com/cdefgah/whatsapp-jpeg-repair

If you want to download already compiled tool, follow this link:
https://github.com/cdefgah/whatsapp-jpeg-repair/releases

Expand `Assets` section and download file `WhatsAppJpegRepair-xxxxxxxx.zip` relevant to your operating system (Windows or MacOS).

The tool does not require installation, just unzip downloaded archive to an arbitrary folder. That's it :)
Ensuring Profile Environment Variables Available to Intellij
Tags: tech, development, microblog, macos
Published: 2021-02-09 22:55:28

---
title: Ensuring Profile Environment Variables Available to Intellij
published: true
date: '2021-01-20 23:05:12 UTC'
tags:
  - tech
  - development
  - microblog
  - macOS
canonical_url: >-
  https://www.sheldonhull.com/microblog/ensuring-profile-environment-variables-available-to-intellij/
---

Open IntelliJ via terminal: `open "/Users/$(whoami)/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app"`

This will ensure your `.profile`, `.bashrc`, and other profile settings that might be loading some default environment variables are available to your IDE. For macOS, you'd have to set in the `environment.plist` otherwise to ensure they are available to a normal application.

ref: [OSX shell environment variables - IDEs Support (IntelliJ Platform) | JetBrains](http://bit.ly/3p3BgHy)
PodApp Delight
Tags: react
Published: 2020-12-16 20:58:14

---
title: PodApp Delight
published: true
date: 2020-12-16 00:00:00 UTC
tags: react
canonical_url: https://d-fisher.com/blogs/PodApp-Delight
---

![PodcastApp](https://res.cloudinary.com/dndp8567v/image/upload/v1608116331/PodcastApp_adeb2f3e15.gif)

I've been working hard on the Podcast app and this is the current state of play. The basic application is complete although there are a few bugs here and there. It's been challenging but I've learnt a few lessons.

### CORS

CORS stands for Cross-Origin Resource Sharing and is one of two resource dynamics that are common in browser API communications (the other being “Same-Origin”). Same-Origin prevents Cross-Origin requests that do not come from the same origin as the hosted data are rejected, thus protecting the site from a variety of complex attacks. I was getting CORS error when attempting to use the Itunes API. The workaround is to use a CORS proxy, which takes a request and passes it forward through a predetermined URL. Essentially the proxy acts as a middleman. allowing CORS issues to be bypassed entirely.

### CSS

I used Material UI for styling but I got to grips with using CSS grids, which is extremely powerful for the responsive design especially when used with the minimax features. I briefly looked at the 'My Movie List' project and my understanding of CSS has improved dramatically in comparison since I build this portfolio site and the Podcast app.

### Testing

Automated testing is important but it's also a struggle and not that much fun. It's like developing in a new environment. I found it difficult to know what to test and I'm used to developing in the browser but testing just doesn't work the same way. However, as I progressed it became more confident with the process. Testing is so important and I'm glad that I was strict with myself and followed the correct process.

### Future Developments

In the future, I may update the app even further adding features such as:

- User authentication
- Curated podcasts
- Listening history
- Subscriptions
Women allowed
Published: 2021-01-20 22:30:45

Oh wow.

We were watching Kamala speak on the senate floor a few years ago and thinking.... wow. What if there were more people like her. What if someone like that was in charge?

## In case you didn't know

Women are **MORE** than _allowed_.

Young, old, light, dark, tall, short, with-child, and from every background and situation you can think of. You are more than allowed. **WE NEED YOU**. We need you because you are you. Not because you 'can' or because you should. We want you.

We need you to **design new systems**. We need you to care about the people. We need your insight as mothers - and provider and hard workers and - **ALL** of _the things_.

## We need you

We need you NOW.

And we can't think of any better job for a women in tech than "DESIGNER." (not only a visual designer) (not only a production artist) But someone who can research and plan, and talk with people, and come up with ideas and test them - and BUILD them. The _real_ **full stack**.

We need women leading the way with design, research, content strategy, information architecture, user experience, user interface, user testing, HTML, accessibility, CSS, SVG, visual design, PHP, JavaScript --- _all of the things_. AND MORE.

Languages and _typing code_ are important tools: but these problem-solving techniques - these "Design" techniques: are **timeless**. These are the tools that you can use to change the world. These are the tools of a **_designer_**.

## The web is the worlds most powerful tool for change 

**Wield the power of _The Web_**. Design the world YOU want to see - with history's most powerful communication platform. You CAN do it. We _need_ you to do it. We've tried out best to build a system to get you ready.

---

Learn **Design for _The Web_** with us - at: https://perpetual.education

---

❤️  Ivy  c/o Perpetual Education.
Functional Programming Asks For a Mutable Developer
Tags: functional, beginners, programming
Published: 2021-01-20 22:28:36

The class you have been waiting for. It is your programming class in school and the professor offers you plenty of interesting and essential words: objects, classes, constructors, inheritance. You love programming! And that's programming, right? Well, that's one way of structuring your program. And a very thought-provoking way, as object-oriented programming feels quite natural to most people.

Later on, you got a job to work with Erlang, this programming language that you certainly did not learn in your classes. Erlang is a functional programming language. It's not that is better or worse than Java or C++. It's just different as it has a different paradigm. The thing is you have no classes, no constructors, no methods, no inheritance, and all the concepts you had learned as simply "programming". You try to use the same techniques you know but it just seems off.

You have to start thinking functionally. Not imperatively. Not object-oriented. This asks for a mutable mind. A mind that will have to sometimes shift between paradigms and understand fully all the differences between them. Immutability is a central concept of functional programming, but a mutable developer, that is up to change, is essential for learning a new paradigm.

Here are some tips for you to consider when learning FP:

- **Understand** that a different paradigm means problems are solved differently
- **Master the concepts** before jumping into libraries and frameworks. First-class functions, high-order functions, purism, recursion, immutability, type systems
- **Learn functional languages** such as Erlang, F#, Clojure, Haskell to help you apply the concepts into multi-paradigm languages, such as JavaScript
- **Don't rush** to learn the most complex topics as functors, monads, currying
- **Apply basic concepts** to your day-to-day code gradually. Immutability and purism are two functional-thinking concepts that you can use in Ruby or JavaScript. That can make the code more testable, deterministic, and easier to read

The process to learn functional programming can be daunting and slow as new concepts are involved. It is not like learning Ruby from a Java background. It actually is like learning how to sail a boat knowing how to drive a car. It is completely normal to struggle at first, but mutate your mind to resiliency and always keep learning.
Day 291 : Feeling Good
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-20 22:25:10

_liner notes_:
- Professional : Not a bad day. Had no meetings so I got to focus on creating my presentation slides. I helped out with a question on our Community Slack and it looks like it may have worked out for the user. Also finalized some updates to documentation and did a pull request to the code base. Just waiting for it to be reviewed and merged and then I can set that ticket to done.

- Personal : Went through some tracks for the radio show last night. Fixed a bug on my personal site. Since I was feeling good after fixing the bug, I worked on an old side project and added some capabilities and refactored some code that I'll be needing in the near future. Then fell asleep.

![Overhead shot of a cove with a rocky shore in Big Sur, California, USA](https://dev-to-uploads.s3.amazonaws.com/i/hete5sjc4rpi50vfiq52.jpg)

Watched the Inauguration of Biden and Harris today. Hopefully it's just not more of the same and people aren't going to be paying attention because it's not Trump. Only time will tell. Got to keep hope alive (but also be vigilant, haha). Tonight, I want to finish up the first draft of my slides. I have an outline and just need to create the corresponding slides. Hopefully that won't take too long. Then maybe sneak in an anime episode before bed.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube BNMKGYiJpvg %}
Book Review: Designing Web APIs: Building APIs That Developers Love
Tags: review, api, book, rest
Published: 2021-01-20 22:09:32

**Release Date:** September 2019

**Pages: 232**

**Authors: Amir Shevat, Brenda Jin, Saurabh Sahni**

**Difficulty:** 30% Some working knowledge and understanding of API is required. Novice would have a hard time understanding some of the terms and techniques mentioned in this book.

**Why** `Designing Web APIs`

*I picked this book to get a better understanding of designing APIs, as the title says, but... I did not read the subtitle which explains a lot about this book.*

I love reading books because it provides great insight into some technology or field. Instead of going through all of the documentation, you are able to learn from someone who has years of experience in that field, and pages were reviewed by a few authors who fit the same description. 

**The What?**
So what can be said about `Designing Web APIs`?

I was a bit surprised with a small number of pages for this book, I expected a bit more in-depth info about specific patterns and good practices, and honestly to cover more things (my fault for not reading a table of content) 

The book is really easy to read through if you don't have much time to spend reading. You can spend 20-30 min before sleep to go through the whole chapter as you don't need access to a computer to try something, maybe just to add some notes if you like to do that

Each chapter is really focused on the content it title, authors were kind enough to provide a lot of quotes and some short case studies to back up their claims and show you how even big companies struggle, make mistakes, and what did and did not work for them.

I never found the book to be boring (good thing about it being short), authors do not go into unnecessary details and provide you with some of the good practices and what you should think about when working on your API. 

Some in-depth is lacking and you need to go and do some investigation on your own to get a better understanding of certain patterns in your code.

**Who is this book for?**

I would say any novice to intermediate would benefit from reading this book to understand some of the things you need to think about when designing API. A complete novice may find some things hard to follow but since the book is easy to read, it should still be a good book to start with, and as you gain more knowledge, you would know what to watch out for. Definitely not for someone more experienced in developing APIs

**Summary:** 
It provides a good overview of API and some of the practices that can help you build a better product, not just from a technology perspective. It is not a book I would buy to have on a shelf to use as a guide, but since it is short, it is worth reading for anyone who wants to broaden the knowledge on good API practices in case you work on just small pieces of your product or starting developing your own
Day 20 - Valid Parentheses
Tags: leetcode, python, challenge
Published: 2021-01-20 22:01:59

## The Problem

>Given a string `s` containing just the characters `'(', ')', '{', '}', '['` and `']'`, determine if the input string is valid.

>An input string is valid if:

1. Open brackets must be closed by the same type of brackets.
2. Open brackets must be closed in the correct order.
 

__Example 1:__

```
Input: s = "()"
Output: true
```

__Example 2:__

```
Input: s = "()[]{}"
Output: true
```

__Example 3:__

```
Input: s = "(]"
Output: false
```

__Example 4:__

```
Input: s = "([)]"
Output: false
```

__Example 5:__

```
Input: s = "{[]}"
Output: true
```
 

__Constraints:__

* `1 <= s.length <= 104`
* `s` consists of parentheses only `'()[]{}'`.

## Tests

[Link to code](https://github.com/ruarfff/leetcode-jan-2021)

```python
import pytest
from .Day20_ValidParentheses import Solution

sol = Solution()


@pytest.mark.parametrize(
    "s,expected",
    [
        ("()", True),
        ("()[]{}", True),
        ("(]", False),
        ("([)]", False),
        ("{[]}", True),
        ("[", False),
        ("((", False),
    ],
)
def test_is_valid_parentheses(s, expected):
    assert sol.isValid(s) == expected
```

## Solution

[Link to code](https://github.com/ruarfff/leetcode-jan-2021)

```python
class Solution:
    def isValid(self, s: str) -> bool:
        if len(s) == 1:
            return False

        stack = []
        brackets = {"}": "{", ")": "(", "]": "["}
        for b in s:
            if b in brackets:
                if len(stack) == 0 or stack.pop() != brackets[b]:
                    return False
            else:
                stack.append(b)

        return len(stack) == 0
```

## Analysis

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

## Commentary

This seems like a classic 'stack' problem to me. An opening bracket must be closed and they must be closed in reverse order of opening. We use a list as a stack there. When we encounter a closing bracket, pop the last bracket from the stack and see if it was the opening bracket for the current closing bracket. 

e.g.

```
stack = ['(', '{']

bracket = '}'

stack.pop()
# '{'
```

'{' and '}' match so we continue on to the next one. If they didn't, we return false.

We only ever put open brackets on the stack. We use a map to store the closing bracket to look up the respective closing bracket.

My solution didn't do great in terms of performance. Must have a think about it and see where it could be made faster but leaving it here for today.