The Three.js tag has really bad questions

The distribution of three.js tagged question is something like this:

1 x

super clear, graphics / WebGL / GLSL / JavaScript related question for the library, that makes sense, is properly formatted and helps the community.

19 x

confusing, lazy, ill-formatted questions that make no sense, and are often not even remotely three.js related (basic JavaScript or DOM)

What can be done to remedy this?

I notice a lot of the questions simply go unanswered. Some do get downvoted though.

I find myself writing more comments than answers lately. Sometimes I link to MCVE, and sometimes I explain why the question is not three.js-related and remove the tags.

Other times, users accept answers that are wrong. They ask one question, but within there's a different problem hidden. The accepted answer usually focuses on the problem, rather than the question. This is when I usually suggest to edit the question, but some times I urged for the different answers to be accepted.

It doesn't seem that there are too many people responding to three.js, and I'm also under the impression that a lot of the questions are asked by people who register specifically to ask that question.

Is it possible to somehow urge the users to read MCVE before posting a question with this tag?

#three-js

What is GEEK

Buddha Community

JavaScript Daily

1632537859

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

Fast startup without relying on a custom version of Node.js.
Small artifact (current size is around 1.2MB).
First class macros.
Support building small TUI apps using Reagent.
Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

destructuring using :syms
property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

c64core: retrocompute aesthetics twitter bot
gallery.cljs: script to download walpapers from windowsonearth.org.
nbb-action-example: example of a Github action built with nbb.

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

babashka >= 0.4.0
Clojure CLI >= 1.10.3.933
Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

Clone and cd into this repo
bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb
License: EPL-1.0

#node #javascript

smm captain

1650364405

Best Instagram Hashtags for Reels, Giveaways, Travel, Fashion

Pick the right hash tags and enjoy likes and comments on the post.

Making engaging reels about the travels, fashion, fitness, contest, and more, the results are not satisfactory. All you get is a few likes, comments and nothing else. You need the engagement on your post to bring more business to you. How can you bring interaction to the content? Indeed you can buy real instagram likes uk to get high rates. But how can you make the Instagram world hit the likes button under the post? You need to boost the reach. You must present your content to the right audiences to get higher interaction rates.

Your Instagram #tags are the power tool that works like magic for influencers and businesses. The blue text with # is the magical option that increases the viability of the posts. The Instagram algorithm keeps on changing, and now the engagement on the post is a must to place the content at a higher place in followers’ feed. For this, you require more likes and comments under the post. For this, you must lift the reach by using perfect tags.

Why are hashtags popular on Instagram?

Let me clear it for you. Do you know how many active users this digital handle has? It is about 2B and more, and the count is changing every day. Each of the followers must be posting something on the handles. Thousands of profit must be of a similar niche as yours. If you are the business and running the clothing brands, then many other companies deal with clothes. So, customers or followers have many choices to choose from. Why would they follow you or purchase from your companies?

Your reply must be that you offer quality material at the best rates. But how does anyone finds out about you? Indeed you can buy active instagram followers uk to bring more fans, but how can you boost the reach of your voices. All businesses must represent their product to the right audiences, but how?

Of course, hashtags.

Table of Contents

Not all Hashtags are for you

There are some basic tags that you can use, but if you are more specific about your approach, choose the relevant tags for your business. Your #tags game must be industry oriented. So in this part, you will learn about the famous tags as per various niches.

Tags for Travel Niche

Indeed this niche is famous on Instagram, and influencers earn handsome amounts. These #tags are best for you if you possess a similar place. Use them smartly and rightly!

#TravelPhotography

#PicOfTheDay

#NaturePhotography

#TravelBlogger

#beautiful

#landscape

#adventure

#explore

#instatravel

#photo

#trip

#summer

#travelgram

#photography

#art

#travel

#wanderlust

#nature

#instagood

#PhotoOfTheDay

Tags for Fashion Industry

After thee travel next most famous niche is fashion. You can earn handsome amount form it. But for this you need to pick the right tags form the following:

#bhfyp
#smile
#OutfitOfTheDay
#FashionPhotography
#FollowBack
#ootd
#FashionBlogger
#WhatIWore
#follow
#fashionista
#PhotoOfTheDay
#StyleInspo
#instastyle
#love
#CurrentlyWearing
#FashionBlog
#ShoppingAddict
#LookGoodFeelGood
#FashionAddict
#FashionStyle
#BeautyDoesntHaveToBePain
#style
#fashion
#FollowForFollowBack
#fashionable
#l
#PicOfTheDay
#fashiongram

Tags for fitness Influencers

So, what to boost your fitness business then uses these tags and enjoys likes:

#exercise
#bodybuilding
#life
#gymlife
#motivation
#healthy
#lifestyle
#health
#gym
#sport
#training
#workout
#HealthyLifestyle
#muscle
#fit
#CrossFit
#fitness
#FitFam
#goals
#PersonalTrainer
#FitnessMotivation

Best Tags for Giveaway

So, are you arranging the giveaway and want a maximum number of people to participate? If so, then it is time to boost the reach vis using these tags

#giveaway
#sweepstakes
#WinItWednesday
#freebie
#ContestAlert
#ContestEntry
#instacontest
#instagiveaway
#WinIt
#contest
#GiveawayAlert
#giveaway

The popular #tags for Reels

Are you the reels queen, or do you want to become the one? Then these below mentioned tags are for you. But don’t go for all of them because you can use only thirty of them. Pick it smartly!

#ReelsInstagram
#VideoOfTheDay
#ReelsIndia
#ReelSteady
#disney
#ForYouPage
#InstagramReels
#bhfyp
#instareels
#reelsinsta
#fyp
#ReelsOfInstagram
#TikTokIndia
#HolaReels
#reels
#ReelsBrasil
#k
#ReelsVideo
#instareel
#music

#tags for foodie

Do you love to eat and what to share your experience with another foodie on Instagram? If you are visiting any cafe, then before uploading, always add one of the following tags!

#instafood
#FoodBlogger
#lunch
#PicOfTheDay
#instadaily
#FoodPhotography
#PhotoOfTheDay
#food
#healthy
#foodie
#FoodLover
#bhfyp
#instagood
#tasty
#delicious
#foodstagram
#homemade
#cooking
#FoodPorn
#love
#foodgasm
#foodies
#HealthyFood
#dinner
#yummy
#restaurant

How to Pick the proper tags or find the best one for you?

There is a long list of each niche, and you can use all of them. If you are confused about what to pick and whatnot, here is the guide to choosing the perfect tag.

Use the search function. Just mentions a keyword applicable to your content and choose the Tags tab. This handle will then provide you with a hashtags list. Search for relevant #tags with fair usage ( 50K)
Use the tags that others use in your sector.

Study your competition. Review their post and study the tags they are using.

Nat Grady

1670915040

How to Create a Live Dashboards with Airtable and React

Reporting and visualizing data is crucial to businesses of all sizes. Dashboards allow users to efficiently access and use this data for a range of business operations. In this article, Toptal Full-stack Engineer Dylan Golow demonstrates how he created a powerful dashboard for telemedicine using Airtable, Typeform, and React.

Whether a company is a large enterprise or a budding startup, collecting data from users and customers, and reporting on or visualizing that data is crucial to the business.

I recently worked with a telemedicine startup based in Brazil. Its mission is to provide remote care and monitoring by connecting patients to medical professionals and health coaches. The core need was to create an interface for the coaches and health professionals to easily review a patient’s information and most important metrics related to their particular situation: a dashboard.

Enter Typeform and Airtable.

Typeform

Typeform is one of the go-to data collection tools that enables responsive web experiences for users completing a survey. It also comes with several features that make surveys more intelligent, especially when combined:

Logic Jumps
Hidden Fields

Surveys can be shared via URLs that can be pre-seeded with values for the hidden fields, which can then be used to implement logic jumps and alter the behavior of the survey for the user with the link.

Airtable Uses

Airtable is a spreadsheet-database hybrid and a collaborative cloud platform. Its focus on point and click functionality means that non-technical users can configure it without coding. Airtable has a multitude of use cases in any business or project.

You can use an Airtable Base for:

CRM (Client Relationship Management)
HRIS (Human Resources Information System)
Project Management
Content Planning
Event Planning
User Feedback

There are many more potential use cases. You can explore Airtable case studies here.

If you are not familiar with Airtable, the conceptual data model breaks down like this:

Workspace - Composed of Bases
Base - Composed of Tables
Table - Composed of Fields (columns) and rows
View - A perspective on Table data with optional filters and reduced Fields
Field - A column of a Table with a Field Type; see here for more information on Field Types

Apart from providing a cloud-hosted database with familiar spreadsheet features, here are some of the reasons the platform is so powerful:

Depiction of technical and non-technical users working with Airtable.

For non-technical users, Airtable provides:

An easy to use front-end interface
Automations that can be created with point-and-click configuration to send emails, process rows of data, schedule appointments in calendars, and more
Multiple types of views that allow teams to collaborate on the same Base and tables
Airtable Apps that can be installed from the marketplace to supercharge a Base

For developers, Airtable provides:

A well-documented back-end API
A scripting environment that allows developers to automate actions within a Base
Automations that can also trigger custom developed scripts that run within the Airtable environment, extending the capabilities of automations

You can learn more on Airtable here.

Getting Started: Typeform to Airtable

Typeform surveys were already configured by the client, and the next step was to plan how that data would land in Airtable and then be turned into a dashboard. There are many questions to consider when creating dashboards on top of any database: How should we structure the data? What data will need to be processed prior to visualization? Should we sync the Base with Google Sheets and use Google Data Studio? Should we export and find another third-party tool?

Fortunately for developers, not only does Airtable provide automations and scripting to handle the data processing steps, but it has also made it possible to build custom applications and interfaces on top of an Airtable Base with Airtable Apps.

Custom Apps in Airtable

Custom Apps in Airtable have been around since the Airtable Blocks SDK was released at the beginning of 2018, and were recently renamed to Apps. The release of Blocks was huge in that it meant that creators now had the ability to develop, as Airtable puts it, “An infinitely recombinable Lego kit.”

More recently with the change to apps, the Airtable Marketplace made it possible to share apps publicly, as well.

Airtable Apps provide businesses with an infinitely recombinable Lego kit they can tailor to their needs.

In order to build a custom app in Airtable, a JavaScript developer must know how to use React, one of the most popular JavaScript libraries for building user interfaces. Airtable provides a component library of functional React components and hooks, which are a huge help for rapidly building a consistent UI and determining how you will manage state within the app and its components.

Check out Airtable’s Getting Started article for more information and Airtable on GitHub for examples of apps.

Airtable Dashboard Requirements

After reviewing the dashboard mockups with the client team, the types of data to be used were clear. We would need a series of dashboard components that would display as text on the dashboard and charts of different metrics that could be tracked over time.

Coaches and medical professionals needed to be able to build a custom dashboard for each patient, so we needed a flexible way to add and remove charts. Other static data relative to each patient would be displayed no matter the patient selected.

In this case, the dashboard sections boiled down to:

General Information - Patient Name, Email, Phone Number, Contact Preference, Date of Birth, Age
Objectives - Goals the patient has based on survey results
Some Stats - BMI, Height, and Weight
Medicine Use - Listing all prescription drugs already used by a patient
Family History of Conditions - Helpful in diagnosing certain conditions
Charts - A section where the Airtable dashboard user could add a chart and configure which metric it would visualize over time

Image showing an Airtable Dashboard mockup.

One way to approach all of the sections except for charts would be to hard-code all the columns for objectives, medicine use, and family history into the dashboard. However, that would not allow the client team to add new questions to a Typeform survey nor add a new column to an Airtable table to present that data on the dashboard without having a developer update the custom app.

A more elegant and extensible solution to this challenge was finding a way to tag columns as relevant to a particular dashboard section and retrieve those columns using the metadata that Airtable exposes when using the Table and Field models.

This was achieved using Field Descriptions as a place to tag a column from the Table as relevant to a dashboard section to be displayed to the user. Then, we could ensure only those with the Creator role (the administrators) for the Base had the ability to modify these Field Descriptions to alter what appears on the dashboard. To illustrate this solution, we will focus mostly on the items in General Information and how to present Charts.

Creating a #TAG# System

Given the dashboard sections, it made sense to make reusable tags for some sections and specific tags for certain columns. For items like patient name, email, and phone number, #NAME#, #EMAIL#, and #PHONE# were added to each Field’s description, respectively. That would allow that information to be retrieved via the Table metadata like this:

const name = table ? table.fields.filter(field => field.description?.includes("#NAME#"))

For areas of the dashboard that would need to draw from many tagged columns we would have the following tags for each dashboard section:

OBJ - Objectives
FAM - Family History
MED - Medicine Usage
CAN - Family History specific to cancer
CHART - Any column that should be sourced for adding charts; must be a quantity

In addition, it was important to separate the name of a column in a Table from the label it would receive on the dashboard, so anything that received a #TAG# would also have the ability to receive two #LABEL# tags in its Field Description. A Field Description would look like this:

Screenshot showcasing the use of tags in a field description.

In case the #LABEL# tags are missing, we will display the column name from the Table.

We can parse out the label set in the description with a simple function like this after retrieving the field with the previous code example:

// utils.js

export const setLabel = (field, labelTag = "#LABEL#") => {
   const labelTags = (field.description?.match(new RegExp(labelTag, "g")) || []).length;
   let label;
   if (labelTags === 2) label = field.description?.split(`${labelTag}`)[1];
   if (!label || label?.trim() === '') label = field.name;
   return {...field, label, name: field.name, description: field.description};
}

With this #TAG# system, we achieve three main things:

Column names (fields) in the Table can be changed as desired.
Labels for data in the dashboard can be distinct from column names.
Dashboard sections for Objectives, Medicine Usage, Family History, and Charts can be updated by the client team without touching a line of code.

Persisting State in Airtable

In React, we use state and pass it to components as props in order to re-render that component if its state changes. Normally this is tied to an API call that fuels a dashboard component, but in Airtable we already have all the data and simply need to filter what we are displaying based on which patient we are viewing. In addition, if we use state, it will not persist the data past a refresh in the dashboard itself.

So, how can we persist a value past refresh to keep a dashboard filtered? Fortunately, Airtable provides a hook for this called useGlobalConfig in which it maintains a key-value store for an app installation on a dashboard. We simply need to implement the logic of retrieving values from this key-value store when the app loads to fuel our dashboard components.

What is even more useful about using the useGlobalConfig hook is that when its values are set, the dashboard component and its child components re-render, so you can use the Global Config like you would use a state variable in a typical React implementation.

Introducing Charts

Airtable provides examples of charts with its Simple Chart App, which uses React Charts, a React wrapper on Chart.js (chart-ception).

In the Simple Chart App, we have one chart for the whole app, but in our Dashboard App, we need the ability for the user to add and remove their own charts from their own dashboard. What’s more, in discussion with the client team, it seems that certain metrics would be better viewed on the same chart (like readings for diastolic and systolic blood pressure).

With this we have the following items to tackle:

Persisting state for each user’s chart (or even better using Global Config)
Allowing multiple metrics per chart

This is where the power of the Global Config comes in handy, as we can use the key-value store to maintain the selected metrics and anything else about our list of charts. As we configure a chart in the UI, the chart component itself will be re-rendered due to updates to the Global Config. For the charting section of the dashboard, here is a gist with the components for reference, focusing on dashboard charts.js and single chart.js.

The table passed to each chart is what is used for its metadata to find the fields, whereas the records passed have already been filtered by the patient selected at the top-level dashboard component that imports dashboard_charts/index.js.

Note that the fields listed as options in the dropdown for a chart are pulled using the #CHART# tag we mentioned before, with this line in a useEffect hook:

// single_chart/index.js

…
useEffect(() => {
  (async () => {

...

    if (table) {
      const tempFieldOptions = table.fields.filter(field =>    
        field.description?.includes('#CHART#')).map(field => {
          return {
            ...setLabel(field),
            value: field.id
          }
       });
       setFieldSelectOptions([...tempFieldOptions]);
    }
  })();
}, [table, records, fields]);


...

The code above shows how the setLabel function referenced earlier is used with the #TAG# to add anything provided in the #LABEL# tags and display it for the option in the field dropdown.

Our chart component takes advantage of the multi-axis capabilities provided by Chart.js, which is shown with React Charts. We just extended it via the UI with the user’s ability to add a dataset and a chart type (line or bar).

We have the following items to maintain per chart:

chartTitle which is autogenerated and can be renamed by the user
fields array in which each item has:
- field as fieldId from Airtable
- chartOption as one line | bar as the Chart.js docs indicate
- color as the Airtable color from the colorUtils
- hex as the hex code relating to the Airtable color

To manage this, I found it most convenient to stringify this data as an object instead of setting Global Config keys and values all the way down. See the example below (globalConfig.json in the gist), which includes Global Config values to filter records by the patient and some related variables used to support a typeahead filtering component (thanks to react-bootstrap-typeahead):

{
 "xCharts": {
   "chart-1605425876029": "{\"fields\":[{\"field\":\"fldxLfpjdmYeDOhXT\",\"chartOption\":\"line\",\"color\":\"blueBright\",\"hex\":\"#2d7ff9\"},{\"field\":\"fldqwG8iFazZD5CLH\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"}],\"chartTitle\":\"Gráfico criado em 11/15/2020, 2:37:56 AM\"}",
   "chart-1605425876288": "{\"fields\":[{\"field\":\"fldGJZIdRlq3V3cKu\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Gráfico criado em 11/15/2020, 2:37:56 AM\"}",
   "chart-1605425876615": "{\"fields\":[{\"field\":\"fld1AnNcfvXm8DiNs\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"},{\"field\":\"fldryX5N6vUYWbdzy\",\"chartOption\":\"line\",\"color\":\"blueDark1\",\"hex\":\"#2750ae\"}],\"chartTitle\":\"Gráfico criado em 11/15/2020, 2:37:56 AM\"}",
   "chart-1605425994036": "{\"fields\":[{\"field\":\"fld9ak8Ja6DPweMdJ\",\"chartOption\":\"line\",\"color\":\"blueLight2\",\"hex\":\"#cfdfff\"},{\"field\":\"fldxVgXdZSECMVEj6\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Gráfico criado em 11/15/2020, 2:39:54 AM\"}",
   "chart-1605430015978": "{\"fields\":[{\"field\":\"fldwdMJkmEGFFSqMy\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"},{\"field\":\"fldqwG8iFazZD5CLH\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"}],\"chartTitle\":\"New Chart\"}",
   "chart-1605430916029": "{\"fields\":[{\"field\":\"fldCuf3I2V027YAWL\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"},{\"field\":\"fldBJjtRkWUTuUf60\",\"chartOption\":\"line\",\"color\":\"blueDark1\",\"hex\":\"#2750ae\"}],\"chartTitle\":\"Gráfico criado em 11/15/2020, 4:01:56 AM\"}",
   "chart-1605431704374": "{\"fields\":[{\"field\":\"fld7oBtl3iiHNHqoJ\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Gráfico criado em 11/15/2020, 4:15:04 AM\"}"
 },
 "xPatientEmail": "elle@gmail.com",
 "xTypeaheadValue": "Elle Gold (elle@gmail.com)",
 "xSelectedValue": "[{\"label\":\"Elle Gold (elle@gmail.com)\",\"id\":\"elle@gmail.com\",\"name\":\"Elle Gold\",\"email\":\"elle@gmail.com\"}]"
}

Note: All data contained above, and the data included in the animations below, are not real patient data.

Here’s a look at the final result:

Animated display of Airtable dashboard UI.

What About the Typeahead?

In order to filter by patient, we needed a way to select a patient and then filter the records based on this patient. In this section, we review how this was achieved.

For the typeahead, react-bootstrap-typeahead was an easy choice, as the only steps left were preparing the options for the typeahead, mixing it with an Airtable input for styling and loading bootstrap, and some other styles for our menu. Dropping components from your favorite component libraries into an Airtable app is not as straightforward as in typical React web development; however, there are only a few extra steps to get everything to look the way you would expect.

Here is the final result:

Animated GIF showcasing the filter-by-patient functionality.

To render the Airtable input and keep all our styles consistent, react-bootstrap-typeahead comes with a renderInput prop. See more on how to modify the rendering of the component here.

For the bootstrap styles and to override our menu items, the following two utils were used from Airtable:

See frontend.js in the gist for an excerpt of the typeahead implementation.

This line was used to load bootstrap globally:

// frontend/index.js

loadCSSFromURLAsync('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

You will notice some added logic for things like handling style changes on hover or restyling links (<a></a>) to get the familiar bootstrap look and feel. This also includes the handling of setting the Global Config values for the typeahead and filtering of records so that if a user leaves their dashboard, refreshes their page, or would like to share this dashboard with others, the app persists the selected patient in the Dashboard App. This also allows the users to install multiple copies of this same app side by side in the same Airtable Dashboard with different patients selected or with different charts.

Keep in mind that a dashboard in Airtable is also available to all users of the Base, so these custom app installations on a dashboard will be filtered to the same patients and charts no matter which users are looking at the dashboard at the same time.

Let’s recap what we’ve covered for far:

Airtable allows both non-technical users and technical users to collaborate in Airtable.
Typeform comes with an Airtable integration that allows non-technical users to map Typeform results to Airtable.
Airtable Apps provide a powerful way to supercharge its Airtable Base, whether selecting from the marketplace or building a custom app.
Developers can extend Airtable rapidly in nearly any way imaginable with these apps. Our example above took only three weeks to design and implement (with enormous help from existing libraries, of course).
A #TAG# system can be used to modify the dashboard without requiring code changes by developers. There are better and worse use cases for this. Be sure to limit permissions to the Creator role if using this strategy.
Using Global Config allows developers to persist data within an app installation. Mix this into your state management strategy to seed data for your components.
Don’t expect to drag and drop components from other libraries and projects directly into your Airtable App. Styles can be loaded using the loadCSSFromString and loadCSSFromURLAsync utils provided by Airtable.

Future-proofing

Use a more sophisticated middleware

With Typeform and Airtable, it’s easy and cost-effective to configure the mapping of questions to columns.

However, there is one big drawback: If you have a survey of more than 100 questions mapped to Airtable and you need to modify a mapping, you must delete the entire mapping and start again. This is clearly not ideal, but for a free integration, we can deal with this.

Other options would be having a Zapier (or similar) integration manage the data between Typeform and Airtable.Then you could modify the mapping of any question to any column without starting from scratch. This would have its own cost considerations to factor in as well.

Hopefully, some of the lessons learned and communicated here will help others who are looking to build solutions with Airtable.

Finally, you can check out the gist with the files discussed in this article.

Original article source at: https://www.toptal.com/

#react #dashboards

Marielle Rippin

1595098800

Android Interview Questions – Get ready for your next interview

Android – one of the hottest technologies, which is having a bright future. Get ready to crack your next interview with the following android interview questions. These interview questions start with basic and cover deep concepts along with advanced topics.

Android Interview Questions for Freshers

1. What is Android?

Android is an open-source mobile operating system that is based on the modified versions of Linux kernel. Though it was mainly designed for smartphones, now it is being used for Tablets, Televisions, Smartwatches, and other Android wearables.

2. Who is the inventor of Android Technology?

The inventors of Android Technology are- Andry Rubin, Nick Sears, and Rich Miner.

3. What is the latest version of Android?

The latest version of Android is Android 10.0, known as Android Q. The upcoming major Android release is Android 11, which is the 18th version of Android. [Note: Keep checking the versions, it is as of June 2020.]

4. How many Android versions can you recall right now?

Till now, there are 17 versions of Android, which have their names in alphabetical order. The 18th version of Android is also going to come later this year. The versions of Android are here:

Android 1.0 – Its release is 23 September 2008.
Android 1.1 – Its release date is 9 February 2009.
Android 1.5 – Its name is Cupcake, Released on 27 April 2009.
Android 1.6 – Its name is Donut, Released on 15 September 2009.
Android 2.0 – Its name is Eclair, Released on 26 October 2009
Android 2.2 – Its name is Froyo, Released on 20 May 2010.
Android 2.3 – Its name is Gingerbread, Released on 06 December 2010.
Android 3.0 – Its name is Honeycomb, Released on 22 February 2011.
Android 4.0 – Its name is Ice Cream Sandwich, Released on 18 October 2011.
Android 4.1 – Its name is Jelly Bean, Released on 9 July 2012.
Android 4.4 – Its name is KitKat, Released on 31 October 2013.
Android 5.0 – Its name is Lollipop, Released on 12 November 2014.
Android 6.0 – Its name is Marshmallow, Released on 5 October 2015.
Android 7.0 – Its name is Nougat, Released on 22 August 2016.
Android 8.0 – Its name is Oreo, Released on 21 August 2017.
Android 9.0 – Its name is Pie, Released on 6 August 2018.
Android 10.0 – Its name is Android Q, Released on 3 September 2019.
Android 11.0 – As of now, it is Android 11.

5. Explain the Android Architecture with its components.

This is a popular android developer interview question

Android Architecture consists of 5 components that are-

a. Linux Kernel: It is the foundation of the Android Architecture that resides at the lowest level. It provides the level of abstraction for hardware devices and upper layer components. Linux Kernel also provides various important hardware drivers that act as software interfaces for hardwares like camera, bluetooth, etc.

b. Native Libraries: These are the libraries for Android that are written in C/C++. These libraries are useful to build many core services like ART and HAL. It provides support for core features.

c. Android Runtime: It is an Android Runtime Environment. Android Operating System uses it during the execution of the app. It performs the translation of the application bytecode into the native instructions. The runtime environment of the device then executes these native instructions.

d. Application Framework: Application Framework provides many java classes and interfaces for app development. And it also provides various high-level services. This complete Application framework makes use of Java.

e. Applications: This is the topmost layer of Android Architecture. It provides applications for the end-user, so they can use the android device and compute the tasks.

6. What are the services that the Application framework provides?

The Android application framework has the following key services-

a. Activity Manager: It uses testing and debugging methods.

b. Content provider: It provides the data from application to other layers.

c. Resource Manager: This provides users access to resources.

d. Notification Manager: This gives notification to the users regarding actions taking place in the background.

e. View System: It is the base class for widgets, and it is also responsible for event handling.

7. What are the important features of Linux Kernel?

The important features of the Linux Kernel are as follows:

a. Power Management: Linux Kernel does power management to enhance and improve the battery life of the device.

b. Memory Management: It is useful for the maximum utilization of the available memory of the device.

c. Device Management: It includes managing all the hardware device drivers. It maximizes the utilization of the available resources.

d. Security: It ensures that no application has any such permission that it affects any other application in order to maintain security.

e. Multi-tasking: Multi-tasking provides the users the ease of doing multiple tasks at the same time.

8. What are the building blocks of an Android Application?

This is a popular android interview question for freshers.

The main components of any Android application are- Activity, Services, Content Provider, and Broadcast Receiver. You can understand them as follows:

a. Activity- It is a class that acts as the entry point representing a single screen to the user. It is like a window to show the user interface.

b. Services- Services are the longest-running component that runs in the background.

c. Content Provider- The content provider is an essential component that allows apps to share data between themselves.

d. Broadcast receivers- Broadcast receiver is another most crucial application component. It helps the apps to receive and respond to broadcast messages from the system or some other application.

9. What are the important components of Android Application?

The Components of Android application are listed below:

Widgets
Intents
Views
Notification
Fragments
Layout XML files
Resources

10. What are the widgets?

Widgets are the variations of Broadcast receivers. They are an important part of home screen customization. They often display some data and also allow users to perform actions on them. Mostly they display the app icon on the screen.

11. Can you name some types of widgets?

Mentioned below are the types of widgets-

a. Informative Widgets: These widgets show some important information. Like, the clock widget or a weather widget.

b. Collective Widgets: They are the collection of some types of elements. For example, a music widget that lets us change, skip, or forward the song.

c. Control Widgets: These widgets help us control the actions within the application through it. Like an email widget that helps check the recent mails.

d. Hybrid Widgets: Hybrid widgets are those that consist of at least two or more types of widgets.

12. What are Intents?

Intents are an important part of Android Applications. They enable communication between components of the same application as well as separate applications. The Intent signals the Android system about a certain event that has occurred.

13. Explain the types of intents briefly?

Intent is of three types that are-

a. Implicit Intents: Implicit intents are those in which there is no description of the component name but only the action.

b. Explicit Intents: In explicit intents, the target component is present by declaring the name of the component.

c. Pending Intents: These are those intents that act as a shield over the Intent objects. It covers the intent objects and grants permission to the external app components to access them.

14. What is a View?

A view is an important building block that helps in designing the user interface of the application. It can be a rectangular box or a circular shape, for example, Text View, Edit Text, Buttons, etc. Views occupy a certain area of the screen, and it is also responsible for event handling. A view is the superclass of all the graphical user interface components.

15. What do you understand by View Group?

It is the subclass of the ViewClass. It gives an invisible container to hold layouts or views. You can understand view groups as special views that are capable of holding other views, that are Child View.

16. What do you understand about Shared Preferences?

It is a simple mechanism for data storage in Android. In this, there is no need to create files, and using APIs, it stores the data in XML files. It stores the data in the pair of key-values. SharedPreferences class lets the user save the values and retrieve them when required. Using SharedPreferences we can save primitive data like- boolean, float, integer, string and long.

17. What is a Notification?

A notification is just like a message that shows up outside the Application UI to provide reminders to the users. They remind the user about a message received, or some other timely information from the app.

18. Give names of Notification types.

There are three types of notifications namely-

a. Toast Notification- This notification is the one that fades away sometime after it pops up.

b. Status Notification- This notification stays till the user takes some action on it.

c. Dialog Notification- This notification is the result of an Active Activity.

19. What are fragments?

A fragment is a part of the complete user interface. These are present in Activity, and an activity can have one or more fragments at the same time. We can reuse a fragment in multiple activities as well.

20. What are the types of fragments?

There are three types of fragments that are: Single Fragment, List Fragment, Fragment Transactions.

Single Transactions can only show a single view for the user.
List Fragments have a special list view feature that provides a list from which the user can select one.
Fragment Transactions are helpful for the transition between one fragment to the other.

Frequently asked Android Interview Questions and Answers

21. What are Layout XML files?

Layout XML files contain the structure for the user interface of the application. The XML file also contains various different layouts and views, and they also specify various GUI components that are there in Activity or fragments.

22. What are Resources in Android Application?

The resources in Android Apps defines images, texts, strings, colors, etc. Everything in resources directory is referenced in the source code of the app so that we can use them.

23. Can you develop Android Apps with languages other than Java? If so, name some.

Yes, there are many languages that we can work with, for the development of Android Applications. To name some, I would say Java, Python, C, C++, Kotlin, C#, Corona/LUA.

24. What are the states of the Activity Lifecycle?

Activity lifecycle has the following four stages-

a. Running State: As soon as the activity starts, it is the first state.

b. Paused State: When some other activity starts without closing the previous one, the running activity turns into the Paused state.

c. Resume State: When the activity opens again after being in pause state, it comes into the Resume State.

d. Stopped State: When the user closes the application or stops using it, the activity goes to the Stopped state.

25. What are some methods of Activity?

The methods of Activity are as follows:

onCreate()
onStart()
onPause()
onRestart()
onResume()
onStop()
onDestroy()

26. How can you launch an activity in Android?

We launch an activity using Intents. For this we need to use intent as follows:

ntent intent_name= new Intent(this, Activity_name.class);
startActivity(intent_name);

27. What is the service lifecycle?

There are two states of a service that are-

a. Started State: This is when the service starts its execution. A Services come in start state only through the startService() method.

b. Bounded State: A service is in the bounded state when it calls the method bindService().

28. What are some methods of Services?

The methods of service are as follows-

onStartCommand()
onBind()
onCreate()
onUnbind()
onDestroy()
onRebind()

29. What are the types of Broadcast?

Broadcasts are of two types that are-

a. Ordered Broadcast: Ordered broadcasts are Synchronous and work in a proper order. It decides the order by using the priority assigned to the broadcasts.

b. Normal Broadcast: These are asynchronous and unordered. They are more efficient as they run unorderly and all at once. But, they lack full utilization of the results.

30. What are useful impotent folders in Android?

The impotent folders in an Android application are-

build.xml- It is responsible for the build of Android applications.
bin/ – The bin folder works as a staging area to wrap the files packages into the APK.
src/ – The src is a folder where all the source files of the project are present.
res/ – The res is the resource folder that stores values of the resources that are used in the application. These resources can be colors, styles, strings, dimensions, etc.
assets/ – It provides a facility to include files like text, XML, fonts, music, and video in the Android application.

31. What are the important files for Android Application when working on Android Studio?

This is an important android studio interview question

There are following three files that we need to work on for an application to work-

a. The AndroidManifest.xml file: It has all the information about the application.

b. The MainActivity.java file: It is the app file that actually gets converted to the dalvik executable and runs the application. It is written in java.

c. The Activity_main.xml file: It is the layout file that is available in the res/layout directory. It is another mostly used file while developing the application.

32. Which database do you use for Android Application development?

The database that we use for Android Applications is SQLite. It is because SQLite is lightweight and specially developed for Android Apps. SQLite works the same way as SQL using the same commands.

33. Tell us some features of Android OS.

The best features of Android include-

Multi-tasking
Support for a great range of languages
Support for split-screen
High connectivity with 5G support
Motion Control

34. Why did you learn Android development?

Learning Android Studio is a good idea because of the following-

It has a low application development cost.
It is an open-source platform.
It has multi-platform support as well as Multi-carrier support.
It is open for customizations.
Android is a largely used operating system throughout the world.

35. What are the different ways of storage supported in Android?

The various storage ways supported in Android are as follows:

Shared Preference
Internal Storage
External Storage
SQLite Databases
Network Connection

36. What are layouts?

Layout is nothing but arrangements of elements on the device screen. These elements can be images, tests, videos, anything. They basically define the structure of the Android user interface to make it user friendly.

37. How many layout types are there?

The type of layouts used in Android Apps are as follows:

Linear Layout
Relative Layout
Constraint Layout
Table Layout
Frame Layout
Absolute Layout
Scrollview layout

38. What is an APK?

An APK stands for Android Package that is a file format of Android Applications. Android OS uses this package for the distribution and installation of the Android Application.

39. What is an Android Manifest file?

The manifest file describes all the essential information about the project application for build tools, Android operating system, and google play. This file is a must for every Android project that we develop, and it is present in the root of the project source set.

#android tutorials #android basic interview questions #android basic questions #android developer interview questions #android interview question and answer #android interview questions #android interview questions for experienced #android interview questions for fresher

Richard Nicholas

1550736424