teleren/devto huggingface dataset:
Flutter Là Gì- Những Tính Năng Vượt Trội Của Flutter
Published: 2020-11-25 10:04:51

Flutter là gì- Đây là một trong những nền tảng ứng dụng được người tiêu dùng đánh giá cao và được rất nhiều người lựa chọn.Xem chi tiết tại: https://blog.itnavi.com.vn/flutter-la-gi/
6 async syntax variations in Javascript.
Tags: javascript, async, promises
Published: 2020-11-25 10:04:14

Using async/await is prefered over the `.then` syntax since it makes asynchronous code look synchronous and thereby easier to read. And code is all about beeing readable, right? However it's not always super clear where to put that async command.

Async arrow functions look like this:

```
const foo = async () => {
  // do something
}
```

Async arrow functions look like this for a single argument passed to it:

```
const foo = async evt => {
  // do something with evt
}
```

Async arrow functions look like this for multiple arguments passed to it:

```
const foo = async (evt, callback) => {
  // do something with evt
  // return response with callback
}
```

The anonymous form works as well:

```
const foo = async function() {
  // do something
}
```

An async function declaration looks like this:

```
async function foo() {
  // do something
}
```

Using async function in a callback:

```
const foo = event.onCall(async () => {
  // do something
})
```
Creating playable ads directly from a game in Unity
Tags: unity3d, javascript
Published: 2020-11-25 10:00:37

Hey folks, I'd like to invite you to Luna Playable free webinar 💥 🎮

You've made a great game in Unity and you'd like to build a playable ad that truly represents the gameplay? Luna Playable is an extremely useful tool for Unity Developers to translate C#/Unity project to Javascript!

To give you an overview of this tool we’ve invited three experts, who will share their expertise from three perspectives: the platform, the publisher, and the developer who implements it.

🔴 Agenda:
The webinar will include three parts plus Q&A:
— Introduction to Luna Playable;
— Live coding session with a focus on Luna Playable by Mike Silanin from Innovecs;
— A case study with a focus on Luna Playable by Karen Levy from SuperSonic.

🔴 Speakers:
🙋 Niall Jones — Head of Platform at Luna Labs.
🙋‍♂️ Mike Silanin — Software Engineer at Innovecs, focused on Unity Development.
💁‍♀️ Karen Levy Atias — Director of Creatives in SuperSonic.

📆 When: December 2nd, 7:00 pm (EET)
💻 Where: Online (a live stream link will be sent to your email)
💎 It's FREE!
💥 Register here: http://bit.ly/3nZHkzp

Let's create playable ads directly from a game in #Unity using Luna Playable!
Best JavaScript Frameworks 2020
Tags: javascript, frameworks, angular, frontend
Published: 2020-11-25 09:57:35

**1.Angular**
The 1st place in our list of Best JavaScript Frameworks goes to [Angular](https://creativomentes.com/what-is-angularjs-used-for-difference-between-angularjs-and-reactjs/). Angular  is the best front end framework used for making single page applications.
This single page applications are made using simple HTML and TypeScript. Today Angular is used for developing large scale projects in big companies.
Angular is one of the most secure JavaScript Framework used for developing  applications. Currently millions of websites are using Angular including Microsoft, IBM and Google.
Component Based Architecture in Angular saves you a lot of time and also provide consistency for larger applications.

**2.ReactJS**
The 2nd spot in the list goes to [ReactJS](https://creativomentes.com/what-is-react-js-difference-between-reactjs-and-react-native/). One of the favourite JavaScript Framework of most of the developers.
It is an open source front end JavaScript Library that was created by Facebook.React introduced a Component Based Architecture for creating interactive UIs and mainly for developing single page applications.
React's concept of ‘Virtual DOM’ that only renders components that have changed instead of rendering the whole page. It uses simple JSX syntax.

**3.VueJS**
The 3rd rank in our list goes to VueJS. Vue.js is an open source front end MVVM or model-view-viewmodel JavaScript Framework developed by Evan You in 2014, and is used to develop interactive User Interfaces(UIs) and Single Page Applications.
It is written in JavaScript and TypeScript.Its main goal is to provide UIs that are as simple as possible.
Vue.js is more lightweight [JavaScript Framework](https://creativomentes.com/top-5-and-best-javascript-frameworks-2020-front-end-framework/) as compared to ReactJS and AngularJS.

**4.EmberJS**
The 4th spot in this list goes to EmberJS. It is an open source JavaScript Framework used for developing single page web applications.
 Ember is a full stack framework which supports development of large scale projects. While in comparison Vue.js does not support development of large scale projects.

**5.ExpressJS**
The last JavaScript Framework on my list is ExpressJS. It is an open source software under the MIT.
Express is used as a back end web application for Node.js and it is used for developing web applications and APIs. It facilitates rapid development of Node based applications.
Change column type and convert data in Rails
Tags: rails, tutorial
Published: 2020-11-25 09:42:15

---
title: "Change column type and convert data in Rails"
published: true
description: My take on writing a Rails migration to change a column's data type and convert its values to the new type.
tags: rails,tutorial
//cover_image: https://direct_url_to_image.jpg
---

Wrote this post because I couldn't find an article in the World Wide Web on how to change the column type **and** convert its data.✝

So let's say we have a **Record** model with boolean column **master**, where a `true` values means that it's a _master release_ and `false` means that it's not. Records that aren't master releases can either be _re-issues_, _special editions_, _remixes_. We decided to model this info using just one column, and store it as `string`s.

Active Record's migration method `change_column` allows us to change a column's name and type. However it doesn't provide a way to also do data conversion.☦ My suggestion to implement this has three steps:
1. Add the column — **release_type** — with the new data type;
2. Convert boolean values from **master** column into respective string in **release_type** column;
3. Remove **master** column.

The migration code looks like this:
```ruby
def up
  add_column :records, :release_type, :string

  cast_values = <<-SQL
    UPDATE records
    SET release_type = 'Re-Issue'
    WHERE master = FALSE;

    UPDATE records
    SET release_type = 'Master Release'
    WHERE master = TRUE;
  SQL
  ActiveRecord::Base.connection.execute(cast_values)

  remove_column :records, :master
end
```

The `down` method would reverse this logic and it's left for the reader as exercise.

---

✝ Must confess that I bumped into many articles changing `integer` columns into `text`, or `datetime` into `date`. Although data conversion is implied it is something that Rails can handle on its own.

☦ [This article](https://makandracards.com/makandra/18691-postgresql-vs-rails-migration-how-to-change-columns-from-string-to-integer) does suggest that one can provide a SQL statement for data conversion. However I couldn't find any official documentation to support that.
Chrome Extension for your Github Gists user scripts
Published: 2020-11-25 09:38:03

Hi, 
wrote a small User Script Manager for Chrome, which is based on Github Gists and VS Code. 

Okay it is the [monaco editor](https://microsoft.github.io/monaco-editor/), which is VS Code based on.

I have sometimes some scripts which I used on a site, like fetch the ticket number on jira.

I saved those scripts as Gist on Github. Copy them from Github and paste it to the dev console bugged me, so i wrote a small extension.

Maybe someone else find it also useful: 

[Gist User Script Manager Chrome Extension](https://chrome.google.com/webstore/detail/gist-user-script-manager/plpmkifleemfflmlnogdncmhlljcpdab?hl=en&authuser=0)
React Native : Implement an animation with Hooks (useEffect, useState)
Tags: react, reactnative, animations, openclassrooms
Published: 2020-11-25 09:35:26

---
title: React Native : Implement an animation with Hooks (useEffect, useState)
published: true
description: React Native : Implement an animation with Hooks (useEffect, useState), or how to go from Class Components to Functional Components
tags: react, reactnative, animations, openclassrooms
//cover_image: https://direct_url_to_image.jpg
---

Hi everyone !

First article, ever, I suck at Markdown, let's get to the point.

I've been following an online course (https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/), which uses Class Components. 

2020, we're woke (kinda), I'm doing it with Function Components.

Now some parts have been written taking Classes and React Navigation V4 as a base (which will also require another article in the future), so here's a code to make animations work with Function Components.

Here's the code with a Class : 
```js
// Animations/EnlargeShrink.js

import React from 'react'
import { Animated } from 'react-native'

class EnlargeShrink extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      viewSize: new Animated.Value(this._getSize())
    }
  }

  _getSize() {
    if (this.props.shouldEnlarge) {
      return 80
    }
    return 40
  }
  // La méthode componentDidUpdate est exécuté chaque fois que le component est mise à jour, c'est l'endroit parfait pour lancer / relancer notre animation.
  componentDidUpdate() {
    Animated.spring(
      this.state.viewSize,
      {
        toValue: this._getSize()
      }
    ).start()
  }

  render() {
    return (
        <Animated.View
          style={{ width: this.state.viewSize, height: this.state.viewSize }}>
          {this.props.children}
        </Animated.View>
    )
  }
}

export default EnlargeShrink
```

And here's the code with a function : 
```js
import React, { useEffect, useState } from 'react'
import { Animated } from 'react-native'

export default function FavTouch({children, shouldEnlarge}) {
    const [size, setSize] = useState(new Animated.Value(shouldEnlarge ? 80:40))

    useEffect(() => {
        Animated.spring(
            size,
            {
                toValue: shouldEnlarge ? 80 : 40,
                useNativeDriver: false
            },
        ).start()
    }, [shouldEnlarge])

    return (
        <Animated.View style={{width: size, height: size}}>
            {children}
        </Animated.View>
    )
}
```
Feel free to give heads-up/changes if needed, see you around !
Technical interview tips - interview with CTO
Tags: career, beginners, video
Published: 2020-11-25 09:41:46

---
title: Technical interview tips - interview with CTO
published: true
date: 2020-11-25 09:34:00 UTC
tags: career,beginners,video
canonical_url: https://www.notonlycode.org/tech-interview-tips/
series: Finding a new job - interview guide for developers
cover_image: https://www.notonlycode.org/content/images/2020/11/2020-11-bart-interview.jpg
---

In this video I'm interviewing Bart van de Garde. Bart is an experienced CTO and software engineering manager with past positions at bol.com, VONQ and experience in e-commerce, recruitment and game development. Currently as a freelance CTO and IT consultant he helps organisations to connect business, technology and people.

Together with Bart we discuss technical interviews - what matters to us when evaluating candidate's skills, why we both prefer take home assignment rather than live coding, and most importantly we share some tips about how te perform better during the technical interview.

{% youtube MxfV4CG94Gw %}

🎥 Video timeline:

[0:00](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=0s) Intro  
[0:57](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=57s) Example of job interview process  
[2:55](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=175s) What are goals of techical interview  
[4:29](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=269s) Developer's motivation  
[5:11](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=311s) General skills vs specific technologies  
[6:46](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=406s) Development practices and their importance  
[8:24](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=504s) Take-home assignment  
[10:05](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=605s) What matters most in take-home assignment  
[13:13](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=793s) Technical discussion questions  
[15:00](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=900s) Why live coding is not a great idea  
[17:10](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=1030s) How would you prepare for live coding interview  
[20:55](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=1255s) Interviewing is matchmaking  
[22:10](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=1330s) Can you perform poorly and still get a job?  
[23:45](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=1425s) How do you assess communication and collaboration skills?  
[26:40](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=1600s) Preparation for the interview  
[27:35](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=1655s) Who and how makes the decisions?  
[30:25](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=1825s) What are good candidates candidates can ask?  
[34:10](https://www.youtube.com/watch?v=MxfV4CG94Gw&t=2050s) Outro
I Created a Responsive Portfolio Website Using HTML, CSS, Bootstrap, and JavaScript-Updated
Tags: html, css, webdev, javascript
Published: 2020-11-25 09:29:02

I already had created my portfolio from scratch using HTML, CSS, Bootstrap, and javascript. But this time I have updated my portfolio with attractive and responsive UI.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4lrrr4cvsllk99nao3c4.PNG)

Tell me, what amazes you? What should I change?

Here is the link to the portfolio:http://manojcse.me

Your feedback will be very important to me. It will help to enhance my development skill.

If you liked the style of the button and want to use it, then visit here :[MJBUTTON](http://www.manojcse.me/mjbutton.html)

If you don't know web technology or don't have time to create your portfolio from scratch. No Problem! I have created a tool for you it will create your portfolio with in 5 minutes without any coding. [Try It](http://codescript.in/ResumeBuilder)
Learning to promote oneself
Tags: resume, cv, github
Published: 2020-11-25 09:12:48

You know when you get to learn new things and sometimes you learn them from interns?

I mentored a few interns during my career (since ~2007) and most of them were pretty standard-scared-little interns.
I don't mean this in a bad way, or to demean anyone; as an intern is how I started, and looking back.... I am now wondering how I was as an intern ¯\_(ツ)_/¯ [1]

Anyway, there was this one guy who taught me a few tricks, and looking back he is [at this point in time] the best intern I've had.
Sure, he was hasty [as some interns are], tried to finish things really fast, only to see it fail in a CI build. But I know that I was about the same in this respect.

So, what I learned from him are [in a random order]:
1. the`git worktree` command; this will save you gigabytes of storage if you need to work the Linux kernel; I mean just the `.git` is ~5 GBs and just grows when adding remotes [2]
2. he tried to convince me to use `tmux`... maybe the next intern/person will actually succeed to convince me; there's various overlap between `tmux`, `zsh` and maybe something else, and I just didn't bother after a while
3. better promoting my CV/myself

Ok, so point 3 is what this article is about, because I never really gave this much importance.

So, on this, what I learned from the guy is:
1. Create a `https://github/<user>/aboutme` repo and upload your resume (in doc and pdf formats) there
2. Create a gist with your resume in PDF format and JPEG/GIF as the first file in that gist (you'll see why)
3. Pin the repos you're most proud of on your `https://github/<user>` profile page. Make sure to also pin your gist.
4. Optionally, a markdown can be added to the gist and the `aboutme` repo. I didn't yet, I might later.

An example of how it looks on my page now is:

![Screenshot_2020-11-25_11-04-53](https://dev-to-uploads.s3.amazonaws.com/i/ake8nao6dvqkxoj8mcti.png)
 

Essentially what happens is that the image from the gist (when pinned) screams pretty loud on your profile page, which may be something that someone would want. I don't know... what do I know? :p   ¯\_(ツ)_/¯

You can also fork these gists, I also forked this one [from someone else's](https://gist.github.com/wgcv/86f211cc4af4b8becfc91a054c38fdfb) and modified it.

Turns out gists are git repos as well. You can clone, modify and push back to Github. Who knew?


-----------------------------------

[1] Ya' know... that is actually that I will have to reflect upon for the next few hours.
[2] 
```
linux # ➦ eccc87672492 # du -sh .git
5,7G	.git
```
How to check if the occurrence of letters in the given string is the same
Tags: javascript, programming
Published: 2020-11-25 09:02:17

Problem statement: We have to check if all letters in a given string occurred same times.

**Examples:**
- `dev` has three letters and all appeared 1 time. So it will return true.
- `aabbcc` has three letters and all appeared 2 times. So it will return true.
- `xyyzzz` has three letters and x appeared 1 time, y 2 times, and z 3 times. So it will return false.

**Solution:**

```javascript
const str = "aabbcc";
const tracker = {};

for(let i = 0; i < str.length; i++) {
  if(!tracker[str[i]]) {
    tracker[str[i]] = 1;
  } else if (tracker[str[i]]) {
    tracker[str[i]]++;
  }
}

const repeatCount = Object.values(tracker);
const isTrue = repeatCount.every(el => el === repeatCount[0]);

console.log("same occurrence for all letters", isTrue); //true
```

**In this solution:**
- We used for loop and check for each letter's occurrence.
- Then we kept track of every letter's occurrence in an object. 
- And finally, we checked if the occurrence number is the same for all letters.
- Time complexity for this solution is `O(n)`.

-------- 

### Conclusion:
There are many solutions to this problem. This is just one of them. I will be adding different solutions in the future in the same post.

Thanks for reading and Happy coding :computer:
For more tech and F.R.I.E.N.D.S. discuss, let's connect on [Twitter](https://twitter.com/geekrk).
Build full-page Microsoft Teams tabs
Tags: microsoftteams, microsoft365, microsoft365development, office365
Published: 2020-11-26 08:55:29

---
title: Build full-page Microsoft Teams tabs
published: true
date: 2020-11-25 08:58:31 UTC
tags: microsoftteams,microsoft365,microsoft365development,office365
canonical_url: https://blog.mastykarz.nl/build-full-page-microsoft-teams-tabs/
---

![Build full-page Microsoft Teams tabs](https://blog.mastykarz.nl/assets/images/2020/11/banner-fullpage-teams-tab.png)

Did you know that you can hide the tab-header bar in your Microsoft Teams tab and have them show in full-screen?

## Embed web apps in Microsoft Teams through custom tabs

If you have a custom web app, you can expose it in Microsoft Teams as a [custom tab](https://docs.microsoft.com/microsoftteams/platform/tabs/what-are-tabs?WT.mc_id=m365-11255-wmastyka). This is a great way to bring your app to where your users are and let them access important information in the context of their work.

By embedding your app in Teams, you lower the threshold for users to work with your app. What's more, if you expose your app as a [personal app](https://docs.microsoft.com/microsoftteams/platform/build-your-first-app/build-personal-tab?WT.mc_id=m365-11255-wmastyka), users will be able to access it directly from the left rail no matter where in Teams they are.

## Build full-page tabs in Microsoft Teams

Typically, when you build apps in Microsoft Teams, you get a tab-header bar which allows you to navigate between the different tabs in the app.

 ![Microsoft Teams app with the tab-header bar](https://blog.mastykarz.nl/assets/images/2020/11/microsoft-teams-tab-header-app.png)  

If your app however consists of a single tab, you can choose to hide the tab-header bar and get some additional screen estate for your app.

 ![Microsoft Teams app without the tab-header bar](https://blog.mastykarz.nl/assets/images/2020/11/microsoft-teams-fullscreen-tab.png)  

To hide the tab-header bar in your app, in its manifest, set the [`isFullScreen`](https://docs.microsoft.com/microsoftteams/platform/resources/schema/manifest-schema?WT.mc_id=m365-11255-wmastyka#isfullscreen) property to `true`.

 ![The 'isFullScreen' property highlighted in Teams manifest](https://blog.mastykarz.nl/assets/images/2020/11/microsoft-teams-manifest-isfullscreen.png)  

If you manage your app's configuration through App Studio, you'd check the **Fullscreen mode** checkbox in the **App details** section.

 ![Arrow pointing to the 'Fullscreen mode' checkbox in App Studio](https://blog.mastykarz.nl/assets/images/2020/11/microsoft-teams-fullscreenmode-app-studio.png)  

With the full-screen mode enabled, your Teams app will show without the nav-header bar.

At this moment, the full-screen mode works only for apps uploaded through the app catalog. If you sideload your app via App Studio, you will not see your app in full-screen mode.