teleren/devto huggingface dataset:
How to remove tab bar border in React Navigation
Tags: reactnative, javascript, beginners, react
Published: 2021-01-19 06:11:46

Navigation plays an important role in mobile applications and the React Navigation library does an awesome job in providing a completely customizable interface for utilizing different navigation patterns to React Native apps.

Having the liberty to customize tab bars with React Navigation, one of my favorite customizable options (depending on the UI design of an app) is to remove the border from the Tab bar.

Here is an example of the border that is the default when the React Navigation Bottom Tabs library is utilized to create a tab bar.

![ss1](https://i.imgur.com/ttIMI5V.png)

For the demonstration purpose, I am using an Expo project created using the `expo-cli` command-line tool. To create a similar new Expo project, you can execute the command and choose the `tabs` option.

```shell
expo init yourProjectName

# when prompted, choose the tabs option
# in managed workflow
```

This expo project comes with a default bottom tab navigator whose configuration can be found in the file `navigation/BottomTabNavigator.tsx`.

## Customize the TabBar

The Bottom Tab Bar React Navigation library gives an object called `tabBarOptions` to customize a tab bar. This object contains props that can be used to apply custom styles and one of the generic property it has is called `style`. This property is commonly used to change the styles of the tab bar, for example, by applying the `backgroundColor` styles' property.

To remove the border, add the `tabBarOptions` prop and inside it, add a style property called `borderTopWidth` with a value `0`.

```js
<BottomTab.Navigator
  initialRouteName='TabOne'
  tabBarOptions={{
    // ...
    style: { borderTopWidth: 0 }
  }}
>
```

Here is the output:

![ss2](https://i.imgur.com/WqR3X9I.png)

Do note that this property can also be used to increase the width of the top border.

## Removing shadow on Android Device

After applying this `style` property, the width of the top border is removed from an Android device. However, there is a shadow at the top border of the tab bar that remains.

![ss3](https://i.imgur.com/ofnBBis.jpg)

To remove this shadow, set the `elevation` to `0`:

```js
style: {
  borderTopWidth: 0,
  elevation: 0
}
```

![ss4](https://i.imgur.com/3TEx5ib.jpg)

---

[🔥 More React Native posts](https://amanhimself.dev/blog/) | [👋 Twitter](https://twitter.com/amanhimself) | [💌 Weekly Newsletter](https://amanhimself.substack.com/)
Async..await is syntactic sugar on Promises
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-01-19 05:52:07

```js
const getData = () => {
  return new Promise((resolve) => {
    resolve("Hello World");
  });
};

getData().then((result) => console.log(result));

// is same as

const main = async () => {
  const result = await getData();
  console.log(result);
};
main();
```


---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
E-Mail Automation  with Python and Excel
Tags: python, excel
Published: 2021-01-19 05:45:32

Hi! In my video I show you how you can automatize the sending of E-Mail reminders with Python and Excel. For this we are using the openpyxl and smtplib modules. Have a great day! :)

{% youtube ZDauOlDMVHE %}

➤ Timestamps:
0:00 Introduction
0:53 Python Code 1/2
3:23 Google app password
4:39 Python Code 2/2
6:35 Website & Bye :)

➤ Python book: https://automatetheboringstuff.com/2e/chapter18/  
➤ Github: https://github.com/Lumary2/Python
➤ App password tutorial:
https://support.google.com/accounts/answer/185833
Meteor: Back from the shadows
Tags: meteor, blitz, react
Published: 2021-01-18 21:59:53

I went from wanting to rewrite our entire app to being optimistic about the future of Meteor. Here are the main reasons why I think the future of Meteor is bright.

## Fullstack front-end frameworks

Blitz is a full-stack React framework. It reminds us of simpler times when for example PHP was used to server-side render websites. It allowed us to access the database and return the markup filled with the data necessary to display it. Fast forward a few years to see single-page applications become popular, along with a separate REST or GraphQL backend project. The drawback? You'd usually have at least one developer working on the front-end and a separate team for the back-end.

Blitz is built on the same principles as Meteor, but using the latest web technologies. The fact that Blitz is growing leaves me optimistic about Meteor's future.

## Supporting the major front-end frameworks

Blaze is Meteor's default rendering system but React, Vue, Angular, and Svelte can also be used with Meteor. In fact, we are writing everything new using React with Typescript and will eventually phase out every Blaze component while benefiting from the power of Meteor.

## Meteor 2.0

When React introduced Fast Refresh it shortened the feedback loop for developers, boosting the developer experience significantly. Hot Module Replacement is one of the new features introduced in Meteor's upcoming 2.0 release. For us, it decreased the rebuild time from up to 40 seconds down to 2 seconds - a 95% decrease! Tree Shaking is also coming in the 2.0 release that removes unused code at compile-time, resulting in smaller bundle sizes for the end-user.

## Conclusion

Have you ever tried Meteor? If you tried it a long time ago, a lot has changed. I recommend you give it a spin for your next side-project.

Have any questions? Hit me up on Twitter [🐦 gunnarthedev](https://twitter.com/gunnarthedev)
Resolve promises in sequence with RXJS (ConcatMap)
Tags: javascript, angular, rxjs, tutorial
Published: 2021-01-19 05:26:45

This article will be a short one mainly on resolving / handling promises in sequence using RXJS. One such example would be fetching a series of data, one after another, but only after the current one resolves.

The go to RXJS operator to achieve this is **ConcatMap**. When our use case requires sequentiality, ie. queueing a set of events to be resolved in order, we can consider ConcatMap as a possible solution.

ConcatMap when paired with RXJS's **Subject** will present you an easily modifiable, readable, function that can be adapted to most use cases. Here's the code:

```typescript
from([1, 2, 3]).pipe(
    concatMap(id => {
        const res$ = new Subject();

        fetch(`url-to-api/${id}`)
            .then(res => res.json())
            .then(res => {
                res$.next(res);
                res$.complete();
            });

        return res$;
    })
).subscribe();
```

In the ConcatMap operator, we return a Subject. 

This way, we can control the flow of the stream, we can decide when is the time to complete the current event and go to the next. The next request will not fire until the current one completes, which we'll do so via `.complete()` call.

In between the fetch response and the completion of the subject, it is the gap for us to perform any modifications, or actions that is required.

In closing, [here's a codepen](https://codepen.io/jenning/pen/GRjzMve) to demo the code above.
Field Service Management App - Genic Teams
Tags: showdev, ai
Published: 2021-01-19 05:15:19

Looking for No. 1 Field Service Management App? If yes then Genic Teams is the best option for you. Feel free to call on +65 6834 3026 to get best quotes for Field Service Management System for small and large business in Singapore. So if you are interested to manage your field activities effectively then feel free to get in touch with experts at Genic Teams. We are well known for offering No. 1 Field Service Management System at low budget.

Know more: https://www.genicteams.com/

Address: 8 Burn Road, #07-16 Trivex, Singapore 369977

Tel: +65 6834 3026

Email: sales@genicteams.com
Effective Java: Write Doc Comments For All Exposed APIs
Tags: java, effective, documentation, architecture
Published: 2021-01-19 05:05:11

---
title: Effective Java: Write Doc Comments For All Exposed APIs
published: true
description: A dive into chapter 55 of Effective Java
tags: java, effective, documentation, architecture
series: Effective Java Review
canonical_url: https://blog.scaledcode.com/blog/effective-java/write_docs_for_all_exposed/
---

The final chapter of this section of _Effective Java_ brings us to everyone's favorite topic, documentation. The particular type of documentation that this chapter focuses is about JavaDocs. As has been discussed before in this series, _Effective Java_ seems to largely target writers of Java libraries. Nowhere is this focus seen as much seen as in this chapter. While I still think it can be good information to learn for your "average" Java developer, its applicability may not be as high as other chapters in this book.  

As the applicability of this chapter seems lower to me I think I'll just cover the highlights and encourage those interested in finding out more into diving into the book to learn the details there. 

* JavaDocs should be focused on the contract of methods, what should be given, preconditions to those variables, what will be returned, what happens during errors, and side effects. 
* No two members of constructors in a class should share the same JavaDoc
* JavaDoc are often rendered into HTML, this can be used to your advantage to allow better formatting or can end up causing bugs when accidentally running into that parsing when you weren't expecting. 
* Testing JavaDoc often comes to just taking a look at it and making sure it looks correct.

There is a lot of power and ability to document your code through the JavaDoc tool. If you go to the trouble of writing this documentation, and you should if the primary purpose of your code is to be consumed by other Java developers, take the time to do it right. This means making it useful, documenting completely, hosting the JavaDoc somewhere accessible, etc. A halfway done job of documentation is likely worse than none at all. Also it can be of note that maybe JavaDoc is not the most useful type of documentation for your particular code, only you will know that as your look at how it will be used.
Add comments in JSON file
Tags: json, webdev
Published: 2021-01-18 17:50:19

Spoiler: I lied.

![terminator-image](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9fpRnQXUVzuuo7c1b9MVetm8wcPJEuYtOjw&usqp=CAU)

[giphy video](https://i.giphy.com/media/rigB6iCSm8F68/giphy.mp4)

As you know, you cannot and will never can add comments in JSON file **but** you can add something that *seems* a comment 😈:

```json
"_____________________________CSS_____________________________": "",
```

Using this key:value pair separator you can tidy a long and complex JSON as _scripts_ in `package.json`

```json
{
  "name": "super-styleguide",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "_____________________________CSS_____________________________": "",
    "stylelint": "stylelint 'src/scss/**/*.scss' || echo \"Stylelint failed for some file(s).\"",
    "scss-to-css-dev": "node-sass --output-style expanded src/scss/styles/develop -o src/css/",
    "css-to-postcss-dev": "postcss src/css --dir dist/css",
    "styles-dev": "npm run stylelint && npm run scss-to-css-dev && npm run css-to-postcss-dev",
    "_____________________________SVG_____________________________": "",
    "clean-svgo": "rimraf src/icons/svgo/*",
    "svg-optimize": "npm run clean-svgo && node scripts/svgo.js",
    "_____________________________Webpack bundle__________________": "",
    "bundle": "webpack --env.production",
    "bundle:uiengine:chunk": " cross-env NODE_ENV=production webpack --env.production --config webpack.uiengine.config.js",
    ...
    ...
  },
```

> 📚 More info
>
> [JavaScript Object Notation (JSON) - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)
Using ScrollReveal.js with React Hooks
Tags: react, tutorial, javascript
Published: 2021-01-19 03:43:25

Today, I decided to improve [my website](https://hnrq.dev/) by adding **scroll reveal** to it. For that, I chose jlmakes' [ScrollReveal.js](https://github.com/jlmakes/scrollreveal) which solved my problem in a snap, the biggest problem was **integrating it with React** (Turns out, it was also a piece of cake). 

## The code
ScrollReveal.js provides a constructor `ScrollReveal()` that returns its instance. The method `reveal()` is responsible for registering the target element with `ScrollReveal`, it has a `target` argument (which can be a CSS Selector, a DOM Node, or an Array of Nodes) and an `options` argument which allows customizing the reveal behavior. That being said, we can use `useRef` hook to connect the React Node to ScrollReveal:

{% codesandbox divine-grass-s27xs %}
CollectionView: SelectionMode with Navigation and LongPress
Tags: xamarinforms
Published: 2021-01-19 03:39:12

Let's use a long press gesture to initiate the multiple selection mode in `CollectionView`, and then a tap gesture for navigating to other pages when selection mode is none. This video continues the journey of building out a photo gallery experience in Xappy.

{% youtube As5vv40ZmsE %}

{% gist https://gist.github.com/davidortinau/182d604f7f9a931c5bdf3d54d425a201 file=snippet1.xaml%}

{% gist https://gist.github.com/davidortinau/182d604f7f9a931c5bdf3d54d425a201 file=snippet1.cs%}

{% gist https://gist.github.com/davidortinau/182d604f7f9a931c5bdf3d54d425a201 file=snippet2.xaml%}

### Resources:
* [Docs: Selection](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/selection)
* [Docs: Navigation and passing data](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation#pass-data)
* [Xamarin Community Toolkit: TouchEffect](https://github.com/xamarin/XamarinCommunityToolkit)
* [Blog: Touch Effect](https://andrei-misiukevich.medium.com/touch-effect-xamarin-forms-xamarin-community-toolkit-91fb6691f99e)

{% github davidortinau/Xappy no-readme %}
Inventory Management Software System - Genic Solutions
Tags: opensource, management
Published: 2021-01-19 03:39:02

Are you looking for a reputed company for Inventory Management Software in Singapore? If yes then Genic Solutions is the best option for you. We are one of the leading software company offering Top-notch and innovative Inventory Management System to keep track of your all inventory levels, sales, orders, and deliveries as well. By using this IMS you can avoid all kinds of paperwork and spreadsheets. So why are you still waiting? Make our Inventory Management System part of your business and see the effective results.

Know more: https://www.genicsolutions.com/ims/

Address: 8 Burn Road, #07-16 Trivex, Singapore 369977

Tel: +65 6834 3026

Email: sales@genicsolutions.com
CollectionView: Clearing Selection
Tags: xamarinforms
Published: 2021-01-19 03:25:03

`CollectionView` supports single and multiple item selection modes. Sometimes after selecting items, the user may want to clear all selections and start afresh, or you may want to reset after an action has been taken. This is super easy!

{% youtube rBekt23-YH0 %}

{% gist https://gist.github.com/davidortinau/64356db918d92656e19ddcc0df58ea72 %}

You may instead bind the `SelectedItems` and `SelectedItem` to your binding context (e.g. ViewModel) and reset the collection there.

### Resources:
* [Docs: Multiple selection](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/selection#multiple-selection)

{% github davidortinau/Xappy no-readme %}
Prepare a set of Rust tools that can be used with zsh in zinit
Tags: zsh, rust, beginners, webdev
Published: 2021-01-19 02:01:22

- I was using **oh-my-zsh** as a plugin manager to extend zsh, which has become the standard shell for Macs, but changed to a lightweight tool called [zinit](https://github.com/zdharma/zinit) in terms of operation.
- At the same time, it turned out that I could use the Rust command tools that I usually use (**ripgrep and exa**).
- In this article, we will describe how to set up **zinit** and configure the tools.

## Environment
- Mac OS X 10.15.6
- ZSH 5.7.1

## Procedure

### Install zinit
- Install **[zinit](https://github.com/zdharma/zinit)** (a lightweight and fast zsh plugin management tool) in your environment with the following command.

```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/zdharma/zinit/master/doc/install.sh)"
```

- After entering the command, the following information will be automatically entered in `~/.zshrc`.

```bash
### Added by Zinit's installer

# ...............

source "$HOME/.zinit/bin/zinit.zsh"
autoload -Uz _zinit
### End of Zinit's installer chunk
```

- Update manually with the following command.

```bash
zinit self-update
```

## Selecting a tool
- This time, the Rust command tools managed by zinit are as follows.
    - [ripgrep](https://github.com/BurntSushi/ripgrep)
        - Fast grep alternative tool
    - [exa](https://github.com/ogham/exa)
        - Fast ls alternative tool
    - [bat](https://github.com/sharkdp/bat)
        - Fast cat alternative tool
    - [fd](https://github.com/sharkdp/fd)
        - Fast find alternative tool

## Setting up zshrc
- After completing the tool selection, describe the following plug-in contents in `.zshrc`

```bash
### Added by Zinit's installer
# ....
### End of Zinit's installer chunk

# ripgrep
zinit ice as"program" from"gh-r" mv"ripgrep* -> rg" pick"rg/rg"
zinit light BurntSushi/ripgrep

# exa
zinit ice as"program" from"gh-r" mv"exa* -> exa"
zinit light ogham/exa

# bat
zinit ice as"program" from"gh-r" mv"bat* -> bat" pick"bat/bat"
zinit light sharkdp/bat

# fd
zinit ice as"program" from"gh-r" mv"fd* -> fd" pick"fd/fd"
zinit light sharkdp/fd
```

- After saving, load it with the following command

```bash
source ~/.zshrc
```

- The tool will start downloading, and after it finishes, enter the various commands.
    - ripgrep : `rg word`
    - bat : `bat filename`
- Once confirmed, you are done.

## Link
- [Github](https://github.com/zdharma/zinit)
- [Document](http://zdharma.org/zinit/wiki/)
- https://github.com/zdharma/zinit/issues/278
CollectionView: Selecting Multiple Items
Published: 2021-01-19 03:18:24

`CollectionView` supports single and multiple item selection modes. Multiple selection is great for creating a photo gallery sharing style experience or similar. This video takes the first step by selecting multiple photos, and using `VisualStateManager` to display a special selection indicator.

{% youtube p8Ux8f_tCq4 %}

### Resources:
* [Docs: Multiple selection](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/selection#multiple-selection)
* [Docs: Visual State Manager](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager)

{% github davidortinau/Xappy no-readme %}
Tinting Icons and Images in Xamarin.Forms
Tags: xamarinforms, design
Published: 2021-01-19 03:14:46

Sometimes you need to change the color of an icon, but you don't want to go through the ceremony of rebuilding the FontImageSource. Who does?! The Xamarin Community Toolkit recently added a very convenient tint effect just for this purpose.

{% youtube hAKIjIXLuLg %}

{% gist https://gist.github.com/davidortinau/b2c57cb5373d5f494c091c2509e4f6ef %}

### Resoures: 
* https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Effects/IconTintColorEffectPage.xaml

{% github davidortinau/FlyMe no-readme %}
What is Event Bubbling in JavaScript?
Tags: webdev, javascript, codenewbie, beginners
Published: 2021-01-19 03:09:35

This post will reveal the mystery of **button**, how it works when you click it. Let's learn about `Event Bubbling in JavaScript`. 

---

### What does it Mean?

Whenever an event is started, it goes form the deeply nested element to all way up to its ancestors' element to up to its ancestors which lie on top of it. 

#### What are events? 

An event is something which makes our JavaScript interact with the HTML page. Just like the `"onClick"` event of a button. 

The element which triggers the event is called "target" ad can be accessed using "**event.target()**". The current element on which the handler currently runs can be accessed using **"this"** inside the handler function. Eg: 

```html
<div id ="parent">
    <button id="child">
        I am child
    </button>
</div>

<script>
    var parent = document.getElementById('parnet'); 
    parent.addEventListener('click', function() {
        alert("Parent is clicked"); 
    })
    
    var child = document.getElementById('child'); 
    child.addEventListener('click', function(){
        alert("Child is clicked"); 
    });
</script>
```

In this example, we have added an event listener to our parent and child. So when we click on "child" we should see an alert with **"Child is clicked"** only right?  But we see two alert boxes first with a message "Child is clicked" and then with **"Parent is clicked"**. 

What happens behind the scenes is that when we trigger the click event on the child, the event **propagates** up to the parent triggering all the handler on its way. This is called "**bubbling**". 

If we want to stop the propagation at some point, then we have a method called `"event.stopPropagation()"`. This will stop the handler from being called on the particular `div`. But all other handlers will execute, if we want to stop all the handlers we use `"event.stopImmediatePropagation()"`. 

---

⚡Thanks For Reading | Happy Coding 😎

Get weekly newsletter of amazing articles i posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>