teleren/devto huggingface dataset:
Supplemental explanation about customizing user interface with Azure Active Directory B2C (AD B2C)
Tags: azure, adb2c
Published: 2018-07-10 03:45:49

---
title: Supplemental explanation about customizing user interface with Azure Active Directory B2C (AD B2C)
published: true
description: 
tags: azure,adb2c
---

This article supplementary describes the article of   [Azure Active Directory B2C: Customize the Azure AD B2C user interface (UI)](https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization).

## Reordering social ID providers on the sign-in page

Social providers order seems to be constant on the sign-in page.
Though I wanted to change the order, the HTML code corresponding it is in an untouchable part.
So I changed it with CSS Flexbox.

```scss
.options {
  display: flex;
  flex-direction: column;
  div{
    margin-bottom: 15px;
  }
  div:nth-child(4){
    order: -5; // twitter
  }
  div:nth-child(3){
    order: -4; // facebook
  }
  div:nth-child(2){
    order: -3; // google
  }
  div:last-child {
    order: -2; // github
  }
  div:first-child {
    order: 10; // microsoft
  }
}
```

Applying an order property, the order can be changed.
This sample is that when chosen twitter, facebook, google, GitHub and Microsoft.
Note that original order will be changed depending on the chosen providers.

## The issue that the sign-in page is automatically scrolled up to the mail form when on loading on iOS Safari

Though I wanted to have priority to social account over e-mail account, it was not possible by default.
Because the page is automatically scrolled up to e-mail input form when loaded the sign-in page on iOS Safari.

As UI customizing can't be used Javascript, e-mail input focus can't be controlled.

So I solved that by force with CSS animation.

```scss
.localAccount{
  position: relative;
  animation: fade 1ms ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  z-index: 10;
}

@keyframes fade {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
```

localAccount class that is email section is moved up an amount to 1 screen, will be moved to the original position 1 second later.
This stops the page from scrolling.
PostgreSQLを導入する方法
Tags: postgres
Published: 2018-07-10 02:44:17

---
title: PostgreSQLを導入する方法
published: true
description: 初心者向け、Windows 7 32bitにPostgreSQLを導入する方法
tags: postgresql
---

Windows7 32bitの環境にPostgreSQLを導入する方法を説明します。

[ダウンロードページ](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads)

にアクセスし、


![ダウンロードページ](https://thepracticaldev.s3.amazonaws.com/i/ct8ogaw8n0nra454akh0.png)

ダウンロードしたいパソコンのOSと同じ種類のOSと
PostgreSQLのバージョンを指定し、「DOWNLOAD NOW」ボタンをクリックします。

PostgreSQLのバージョンはなるべく最新のものがよいと思います。

ダウンロードが完了したらインストーラを実行します。
インストーラ名は筆者の環境だと`postgresql-10.4-1-windows.exe`となっていました。


インストーラが起動しましたのでそのまま「Next」を押します。

![インストーラ](https://thepracticaldev.s3.amazonaws.com/i/7c19t0yxwkfn1o4kdb40.png)

インストール場所を聞かれます。

![デフォルトの場所でOK](https://thepracticaldev.s3.amazonaws.com/i/72gomwrk8zf0gfjrdy8m.png)

デフォルトの場所で問題ないので「next」をおします

ダウンロード対象を選ぶ画面があります。

![コンポーネント選択](https://thepracticaldev.s3.amazonaws.com/i/ktqnts72wq1p6405r983.png)

| ツール                 | 意味                  | 
|---------------------|---------------------| 
| PostgreSQL Server   | DBサーバー本体            | 
| pgAdmin 4           | DBをGUIで操作するツール      | 
| Stack Builder       | 追加機能をインストールする道具     | 
| Commmand Line Tools | コマンドラインからDBを扱う便利ツール | 

今回はすべてにチェックが入っているので、そのまま「next」を押します。

データを保存する場所が聞かれます

![データ](https://thepracticaldev.s3.amazonaws.com/i/sqy7tev45vqbzzvregwl.png)

特に変える必要はないので、そのまま「next」を押します

次の画面で管理ユーザ(ユーザー名:postgres)のパスワードを設定します。

![pass](https://thepracticaldev.s3.amazonaws.com/i/ixraigcyvv7mzrqq9gzn.png)

パスワードは他人に分からないもの、そして忘れないものをに(重要)打ち込んでください。

パスワードの入力が終わったら「Next」を押します。

次にpostgresqlのポート番号を設定する画面が出てきました。

![port](https://thepracticaldev.s3.amazonaws.com/i/e0jvn05mrtkcoovjzfhl.png)

デフォルトのもので問題ないと思いますが、すでにこのポートをご使用中の方は
ポート番号を適当に1024～65536の範囲の値に変えてください。

次にdatabase cluster(今はわからなくてよい)作成時のロケールを設定します。

![locale](https://thepracticaldev.s3.amazonaws.com/i/a7jnuwf89gnecv1sx0q1.png)

本格的に運用する際はdatabase clusterやdbを作成する際にロケールを設定できますので、
今は悩まずに[Default locale]を選択しましょう。


インストール内容のおさらいがでます。

![おさらい](https://thepracticaldev.s3.amazonaws.com/i/x26skqfsa5vj5bky2814.png)

そのまま「Next」を押しましょう

インストール準備が整いました、という画面が表示されました。

![ととのった](https://thepracticaldev.s3.amazonaws.com/i/fesmcexazh9o366m43tk.png)

「Next」を押すとインストールがはじまります

PostgreSQLのダウンロードが完了しました。

![](https://thepracticaldev.s3.amazonaws.com/i/wbicbf4ny8giwrwq4uru.png)

step builderを使った追加のインストールを催促されますが、
今は不要なのでチェックを外します。

「finish」を押してインストーラを終了してください。

# PostgreSQLの初期起動



```
cd C:\Program Files\PostgreSQL\10\bin
psql -U postgres
```

>note:環境変数の設定の説明は今回時間がかかるので行いません。
>興味がある人は設定方法を調べて環境変数に
>C:\Program Files\PostgreSQL\10\binを追加してみましょう。


psqlのコマンドを打ち込むとパスワードを聞いてきます。
ここにインストール時に設定したパスワードを入力します。

以下に入力後のコンソールを示します。

```
C:\Program Files\PostgreSQL\10\bin>psql -U postgres
ユーザー postgres のパスワード:
psql (10.4)
"help" でヘルプを表示します。

postgres=#

```
ログインできました。

インストールしたPostgreSQLとそのログインまでが確認できました。

投稿が長くなったので記事を一旦切ります。
次回はデータベース作成からSQL実行検証までを紹介します。
Module Monday: Swing-up form, Responsive Google Map, Call to action cards & more
Tags: showdev, opensource, webdev, javascript
Published: 2018-07-10 00:14:41

---
title: Module Monday: Swing-up form, Responsive Google Map, Call to action cards & more
published: true
description: Free, open-source modules for your next project
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_pad,h_420,w_1000/v1531154005/form_o6gpp4.gif
canonical_url: https://guide.anymod.com/module-monday/03.html
---

Mods are functional, ready-to-use web modules for any website, on any platform.

## Open source: fork or copy + use anywhere
All of the mods below are open sourced by [Anymod](https://anymod.com) and free to use in any project you choose, whether on Anymod or not.

We support developers and open source, and Module Mondays are one way we give back to the developer community to help foster a more open, inclusive web. We hope you enjoy!

### Swing-up form
Form that swings up from a floating action button (FAB).
<a class="button" href="https://anymod.com/mod/rdokl?v=20">View mod</a>
<a href="https://anymod.com/mod/rdokl?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_pad,h_420,w_1000/v1531154005/form_o6gpp4.gif"/>
</a>

### Responsive Google Map
Add your API key and get a responsive map for your site.
<a class="button" href="https://anymod.com/mod/moamb?v=20">View mod</a>
<a href="https://anymod.com/mod/moamb?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1531154005/map_bwlxo1.png"/>
</a>

### Quotation block
Editable block for adding quotations to your page.
<a class="button" href="https://anymod.com/mod/anrlm?v=20">View mod</a>
<a href="https://anymod.com/mod/anrlm?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1531154004/quotation_m9fhs3.png"/>
</a>

### Facebook page
Add your Facebook page anywhere and customize its options.
<a class="button" href="https://anymod.com/mod/dbdob?v=20">View mod</a>
<a href="https://anymod.com/mod/dbdob?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1531154005/facebook_vsz8jt.png"/>
</a>

### Call to action cards
Add, remove, and edit cards to drive user engagement.
<a class="button" href="https://anymod.com/mod/moadk?v=20">View mod</a>
<a href="https://anymod.com/mod/moadk?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1531154005/call-to-action_vaneml.png"/>
</a>

## Contributing
If you want to contribute mods or ideas so that other developers can benefit, you can [request mods](https://guide.anymod.com/v1/community/requests.html) or [submit a mod](https://guide.anymod.com/v1/community/contributing.html).

I'll be posting new modules [here](https://dev.to/tyrw) every Monday -- I hope you find them useful!

Happy coding ✌️
Lorem Ipsum Generator plugin for Sketch
Tags: sketch, guide
Published: 2018-07-09 21:56:31

---
title: Lorem Ipsum Generator plugin for Sketch
published: true
description: How I created a lorem ipsum generator plugin for Sketch 
tags: sketch, guide,
canonical_url: http://whoisryosuke.com/blog/2018/lorem-ipsum-generator-for-sketch/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qmurg0mgtxjap93poy9v.jpg
---

I was recently working on a quick project in [Sketch](http://sketchapp.com) and I needed to insert some Lorem Ipsum text into a few fields. I did a quick search for a plugin on Google and came across [this one by @RichardGong on Github](https://github.com/richgong/sketch-lorem-ipsum-2017). It worked great, but only added a single line of Lorem to each text field, and the same Lorem text. This solution only goes so far if you work on any project with more than a single text field.

So I forked his project and added **more** Lipsum, cause *you know*, the more Lipsum the better. 

![GIF of plugin in action](https://github.com/whoisryosuke/sketch-lorem-ipsum-2017/blob/master/example.gif?raw=true)

## How it works

I generated 10 paragraphs on [Lipsum.com](http://lipsum.com) and added them to an array. The plugin grabs the current selection, loops through each layer, and if it's a text field -- adds a paragraph of Lorem Ipsum. I use a variable to keep count of each loop, and once it reaches 10, I reset the count to grab from the top of the list (so you can select 30 fields and it'll still fill them all, just repeated 3x).

## But it over-fills my text fields!

Yeah that's a thing. I was looking into a way to calculate the length of characters the current text field allows, but the Sketch API doesn't make it that simple, making it more than 20-30 lines of code to accomplish. It looks like the [sketch-highlighter](https://github.com/matt-curtis/Sketch-Highlighter/blob/master/Sketch-Highlighter.sketchplugin/Contents/Sketch/script.js) plugin has a snippet that I can break down and use as a base. That feature will have to come later when I have the time to add it. 

## Download the plugin

[Head over to Github and click the "Clone or download" button](https://github.com/whoisryosuke/sketch-lorem-ipsum-2017).

Let me know if you have any questions!
Ryo

***

**References**

* [Lorem Ipsum Generator Sketch Plugin](https://github.com/whoisryosuke/sketch-lorem-ipsum-2017)
* [Sketch Plugin docs](https://developer.sketchapp.com/guides/plugin-scripts/)
* [Original plugin by @RichardGong on Github](https://github.com/richgong/sketch-lorem-ipsum-2017)
In case you missed it! 
Tags: docker, containers, unix, bro
Published: 2018-07-09 20:54:32

---
title: In case you missed it! 
published: true
description: stuff you may have missed while you were on holiday
tags: docker, containers, unix, bro
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q6a8ntiaf4uh4fikefbl.jpg
---

Hope you had a great July 4th holiday! In case you missed it, I wrote up a few blog entries last week:

https://vault.osninja.net/bro-cluster-in-containers/ 
https://vault.osninja.net/ssh-aliases/ 
https://vault.osninja.net/shell-powertools/ 
https://vault.osninja.net/source-to-image-part-one/ 

This is what happens when you have lots of free time and enthusiasm for tech.
Employer-Sponsored Training
Tags: discuss, training, career
Published: 2018-07-09 19:13:48

---
title: Employer-Sponsored Training
published: true
description: Many companies sponsor training for their employees. From on-site, in-person training to hosting conferences, there are many ways companies do this. What training methods do you like most?
tags: discuss, training, career
---

Most great companies will offer some sort of training program. Whether that's a little bit of free time for self-directed training or the company pays for you to attend a class or conference, this training can take on many forms--but it's not for everyone. I'd like to hear from you! **What training programs have you seen from employers? Which ones worked? Why were they effective? What types of training do you like the most?**

As you consider your answers to those questions, let me tell you a bit about the training program we've had at my current employer, [MasterControl](https://www.mastercontrol.com/), in its current form. It's evolved a bit over the years and continues to evolve, but this is where we're at.

A few years ago we started formal, ongoing training. This takes a few forms. First, we have a biweekly meeting where we meet as a department to receive training. This training is provided by anyone in the department that wants to offer training and is coordinated with a small group of volunteers from the department that form the "training committee." These meetings can last up to 3 hours but they often last less than two. In addition to that, we encourage each employee to take up to 2 hours per week to train on whatever they'd like. From Pluralsight to books to tutorials and beyond. Finally, we also have a training budget where the company will pay for employees to attend conferences, take courses, get certifications, or whatever else they'd like to do for training.

All those things make up our ongoing training that we offer at MasterControl. It's an evolving program with some changes in the works right now. It's been moderately effective so far but we want to make it much better. Does your employer do similar things? What have you seen work well?
set Enviroment JPA แบบบ้านๆ
Tags: jpa
Published: 2018-07-09 17:33:50

---
title: set Enviroment JPA แบบบ้านๆ
published: true
description: 
tags: JPA
---

##### เกริ่นพอเข้าใจ
   
 บทนี้เป็นการ เตรียมทรัพยากรต่าง ๆ เพื่อที่เราจะเริ่มทำความเข้าใจกับพื้นฐานของคุณ JPA มากขึ้นเพื่อต่อยอดได้นะครับ
( `ความจริง เราสามารถสร้างพร้อมกับ สร้างโปรเจคได้เลย ตามตัวอย่าง spring-boot + jpa ที่มีเยอะแยะตามเว็บครับ `) ในบทนี้เลยจะแยกเอามาแต่ JPA เพียวๆ ( เขียน code java บ้างนิดหน่อยครับ )

---
#### สิ่งที่ความ set ไว้ให้เรียบร้อย

- JAVA_HOME
- [Link driver connect mysql](http://www.java2s.com/Code/Jar/c/Downloadcommysqljdbc515jar.htm)

---

##### 1 สร้างโปรเจคใหม่ขึ้นมาครับ (น่าจะไม่ยากนะครับ ^_^)
![alt text](https://thepracticaldev.s3.amazonaws.com/i/9dv7bn23a450l3j97tg0.png)

---

##### 2 ทำตามรูปภาพเลยนะครับ (ถ้าติดปัญหา comment มาถามได้ครับ)
![alt text](https://thepracticaldev.s3.amazonaws.com/i/1c59s63hu6cd4iizyh0w.jpg)
    
   ` *1 : ตั้งชื่อ project ครับ `
   ` *2 : เลือกตัวรันครับ ของผมใช้ jre1.8 `
   ` *3 : กด next `
    
---

##### 3 จากขั้นตอนที่ 2 ถ้าไม่มีปัญหาอะไรก็จะได้ หน้าเเบบนี้ครับ
![alt text](https://thepracticaldev.s3.amazonaws.com/i/w7zyw7fsqwc6arhlurnk.png)

---

##### 4 หากเราไม่มีตัว library เขาก็จะไม่ยอมให้เราผ่าน เราก็ไปโหลดมาครับ กดปุ่มเล็กๆ ตามรูปครับ
![alt text](https://thepracticaldev.s3.amazonaws.com/i/2yjz3ik9kmgzmnwcz6o2.jpg)

---
 
##### 5 เลือก version ตามที่สะดวกครับ ส่วนตัวผมเลือก ` ล่าสุด `ครับ
![alt text](https://thepracticaldev.s3.amazonaws.com/i/a4w5ixb9mla8zp6efou7.png)

---

##### 6 เหมือนกับติดตั้งโปรแกรมปกติครับ ติก accept (โกหกว่าอ่านจบและยอมรับบาป เพื่อไปต่อ^_^ )
![alt text](https://thepracticaldev.s3.amazonaws.com/i/ql9lct2p0zkkeog2cpgp.jpg)
` *1 : ยอมรับบาปทุก กรณี `
` *2 : ฉันได้สิ่งที่ต้องการ เราจบกัน `


---

##### 7 อาจจะยังมีเยื่อใย แต่เราจบกันได้ครับ (เริ่มนอกเรื่อง เอาเป็นว่าทำตามรูปนะครับ)
![alt text](https://thepracticaldev.s3.amazonaws.com/i/f7cmtap9vb6tirmtkip0.jpg)

`*1 เราเลิกกัน ฉันดีเกินคน เชอะ~! `

---

##### 8 ถ้ามาถึงขั้นตอนนี้แล้วมียังเยื่อใย อ้าว ¬ _ ¬ ` warning !! ` ไม่เป็นไรครับ 
![alt text](https://thepracticaldev.s3.amazonaws.com/i/pah1ktp7ro4ayn4f8cz5.jpg)

---

##### 9 ต่อมา เราก็ไป add mysql connector เข้ามาครับ เพื่อจะทำอะไรสักอย่างเกี่ยวกับ DB
![alt text](https://thepracticaldev.s3.amazonaws.com/i/v4c6y212twxh54kqwz63.png)

---

##### 10 ให้รูปภาพ ทำงานบ้าง
![alt text](https://thepracticaldev.s3.amazonaws.com/i/njjp7ph7mxn4c93n3tjn.jpg)

` *1 : เลือกแท็ป Java Build path`
` *2 : เลือกแท็ป library ดูให้ดีๆนะครับ หลายครั้งที่เรามักเข้าใจผิด เเล้วหาไม่เจอ`
` *3 : เลือก Add External JARs ที่เลือกตรงนี้ เพราะว่าเรา ไปโหลด mysql connector .jar มาเก็บไว้ที่เครื่องครับ`
` Add คือ เพิ่ม`
` External คือ จากเครื่องเราเอง`
` Jars คือ ไฟล์นามสกุล .jar`

---

##### 11 เลือกไฟล์ MySql Connector ที่เราโหลดมา 
![alt text](https://thepracticaldev.s3.amazonaws.com/i/qrvvhvn53n65nhvlc20l.jpg)

`*1 : ตอนโหลดมา เก็บไว้ที่ไหนก็ชี้ไปที่นั้นละครับ แตกไฟล์ก่อนด้วยนะ`
`*2 : แล้วก็เลือกซะ`


---
Who's looking for open source contributors? (July 9 edition)
Tags: discuss, opensource
Published: 2018-07-09 17:17:49

---
title: Who's looking for open source contributors? (July 9 edition)
published: true
description: Please shamelessly promote your project. Everyone who posted in previous weeks is welcome back this week, as always.
tags: discuss, opensource
---

Please shamelessly promote your project. Everyone who posted in previous weeks is welcome back this week, as always. 😄
React, React-Router and Fetch API
Tags: react, help, beginners, fetchapi
Published: 2018-07-09 17:12:36

---
title: React, React-Router and Fetch API
published: true
description: problem with react, React-Router and Fetch API
tags: react, help, beginner,fetchapi
---

I'm having a problem with my React.

I use React-Router and the Fetch API.

So... I have a list of products and when I click on one, I am redirected to a route to display more details on the product in question but also to display the other products.

Say: `reactapp.com/all` for all products

`reactapp.com/p/productID` my two URLs

My problem:

When I am on `reactapp.com/p/productID` and I click on another product, the URL is updated but the product information is not updated.

When I click a second time, the product information I previously clicked is displayed 
I don't know if you understand me.I have a data restriction at the moment.so I can't deploy so you can see it.
Please if you've understood what i mean, help me
Explain Mock-Up versus Proof of Concept
Tags: explainlikeimfive, explain, mockups
Published: 2018-07-09 16:51:08

---
title: Explain Mock-Up versus Proof of Concept
published: true
description: 
tags: explainlikeimfive, explain, mockups
---

I recently joined a project and they are working on a proof of concept in order to see if it meets the client's needs. But how far does a Proof of Concept need to go?

How much of it can be faked and how much needs to be real logic/data? I know that depends on the situation.
Developing and executing a sound digital strategy
Tags: webdesignknoxvilletn, seoknoxvilletn, digitalmarketingtn, socialmediamarketing
Published: 2018-07-09 16:34:25

---
title: Developing and executing a sound digital strategy
published: true
description: Developing and executing a sound digital strategy becomes more. complicated everyday. Your competitors are not waiting for you to figure it out. They are scrambling to mend their own issues and hoping that they can do so faster than you.-If you take the time to get to know us, you will find a that we are people that you can trust. We strive to be the most educated, effective and customer centric company in our industry. Call us today and ask a few questions. Whether you are hust trying to keep your website competitive or are ready to make a real move in digital marketing. We can develop solutions to get you where you want to go.
tags: Web design Knoxville TN, SEO Knoxville TN, Digital Marketing TN, Social Media Marketing
---
Me, my future self and self
Tags: swift
Published: 2019-01-31 20:23:39

---
title: Me, my future self and self
published: true
tags: swift
canonical_url: https://zeitschlag.net/me-my-future-self-and-self/
---

A colleague of mine complained, that I use `self` way too much. In Objective-C, it was everywhere, but he sent me [this blogpost](http://thebugcode.github.io/when-to-self-in-swift-and-when-not-to-2/) and recommended me to use `self` in Swift sparingly and only when necessary for the compiler.

But back in 2012 I started to learn Objective-C. Until 2015 it was more or less a hobby, but in 2016, I moved to Berlin to start a job as an iOS developer. Pretty soon, I switched to Swift. Since June 2018 I've been part of the team, who develops the [Lidl-app for iOS](https://itunes.apple.com/de/app/lidl-prospekte-angebote/id398474140?mt=8).

Earlier this day I fixed a bug and created a Pull Request. I had a discussion about `self` with the colleague. His argument was, that it's totally sufficient to use `self` only in those places, where the compiler really needs it. The consequence, according to him, is to have cleaner code. And so he made me think and I felt the urge to justify myself and `self`.

I strongly disagree with using `self` only in certain spots to make the compiler happy. It's much more important to use it, when it makes a developer's job easier. I'm not a fan of making the compiler happy in the first place. Making (future) developers happy is much more important to me.

And by "making happy" I mean writing code, that's easy to understand and easy to maintain for colleagues and my future self. And this includes being as explicit as possible. When I look at a piece of code, I don't want to spend a lot of time to understand the code, I want to understand the problem it solves and how.

`self` everywhere might add some kind of visual noise, but it also adds clarity. You get used to that visual noise. The [aforementioned blogpost argues](http://thebugcode.github.io/when-to-self-in-swift-and-when-not-to-2/), that not using `self` helps you finding memory leaks in closures. I don't think, that this is an issue of having/not having `self` everywhere in the first place, but more of an issue of paying attention.

Just because you can write very short Swift-code doesn't mean that you should. Closures are another good example for this:

You can reduce the amount of code in a closure dramatically by using `$0`, removing `return`, not using the parameter-name and so on. At the same time you reduce the readability of this code even further and in the end, only the person who wrote this code knows what this closure actually does. But this person left the company two months ago, so yeah. But that's another issue.

One of my goals is to write maintainable code and not to make a compiler happy on the expense of this goal. A compiler doesn't need `self`, sure, but it will make my job easier, starting tomorrow.

I hope, that this explains, why me and my future self — pun intended — are fans of `self`. My (future) colleagues will be, too. Hopefully :-)

Thanks for reading!