teleren/devto huggingface dataset:
React Instant Theme Toggler using pure CSS
Tags: webdev, react, css
Published: 2020-04-23 02:44:11

Dark Mode is everywhere right now. To boost the user's experience, the App needs to be customizable to satisfy the user's personal taste. Some people are love to see a light clean view and some other people are love to see a dark and elegant view.

![react-theme-css](https://1.bp.blogspot.com/-m_csYU1I-2c/XqD_1DHGwzI/AAAAAAAAQI0/Pa1_ymq0Rq8q4i8FKKOJlBp-6qXI_8hQgCLcBGAsYHQ/s1600/react-theme-css.gif)

## CSS Variable
CSS variable or CSS custom properties are just like a variable in a programming language. This feature of CSS enables us to create a variable that can be changed on the fly via DOM. 

This feature is available on pure CSS. We don't need any other library or CSS preprocessor to be able to use it. With this feature we can do theming on our web app easily. So the users can change the theme on the fly seamlessly.

## How to do Theming with pure CSS in React?
First, all we need to do is declaring some default variables first. In our CSS file.
```css
:root {
  --color-primary: #282c34;
  --color-background: white;
}
```
And then, we can put the logic to change the theme inside a hook named `useTheme`.
```javascript
import { useEffect } from 'react';

const themes = {
  light: {
    "--color-primary": "#282c34",
    "--color-background": "white"
  },
  dark: {
    "--color-primary": "white",
    "--color-background": "#282c34"
  },
}

const useTheme = (selectedTheme) => {
  useEffect(() => {
    const theme = themes[selectedTheme] || themes.light;
    Object.keys(theme).forEach(key => {
      const value = theme[key];
      document.documentElement.style.setProperty(key, value);
    });
  }, [selectedTheme]);
};

export default useTheme;
```
As you saw that we have a variable called `themes`, inside that variable object, we can put as many themes as we want, in this case, I only put two kinds of themes, dark and light.

We can use `useEffect` hook to listen to whether the `selectedTheme` variable changed. And then, if the `selectedTheme` changed, we iterate the theme object's keys, and change our CSS Variable on the fly by accessing `document` object and set document's style property with key and value from our `theme` object.

After that, we can use `useTheme` hook in our component.
```javascript
const [darkModeEnabled, setDarkModeEnabled] = useState(false);
useTheme(darkModeEnabled ? 'dark' : 'light');
```
And maybe we can use the HTML checkbox to toggle the theme.
```html
 <label for="theme-toggler"> 
  <input
    id="theme-toggler"
    type="checkbox"
    checked={darkModeEnabled}
    onChange={e => setDarkModeEnabled(e.target.checked)}
  /> 
  DarkMode Enabled
</label><br />
```

### Pretty easy right?
Yeah, the app's theme will change instantly as we click the theme toggle. With this very simple approach, we can give the user a seamless experience to give the user the capability to personalize the app based on their own taste.

### Find it useful?
Follow @ghack.dev on Instagram and watch a lot of useful tutorials in Ghack Dev's Youtube channel. See you!
How to install NuGet Packages locally
Tags: dotnet, nuget, hacks, tutorial
Published: 2020-04-23 02:41:05


If you are a NuGet package creator and want to test it before publish them, just need to register a new source in `NuGet.Config` file. 

|OS|Path|
|---|---|
|Win|`%appdata%\NuGet\NuGet.Config`|
|Mac|`~/.nuget/NuGet/NuGet.Config`|

Open your file, and inside `packageSources` add a new **local** key following this structure `<add key="local" value="path" />`. This path can be a relative or absolute from NuGet.config folder.

```xml
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />
    <add key="local" value="/Users/username/NuGet/Packages" />
  </packageSources>
</configuration>
```

Now you can install a package locally with [dotnet add package](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-add-package) and source option to local. 

`dotnet add package <PACKAGE_NAME> -s local`

NuGet will search the `nupkg` file to be restored from your local folder.

---

When you want to switch to restore de Package from `nuget.org`. That may show a message saying it is unable to find the new version. You'll need to clear your local packages cache before restoring.

`dotnet nuget locals --clear all`

Afterward, you can restore packages without a problem:

`dotnet restore` or `dotnet build`

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)
How do I take a screenshot inside mobile app for iOS and Android?
Tags: ios, android, titanium, mobiledev
Published: 2020-04-23 02:33:32

> Dear Geek,   
>    
> I want to allow users to take a screenshot of app when submitting a troubleshooting ticket.  My app is built using the Titanium Mobile SDK and runs on iOS and Android.  Can you show my how to do this?
> &nbsp;    
> &nbsp; &mdash; &nbsp; SCREENSHOTS WANTED  

**Dear Screenshots,**

Including a screenshot with user reported incidents can be a great way to add context for development teams!   With Titanium Mobile SDK, it is super easy to take a screenshot and get back an image that you can then upload or email as an attachment.  

#### Titanium code to capture screenshot and save/display


```JavaScript

// Take screenshot
Ti.Media.takeScreenshot( e => {

	// the "e.media" property contains the screenshot image

	// You can also display the image on the screen
	$.imageView.image = e.media;

	// Or save the image to photo gallery
    Ti.Media.saveToPhotoGallery(e.media);
});

```


You can find more information about capturing screenshots with Titanium Native mobile apps on the [Axway Titanium API Documentation page here](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media-method-takeScreenshot).


| About Brenton House                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| With 25 years of experience in the development world, Brenton House leads Developer Relations for Axway's API and mobile products, He has worked closely with many clients across various industries including broadcasting, advertising, retail, financial services, transportation, publishing, supply chain, and non-profits.  Brenton's passion for everything API and mobile combined with his strategy and design experience, has enabled him to help developers create captivating products that inspire and delight audiences.  |

![Ask-a-Geek-API-Mobile-Questions-Solved](https://cdn.secure-api.org/axway/ask-a-geek-logo-2.png)

> Ask-a-Geek questions are answered by [Brenton House, an API and Mobile geek](https://brenton.house) who has been doing dev work for 25+ years.
Build Single Page Application with DotVVM
Tags: dotvvm, dotnet, csharp, spa
Published: 2020-04-23 02:22:30

#### Single Page Application (SPA)

In an SPA your web application is divided into components(pages) and each component has its own route(URL). You can navigate between pages using normal links as you used to do in traditional web pages.
> In an SPA, the entire application runs as a single web page. In this
> approach, the presentation layer for the entire application has been
> factored out of the server and is managed from within the browser.
[source](https://livebook.manning.com/book/spa-design-and-architecture/chapter-1/13)

#### SPA with DotVVM
To build SPA you have to learn one of JavaScript frameworks/libraries like Angular, React, or Vue.js but with DotVVM you don't need to learn any of them. DotVVM is supporting SPA by just changing main `ContentPlaceHolder` in your DotVVM master page with `SPAContentPlaceHolder` and use `RouteLink`_(recommended)_ control for navigation between your DotVVM pages.

DotVVM load the content pages asynchronously and `History API` for navigation.

lets try it.
- Create new DotVVM web application with sample CRUD pages.
- Build and run your application and try to navigate between different pages.
   - You will notice your browser is loading each page.
- Open Views/MasterPage.dotmaster file and find 
```
<dot:ContentPlaceHolder ID="MainContent" />
```			
and replace it with 
```
<dot:SpaContentPlaceHolder ID="MainContent" />
```			
- Refresh your page using CTRL+F5
- Navigate between your pages again you can notice that your browser is rendering pages without any loading.
- View your page source in your browser you will notice that any `RouteLink` control is rendered with  `dotvvm.handleSpaNavigation(this);` is added to its `onclick` event. 

#### Restriction
You can **NOT** use multiple `SpaContentPlaceHolder` controls in your DotVVM master page.

#### Summary
In this article we demonstrated how it is pretty easy to build SPA with DotVVM without learning a new framework or library.
How to use Pug and SCSS with Vue
Tags: vue, pug, scss
Published: 2020-04-23 02:19:20

## Why use pre-processors?
1. increase coding speed (not typing speed)
* reduce source code size 
* and my personal favorite: DRY

## Install Pug
In the root folder of your Vue application:
```bash
npm install -D pug pug-plain-loader
```
Then, while still in the root folder, create a new file `webpack.config.js` with:
```javascript
module.rules = {
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}
```
Done! To make sure your Vue component compiles with it, add `lang="pug"` to the `<template>` tags, like so:
```vue
<!-- before -->
<template>
  <div class="awesome-class">
     <h1>Hello World!</h1>
  </div>
</template>

<!-- after -->
<template lang="pug">
  .awesome-class
    h1 Hello World!
</template>
```
References:
[Pug homepage](https://pugjs.org/api/getting-started.html)
[Vue-loader Pug guide] (https://vue-loader.vuejs.org/guide/pre-processors.html#pug)
[Pug cheatsheet](https://devhints.io/pug)

## Install SCSS
In the root folder of you Vue application:
```bash
npm install -D sass-loader node-sass
```
Then, edit `webpack.config.js` so that it looks like this:
```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
}
```
Done! Adjust your component files by adding `lang="scss"` to the `<style>` tags.
```vue
<!-- before -->
<style scoped>
/* old css */
</style>

<!-- after -->
<style lang="scss" scoped>
/* write scss here */
</style>
```
Note: If you'd rather use the indent-based cousin, Sass, head on over to the [Vue-loader Sass guide](https://vue-loader.vuejs.org/guide/pre-processors.html#sass) for the necessary modifications.

References:
[Vue-loader Sass guide](https://vue-loader.vuejs.org/guide/pre-processors.html#sass)
[Sass cheatsheet](https://devhints.io/sass)
Python Microservices, Part 3: Effective Canonical Logging across Services
Tags: tutorial, python, microservices, programming
Published: 2020-04-23 02:03:31

*Learn how to design, implement, test and configure canonical logging across microservices using Python and Tornado web framework.*

---

Nature is a meticulous logger, and its logs are beautiful. Calcium carbonate layers in a seashell are nature’s log of ocean temperature, water quality, and food supply. Annual rings in tree cambium are nature’s log of dry and rainy seasons and forest fires. Fossils in the layers in sedimentary rocks are nature’s log of the flora and fauna life that existed at the time...

(Based on a PyCon India 2019 tutorial.) 

[Continue reading »](https://www.ml4devs.com/articles/python-microservices-tornado-03-effective-canonical-logging-across-services/)
20 : Should I continue self-taught learning?
Published: 2020-04-23 01:49:51

My honesty is sometimes naturally coming out and got me frustrated among lies, the society is full of lies, and it can be kind of marketing, 
I am getting to motivate to learn to code again, 
I lost the purity for a while, and busy to excuse my situation, oh, and pretty envy of Bootcamp, CS students, so lucky!


But I feel more positive to learn coding with self-taught. 
The one thing I want to miss about is coding review, 
and recent trends I should know these days.
I only know vanilla javascript, and I have no idea of the web, libraries, API, or else, I am sure that there is something way out of this terminal,


#Project-based learning
#Pure Mathematical Programming
#Focused on Web Front-end Development


The only hope I have now does not understand the whole structure of computer science, for instance, data structures and algorithms, it is necessary however, I have something more functional project for a real-world, it is based but not invest the whole time when especially web front-end development, then,


what kind of things should I more focus on?

Catching the dynamic web change
Vanilla JS Project
My goal is to get a job through vanilla JS portfolios! That’s enough! :)
19 : Why do you learn to code?
Published: 2020-04-23 01:48:51

It is not about actualizing my imagination into visual aspects, it now became solving my problems with my solution, and growing my inner confidence, and this is no longer learning the computer language, though!


Programming is everything about solving problems, essentially, web developers build the programs to solve the problems, and they invent something better and comfortable, and maybe become rich.


For me, this is about educating myself, from the out of my past experiences, It is difficult to change, It is super worthy because I can have the new perspectives of seeing the world, and understanding who I am.


Choose your favorite computer language and Solve problems, How simple it is. Then you can do anything, Bootcamp, self-taught, pair programming, or what else? 

become an entrepreneur? Why not, Never estimate the imagination, it is worthy to take care of it and great to make that actualize.


Thanks for everything, and Thanks to passing this time, I feel grateful!
18 : Problem Solving and Programming
Published: 2020-04-23 01:47:31

I approached learning to code as same as the linguistic way as I know what is grammar but do not know how to speak.
Let’s get some things straight here…
Programming is all about applying logic and reason to solving programming problems.


An algorithm represents your solution to a programming problem.
Coding is the process of translating your programming solution (ie, your algorithm) into the language of your choice, eg, Java, Python, C++, Go or Smalltalk.


You can also get formal training in algorithms where you are typically exposed to well-known algorithms (or well-known solutions to common problems). This can be very helpful. Think of Donald Knuth’s The Art of Computer Programming, for example.


It should also be clear that learning a programming language (or learning to “code”) is NOT the same thing as learning to program, something that a lot of beginners are confused about.


So the answer to your question is, you are learning algorithms when you are learning to program. (You just might not be recording your algorithm in pseudocode or flowcharts, as your teacher might have you do.)


The conclusion: Do not try to trick the computer, The fundamentals are eventually punching you up so let me just begin the making small functions.


How did I survive from burning out and traumatic memories?
Feel free to take your time to understand the process
Do not blame yourself longer and it is okay to take it easy in the beginning
Forgive your past and accept the fact what you need to solve the problems
Prioritize your energy more than time
Set the limits and Keep trying it
sass-loader `~` imports with webpack
Published: 2020-04-23 01:46:49

Discovered this today, when compiling sass files from packages installed with npm. Handy shortcut instead of specifying directly the pathing. 

From the doco: https://webpack.js.org/loaders/sass-loader/

```
The sass-loader uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell Webpack that this is not a relative import:

@import '~bootstrap';
```
16 : Finding the intersection
Published: 2020-04-23 01:43:49


I had no assurance to study pure mathematics, Life is hard, and I don’t feel the functionality to invest in studying maths, the efficiency now needs to protect myself, and also to continue studying programming no matter what happened to today. Every single day, I want to learn.

---- 
Even though pure mathematics is the root of everything, it is not practically well known and might sound subjective, because, it is the only theory I like to say,

---- 
Then, It is time for me to prove my statement, and build up the real skills to make my pure mathematics to apply functional programming, that is my goal, and now does not matter how long it will take, it is my lifegoal project.
Outline of mathematics — Wikipedia
I always attracted to the structure, never thought to create my structure by myself, and mathematics makes it possible to me, not leaning on others, or outside.

https://en.wikipedia.org/wiki/Outline_of_mathematics
15 : My Front-end Engineering
Published: 2020-04-23 01:42:42

##What is the definition of front end engineering?
To know how to paint the web browser, every component, layout, color, typography, and understanding the different types of web systems deeply.

The only thing I can coding is HTML, CSS for now, because, I have a huge problem with operating, it was not about mathematical skills.

I think I want to more focus on HTML, CSS and make possibilities first, to understand the web structure and see how I can apply Interaction by JavaScript. I need more hints before I do programming,

Also by doing the new projects, I want to find my confidence back and be more clear how I understand and what I want to do more and finally set the priority. 

Because I was not prepared to study front end engineering by myself, and now I think I want to be more ready!
14: The Joy of CSS
Published: 2020-04-23 01:41:50

CSS is very special to me, I was thinking to give up my journey due to several reasons, 

---- 
The asethetic part supports who I am, as a creator.
So, Keep going on, make more artwork. I guess I need my time back to do something I can do now and find my confidence back, thanks to CSS!

---- 

https://twistedsifter.com/2019/11/painting-with-css-and-html-by-diana-smith/ 

---- 

The Conclusion
I want to make the web development filed more widely to open to any type of people, just do make me validate by creating something. :)
12 : Math and Algorithms
Published: 2020-04-23 01:38:36

I am happy to find my purpose in my life and finally got every reason for living my day to get the opportunity to learn things that make me happy, and satisfy that I did not give up.
I don’t get sick talking about mathematics, it is too beautiful. One thing I want to say that the problem was math education.

---- 
How beneficial learning mathematics?
Critical thinking
Realistic working
Patience
Data-driven process
Achievement
Strategy

----  
What is the problem of math education?
Focused on the test score, not the process-based learning
Not enough explaining of the math working system
Lack of understanding the students who do not want math
My statement is that: Math is beneficial for everyone to learn how to teach by themselves.
---- 
Most of the math materials are focusing on problem-solving, and not focusing on the benefit. Likewise, practicing mindfulness meditation is good for mental health, but why?
---- 
I don’t want to ask people, I want to find my answer through the practice, and record the mathematic benefits from now on.
‘why’ not asking? when does the ‘why’ disappear to us? ‘why’ we need to study? like these type of questions, ‘why’ do we not allow questions? ‘why’ can I not apply the knowledge enough?
The algorithm is mathematical processing, and ‘why’ do we avoiding mathematics?
1.math can save formal education, is that true or false?
2. Is that possible to learn mathematics also actively?
To making the proof,
I have started learning mathematics based on the decimal system and was not necessary to approach solving algorithm problems, what I am going to do is learning mathematics based on the binary system.
BigQueryベストプラクティス (コスト管理)
Tags: bigquery
Published: 2020-04-23 01:36:35

公式ドキュメントに記載のある「BigQuery best practices」をまとめてみるシリーズ。
今回は[コスト管理](https://cloud.google.com/bigquery/docs/best-practices-costs)のプラクティスをまとめます。

_イタリック体はドキュメントに記載のない追加コメント_

# TL;DR
* `SELECT *`ではなく、必要なカラムのみを指定することで、読み込むデータ量を減らす
* データを試しに見たいだけならpreviewr利用する。
* クエリ実行前にコストを確認する
* LIMIT句ではコストを絞ることができない。
* 請求データを可視化しコストを管理する
* パーティショ分割テーブルを利用する
* 複数のステージがあるクエリ（SELECTした結果を別のクエリで参照するなど）は中間結果を保存する
* サイズの大きなテーブルを作る時は、有効期限を設定する。
* ストリーミングインサートはすぐに利用したいデータにのみ利用する。

# ベストプラクティス
### Query only the columns that you need.
`SELECT *`ではなく、必要なカラムのみを指定することで、読み込むデータ量を減らす
  * 全カラムに対してフルスキャンが行われる
  * データを実験的に眺めたいだけならpreviewや`bq head`を利用しよう
  * `LIMIT`では読み込むデータ量を減らすことはできない。`LIMIT`なくても`LIMIT 1`でも全く同じデータ量が処理される。`INFORMATION_SCHEMA.JOBS_BY_XXX.total_bytes_processed`で確認可能。
  * `SELECT * EXCEPT(...)`は有効なので、一部のカラムのみ除外したい場合は利用しよう
  * 行を絞って全カラムを読み込みたい時は、そのサブセットのみを持った新しいテーブルを作るか、パーティション分割テーブルを利用しよう

### Don't run queries to explore or preview table data.
データを試しにみるのならpreviewr利用する。
（既出のため割愛）

### Before running queries, preview them to estimate costs.
クエリ実行前にコストを確認する

* BigQueryコンソールは、処理予定のデータ量をクエリ実行前に表示してくれる
* CLIなら`bq query --dry_run`で取得可能
* データ量からコストを計算するには、[Pricing Calculator](https://cloud.google.com/products/calculator/)が利用可能

### Use the maximum bytes billed setting to limit query costs.
 `Maximum bytes billed`を指定することで高額なクエリ実行を抑制する

* `Maximum bytes billed`を設定すれば、それ以上のデータ量を処理するクエリは実行できなくなるので、意図せぬ事故を防ぐことができる。

### Do not use a LIMIT clause as a method of cost control.
LIMIT句ではコストを絞ることができない。
（既出のため割愛）

### Create a dashboard to view your billing data so you can make adjustments to your BigQuery usage. Also consider streaming your audit logs to BigQuery so you can analyze usage patterns.
ダッシュボードでコストを管理する

* [請求データをエクスポート](https://support.google.com/cloud/answer/7233314?hl=en)して、[BigQueryにロードすることでコストダッシュボードを作る](Visualize GCP billing using BigQuery and Google Data Studio)ことができる
* _データ量の監視であれば、 `INFORMATION_SCHEMA.JOBS_BY_XXX.total_bytes_processed`を事前準備なしで使える。_

### Partition your tables by date
パーティショ分割テーブルを利用する
（既出のため割愛）

### If possible, materialize your query results in stages
複数のステージがあるクエリ（SELECTした結果を別のクエリで参照するなど）は中間結果を中間テーブルに保存する

* 複数のステージがあるクエリ（SELECTした結果を別のクエリで参照するなど）の場合、毎回全クエリが実行される。
* 効率化するには、中間結果テーブルを作る

### If you are writing large query results to a destination table, use the default table expiration time to remove the data when it's no longer needed.
サイズの大きなテーブルを作る時は、有効期限を設定する。

* クエリだけでなくストレージにもコストが発生するので、一時的にしか利用しない大きなテーブルには有効期限を設定する。

### Use streaming inserts only if your data must be immediately available
ストリーミングインサートはすぐに利用したいデータにのみ利用する。

* LOAD jobによるデータロードは無料で実行可能だが、ストリーミングインサートには費用が発生する。