teleren/devto huggingface dataset:
Integrating Cloud Functions in a Flutter application
Tags: huawei, flutter, android, cloud
Published: 2022-01-19 16:54:57

Cloud Functions enables serverless computing through Function as a Service (FaaS) capabilities to simplify app development and O&M. This helps you implement functions more simply and build service capabilities more quickly. The following describes how to integrate Huawei's AppGallery Connect Cloud Function service in Flutter. 
We will create a basic new project as an example but of course you could make use of a project you already have thats using flutter!

## Project Setup
### Install the Flutter environment.
Download the [Flutter SDK package](https://flutter.dev/docs/get-started/install/windows) and decompress the package to any directory.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcw1yfftv3tf57dnnjs1.png)
Download the Flutter and Dart plugins in Android Studio.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdzrnlc5sq4nqu35hnv2.png)
 
### Enable Huawei Cloud Functions
Create an Android app in AppGallery Connect and enable Cloud Functions for it as detailed in this [guide](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-cloudfunction-getstarted-0000001059119572). 
Now we can go ahead and create a cloud function as you require it use this [guide](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-cloudfunction-config-0000001058511532) to help understand what can be done. 
Once your happy with your function (in this instance it might just be as simple as returning a hello world statement for testing) you can go ahead and create a [HTTP trigger](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-cloudfunction-httptrigger-0000001126992899) that will trigger the function.

### Create Flutter Project
Next create your flutter project in android studio (or open your existing project if you already have one!).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiwn6dm3fpa82lnnjkme.png)
Download your **agconnect-services.json** file from the AppGallery Connect console and add it into your project under the 'app' directory 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08zhwhcymklq1mo1k66n.png)
 
Within the project level **build.gradle** file make sure to include the huawei maven repo and add the agcp package as a dependency.

{% gist https://gist.github.com/devwithzachary/961ca8035184a4de307c48003bda385a %}

Next in your app level **build.gradle** apply the agconnect plugin as so:

{% gist https://gist.github.com/devwithzachary/36775c105e9ebeac07cbb324014d4d7b %}

Then in your **pubspec.yaml** file add the Cloud Function SDK dependency. 

{% gist https://gist.github.com/devwithzachary/6690dd4d652f277652b89d101c62c6df %}

### Call the Cloud function

The below code is an example of how you can call a simple cloud function and get the result returned. 

{% gist https://gist.github.com/devwithzachary/8ee9cb1faefcba889df5ac600369f83b %}

Where test-\$latest is the HTTP trigger identifier.
Going past the finish line
Tags: beginners, programming, career, commitment
Published: 2022-01-19 16:34:00

Been contemplating about writing this for a while. Seeing that I have committed myself to starting over my tech career and to myself here goes...

I am a student who starts tasks and projects with so much enthusiasm and zeal then somewhere close to the goal I panic and give up altogether. Done this far too many times and I go back to the cycle again.

As I write this, I am making myself accountable and going past the finish line. No matter what.

There are many things which I need to do and code to run despite the lack of time at the present due to procrastination. I have realized I work well under pressure-maybe a way of putting my ADHD to the test (not a pretty sight) . In addition, I am quite a resourceful person and ensure that I make things happen-I am proud of this as it is one of my character traits.

So I am making this happen and journaling my progress here counts as my accountability space? Partner maybe?

No bitching around and making excuses-cross the finish line. Remember it's a marathon as long as you are on the other side and see how far you've come, that feeling is priceless.

Hope you can cheer me along as I do this and finish my final year project and get my degree.

Or maybe you need some inspiration and encouragement-you've got this and I am rooting for you.
Creating A React App
Published: 2022-01-19 16:19:06

For my final project I decided to challenge myself a little more by branching off into a project that was not just a bland data management app like previous projects. I decided to go with an app that would allow users to create their own custom flash cards and use those same cards to study for whatever they desire. As I stated before it was out of the ordinary so I knew the journey ahead was going to be a tough one for sure.

I started out by making my Rails API which had become significantly easier thanks to the great material and support from Flatiron staff during the Rails module. Once the API was complete I moved on to create a React app where I imported all of the required extensions and dependencies I would need for the project such as React itself, ReactDOM, Redux, thunk and etc. From that point I immediately started learning how to make asynchronous requests with fetch inside of my components since this was going to be a major focus on the project plus any project involving an API for that matter.

After struggling with the React learning curve for about a week I started understanding asynchronous requests and how to display the data inside of my React components. My project wasn't full CRUD but all I really needed was a Read operation to display information and an Update operation to allow users to create their own cards. Once I felt comfortable I moved on to shaping out the rest of the app with routing, component placement, and eventually styling with CSS.

After a few more weeks plus struggling to study during the holidays I managed to finish my app named "Flash-Study" that met all project requirements, met MVP(Minimum Viable Product) goals, and worked as intended. It was a major learning opportunity for not only React but for all other technologies I learned along the way. This may be the last project for Flatiron but I still have so many more ahead of me that I cannot wait to start!
React hooks
Published: 2021-12-30 12:48:23

Almost all programmers fall in love when they hear the name React JS.
Let's get started.
React JS is one of the most popular libraries of JavaScript language. The second reason behind this is that it makes the web page much faster, and being a single-page application, the fun of working here is different. 

So in 2021, everyone's attention has been drawn to this library reaction.
React has several hooks that make it easier and more popular to work with. The hooks are described below. useState, useEffect, useMomo, useCallback, useRef, useContext

**1.useState:** First of all, let's talk about useState. It is used for data rendering. It helps to declare the state in the function component. All kinds of updates are done through this state.
React has two types of components viz
-> Class component
-> Functional Component
Although currently functional components are being used more. Because its benefits are more. The code is less written.

**2.useEffect** - It is also called a side effect because all the side effects in UI will be for this hook. fetching data, updating DOM, setting the timer, etc. can be done very easily with it.,

Actually, It is a function and it takes 2 parameters. The first one is actually a function and the second one is an array which is also called dependency. This hook will work whenever there is an update in React. It will be updated when the component is rendered.

**3.useMemo:** This functional component is used to return a memorized value. useMemo should be used when processing large quantities. Depending on your application when the memo becomes attractive to avoid additional processing, it will block the thread until the costly function is completed, as useMemo runs on the first render. In subsequent renders, expensive functions will not need to be run again until the list of items changes. useMemo will "remember" the return value of each function.

**4.UseCallback:** Suppose you have a component that is being rendered over and over again without the need. Passed an inline callback for this and array for dependency. It returns a single memorized version.

**5.useRef:** Creates a direct reference to the atomic element in the functional component. const refContainer = useRef (initialValue). It's React's built-in hook. This allows you to maintain the rendered value. There is no need to change the AT if you need to give an update. It can directly access the DOM element.

6.useContext: useContext is a context API consumer hook that consumes global store’s data
HoloLen 2 App Dev Fundamentals Challenges
Tags: hololens, appdev, mixedreality, virtualreality
Published: 2022-01-19 16:11:29

Are you interested to learn HoloLen 2 App development? you can join now to the HoloLen 2 App development challenges.  you will be assigned to one of four teams in a competition to see who will have the most learners complete the required training by January 31, 2022.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/soit50lyvrfprygkrxlp.JPG)

**HoloLen 2 App Development Fundamentals**

Learn how to build mixed reality apps for HoloLens 2 - no device required. In this challenge, you'll set up an MR project in Unity with 3D objects to interact with. Then, you'll add eye tracking, voice commands, spatial audio and spatial anchors. Finally, you'll learn to add AI and holographic remoting capabilities.

These are topics are covered as follows:-
✔️ Configure Unity and set up a project with the Mixed Reality Toolkit
✔️ Add hand interactions to manipulate objects
✔️ Position, organize, and layout objects
✔️ Use solvers to create intelligent object placements
✔️ Add buttons, dynamic menus, and descriptions to objects
✔️ Use controls to manipulate objects
✔️ Enable eye-tracking and voice commands
✔️ Anchor objects to the real world
✔️ Add spatial audio to an application
✔️ Use speech recognition and transcription
✔️ Integrate to cloud services like custom vision and bot services
✔️ Create a Holographic Remoting app to visualize 3D content

if you want to set up the environment of Hololens, you can find the resource here
https://lnkd.in/gbMNUycY

Join the Challenges here https://lnkd.in/gjnSRHsk

I am part of this "**Holowhos**" team and we are in 2nd Rank of Leader board. 

Please feel free reach at me
Twitter @msanthakumara
 

#microsoft #mslearn #cloudskillschallenges #hololens #hololens2 #mixedrealities, #holograms #virtualreality
shift+Insert, when did this become my goto for paste
Tags: watercooler
Published: 2022-01-19 16:10:53

My computing history (where a clipboard existed) began on old school Macintosh's. For past from clipboard `⌘+v` was how it was, `ctl+v` on Windows when that system became my usual OS.
Dabbling in Unix and Linux necessitated the learning of `shift+insert` (and middle click in most window managers.)

I still use Windows the most due to work and gaming, but usually have a terminal open to a Linux system for various uses. I'm glad that many windows interfaces support the `shift+insert` variant for pasting copied or cut content.

What do you use most now? Did you change your default paste command? What triggered that change?
My github readme page
Tags: github, tutorial, career
Published: 2022-01-19 16:04:17

Hi there i just finished writing my github readme page 
[Readme.md](https://github.com/nermineslimane)
Here's a sneak peek 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp37cbmo7w52hcjcxec5.png)
 
Take a look and give me back your feedback and I can share how I managed to makke it that way feel free to get inspired and make your github better !
Six best practices for app modernization to empower your business
Tags: legacy, app, react, mobile
Published: 2022-01-19 15:47:56

**Challenges faced with legacy systems and how to solve them with app modernization**

Most enterprises, even in today’s time, have core applications that are architected primarily to work in legacy IT landscapes. When the systems don’t align with the business goal, there arise several conundrums; and the cause is using apps based on legacy systems. These apps mostly operate on an on-premises dedicated environment causing the following challenges for companies:

* Slowing down IT operations
* Hindering productivity
* Blocking innovation
* Unable to handle a large volume of data
* Increasing vulnerability to risks like cyber security threats

**Six best practices to adopt for app modernization** - https://www.softwebsolutions.com/resources/app-modernization-to-empower-your-business.html
Setting up TailwindCSS in React App project.
Tags: react, tailwindcss, javascript, css
Published: 2022-01-19 15:32:21

## **Getting Started**
First, create a React project with create-react-app:

```
npx create-react-app react-tailwindcss
```

if Create React App version < 5.0:

```
npx create-react-app@latest react-tailwindcss
```
or

```
npx create-react-app@5.0.0 react-tailwindcss
```

## **Install TailwindCSS**
Install the dependencies required for Tailwind CSS:

```
npm install -D tailwindcss postcss autoprefixer
```

Next, generate your config `tailwind.config.js` file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package:

```
npx tailwindcss init
```
It will have the following content:

```
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Use the -p flag if you’d like to also generate a basic postcss.config.js file alongside your tailwind.config.js file:

```
npx tailwindcss init -p
```
This will generate a `postcss.config.js` file in your project that looks like this:

```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

First, we’ll change the `content` key in `tailwind.config.js`:

```
content: ["./src/**/*.{js,jsx,ts,tsx}"],
```

## **Include Tailwind in your CSS**
Use the @tailwind directive to include Tailwind’s base, components, and utilities styles, replacing the original file contents:

```
@tailwind base;
@tailwind components;
@tailwind utilities
```

Let’s start the server now. Run the following command:

```
npm start
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mtrwzlqyxmwuo6nk60x.PNG)

You can view a demo of the website we’re creating [here](https://github.com/sirimainsorn/react-tailwindcss.git)
How to integrate Paddle.js with Next.js?
Tags: nextjs, paddle, typescript
Published: 2022-01-19 15:30:01

> This article was originally posted on my [personal blog](https://deiucanta.com).

---

First, you should add some variables into your `.env` file.

```
PADDLE_VENDOR_ID=...
PADDLE_VENDOR_AUTH_CODE=...
PADDLE_SANDBOX=true

NEXT_PUBLIC_PADDLE_VENDOR_ID=$PADDLE_VENDOR_ID
NEXT_PUBLIC_PADDLE_SANDBOX=$PADDLE_SANDBOX
```

Next, create a component called `PaddleLoader`.

```tsx
import Script from "next/script";

export function PaddleLoader() {
  return (
    <Script
      src="https://cdn.paddle.com/paddle/paddle.js"
      onLoad={() => {
        if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
          Paddle.Environment.set("sandbox");
        }
        Paddle.Setup({
          vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
        });
      }}
    />
  );
}
```

Next, include `PaddleLoader` in your page

```tsx
import { PaddleLoader } from "...";

export default function Page() {
  return (
    <>
      <PaddleLoader />
      <button
        onClick={() => {
          Paddle.Checkout.open({
            product: "...",
          });
        }}
      >
        Buy
      </button>
    </>
  );
}
```

If you use TypeScript, you should create a file called `types.d.ts` in the root of your project.

```ts
declare global {
  var Paddle: any;
}
```
React App project unable to run from a shared drive
Published: 2022-01-19 15:29:48

i have created a react app on a network share (the whole project is a network drive) becuase this my team will have access to project and do development. but when i do "npm start" it just hangs and doesn't do anything. is the problem that the network is causing this? or is there some issue with the firewall where the development server won't start on my computer

Or should i use some type of source control like Github or VS TFS to share the react among the developers?
Machine Learning for Developers & PMs
Tags: machinelearning, product, opensource, ai
Published: 2022-01-19 15:26:21

Hey, I’m Merve from [Hugging Face](https://huggingface.co/), an Open-Source Company working in the democratization of responsible Machine Learning. 👋

We want to reduce the barrier of entry for software developers, product managers and anyone else that want to learn about machine learning and create awesome products with ML. Our recent Open-Source initiative is called “Tasks”, we curated use cases, tutorials, ready-to-use models (and how to use them with few lines of code or simply sending a request), datasets and more to help you in your path in building ML products. 🙌🏼

We appreciate feedbacks 🤗

You can get started with learning [here](https://huggingface.co/tasks). You can also use hf.co/tasks shortcut. 🤓
Complete tutorial for Angular
Published: 2022-01-19 15:19:46

Hello, I am looking for a complete tutorial for Angular. I have tried using tutorials videos an youtube and that is not the best use of my time. Pausing the video and installing the software packages I could never resolve all the errors and missing references.  I am looking for something that has the complete software references and how to. I appreciate any help to point me in the right direction. Thank you, Joe.
How to use a different email address in Git in sub directories
Tags: git
Published: 2022-01-19 15:18:41

## Motivation

I want to override my personal email address I use for Git with my work email address in my work directory without manually changing it each time.

## Create a config file in the work directory

```
touch ~/path/to/work/directory/.gitconfig
``` 

```
# any customization/overrides can be added here
[user]
        name = Clarice Bouwer
        email = clarice@example.com
```

## Update ~/.gitconfig

```
[includeIf "gitdir:~/path/to/work/directory/"]
    path = ~/path/to/work/directory/.gitconfig
```

## Verify

```bash
cd ~/
git config user.email # should be your default config email

cd ~/path/to/work/directory
git config user.email # should be your override email
```

Based on [Stack Overflow](https://stackoverflow.com/questions/21307793/set-git-config-values-for-all-child-folders): Set Git config values for all child folders and [Alvin Alexander](https://alvinalexander.com/git/git-show-change-username-email-address/): Git show change username and email address.
#Python 🐍- Working with Environment Variables and python-dotnenv
Tags: englishpost, environmentvariables, python
Published: 2022-01-29 17:00:55

---
title: #Python 🐍- Working with Environment Variables and python-dotnenv
published: true
date: 2022-01-19 15:10:25 UTC
tags: EnglishPost,EnglishPost,environmentvariables,Python
canonical_url: 
---


<p>Hi ! </p>

<p>The <a href="https://developer.microsoft.com/en-us/advocates/" target="_blank" rel="noreferrer noopener">Microsoft Cloud Advocates</a> team is great and, hey everyday I learn something new. A couple of days ago we were talking about working with Environment Variables and Virtual Environments. </p>

<p>I wrote several times about working with Virtual Envs, like 

<ul><li><a rel="noreferrer noopener" href="https://elbruno.com/2020/05/13/windows10-windowsterminal-and-anaconda-bonus-start-an-anaconda-virtual-environment/" target="_blank">WindowsTerminal and Anaconda, start an Anaconda Virtual Environment</a></li><li><a rel="noreferrer noopener" href="https://elbruno.com/2020/08/21/anaconda-how-to-list-and-remove-virtual-environments-get-back-some-disk-space/" target="_blank">How to List and Remove Virtual Environments (get back some disk space!)</a></li></ul>

<p>And, I even solve this problem editing the activate and deactivate scripts a long time ago. </p>

<p>Today, I learn that we have the chance to use an amazing library to work with Environment Values: <a href="https://pypi.org/project/python-dotenv/" target="_blank" rel="noreferrer noopener">python-dotenv</a>.</p>

<p>Note: for this specific scenario, we are going to define and load env values in a file named [.env].</p>

<p>Check the documentation of the package for a complete reference. Here are 3 steps to show how easy is to use.</p>

<p>We start installing the package</p>

<pre class="wp-block-syntaxhighlighter-code">pip install python-dotenv</pre>

<p>I created a new python file to test [demo.py] and in the same folder a file to store environment variables [.env].</p>

<figure class="wp-block-image size-large"><img src="https://brunocapuano.files.wordpress.com/2022/01/file-structure-for-venv-load-vars-demo.jpg?w=868" alt="file structure for venv load vars demo" class="wp-image-35097"/></figure>

<p>A couple of code lines will get the values from the env file and ... done !</p>

<pre class="wp-block-syntaxhighlighter-code">import os

load_dotenv()
print(f'Foo value from .env: {os.getenv("FOO")}')
print(f'Foo value from .env: {os.environ.get("FOO")}')</pre>

<figure class="wp-block-image size-large"><img src="https://brunocapuano.files.wordpress.com/2022/01/image-19.png?w=670" alt="" class="wp-image-35099"/></figure>

<p>Super easy to use ! </p>

[Continue reading #Python 🐍- Working with Environment Variables and python-dotnenv](https://elbruno.com/2022/01/19/python-%f0%9f%90%8d-working-with-environment-variables-and-python-dotnenv/)
Github Student Developer Pack
Tags: webdev, javascript, programming, react
Published: 2022-01-19 14:58:00

Hey folks we all already know what is [GitHub ](https://github.com/) if you are not aware about GitHub go and check with above link associated with GitHub word.
I recently aware about the program for student which provide by GitHub for school students known as GitHub Student Developer pack. Which includes various courses with subscription and its absolute free for students who current enrolled in campus or colleges and how you get this student pack follow the steps given below :-
##Follow the Steps
1. Go to official website of GitHub Student Developer pack
[GitHub Education](https://education.github.com/pack)
2. Sign Up for student Developer pack
3. You redirect to the page where you have to filed your college ID and college name.
4. Then continue with process and another steps you have add your college proof 
ex: College ID or proof of your college enrollment with details.
5. Submit your application and it will be review from GitHub with in 2 weeks and you also get verify mail when your application approved from GitHub.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ogojauryqy8hu8wc20a.png)
The interface looks like above image for step 1 and then follow the steps one by one.

You will get unlimited benefits from this student developer pack which capable to make you developer. and also check the another program on GitHub platform for students and its also provide teacher developer pack also if you are then also get benefit from it.

Connect with me on [Twitter (https://twitter.com/PatilGanesh1010) if you are web developer I am sharing lot of content on twitter like this and tools which save your precious time...!!