teleren/devto huggingface dataset:
React Native 프로젝트를 git에 push 하기 전에 할 것
Tags: reactnative, cocoapods, git, pods
Published: 2020-12-09 00:38:40


## 곤란한 상황

여러 개발자들이 React Native 앱을 함께 개발하고 있다. 개발자 A가 잘 테스트하여 origin에 push 했다. 다른 개발자 B가 fetch 하여 실행해보려고 한다. pod install 을 하니 `Cocoapods could not find compatible versions for "Folly"` 오류가 발생한다. 그래서, B는 `pod repo update` 를 하거나 `pod update Folly --no-repo-update` 를 실행한다. 그랬더니, `Podfile.lock` 파일이 변경된다. 

`Podfile.lock` 파일을 보니 몇몇 패키지의 체크섬이 바뀌었을 뿐이다. 그런데, 이 변경 사항만으로 또 git에 커밋을 하자니 찝찝하다.

![pod_install_issue](https://dev-to-uploads.s3.amazonaws.com/i/6cby01qgx8amfldx1cgx.png)
 
&nbsp;

## 해결 방안
이와 같은 상황을 방지하기 위해서 다음과 같은 절차를 마련하였다

### push 하기 전에 할 것

- 패키지 디렉토리를 삭제한다. `ios/Pods` 까지!
  - `rm -rf node_modules ios/Pods` 
- 패키지를 재설치한다
  - `npm i`
  - `cd ios && pod install`
- 테스트
- 문제 없을 때 push

### fetch 한 후에 할 것

- `git fetch`
- `orign/{branch}` 로 checkout 한 후
- 기존 `node_modules`, `ios/Pods` 디렉토리 삭제
- 패키지 재설치
  - `npm i`
  - `cd ios && pod install`
- 테스트
- 이상 없으면 local branch 에 merge

&nbsp;
&nbsp;
<span>Photo by <a href="https://unsplash.com/@iambuggo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Kowit Phothisan</a> on <a href="https://unsplash.com/s/photos/pod?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
﻿
How to Use AWS SES as a Custom Email Sender in ASP .Net Core Identity
Tags: csharp, aws, email
Published: 2020-12-09 00:13:29

This article goes over the process to use AWS SES as a custom email sender with ASP .Net Core Identity. I'm using this inside a MVC project. 

This code depends on AWSSDK.SimpleEmail (which can be installed from nuget) and Microsoft.AspNetCore.Identity.UI (should be included in the default install of identity).

The custom email sender needs to implement IEmailSender, which only has one method, SendEmailAsync; apart from this, you can do whatever you like. My implementation below should work fine for you if you can have have AWS credentials set up on the machine as it uses the AWS SDK. Alternatively, you can access SES via SMTP and drop your implementation in. Apart from this, you simply need to add the custom email sender in the ConfigureServices method of Startup.cs. To do this, simply add this line:
```csharp
services.AddTransient<IEmailSender, SESEmailSender>();
```

You'll also need to follow the steps in <a href="https://docs.microsoft.com/en-gb/aspnet/core/security/authentication/accconfirm?view=aspnetcore-5.0&tabs=visual-studio">this Microsoft article </a> from Scaffold RegisterConfirmation on.

#### Custom Email Sender implementation
```csharp
using Amazon;
using Amazon.SimpleEmail;
using Amazon.SimpleEmail.Model;
using Microsoft.AspNetCore.Identity.UI.Services;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace YOUR_NAMESPACE
{
    public class SESEmailSender : IEmailSender
    {
        public async Task SendEmailAsync(string receiverAddress, string subject, string htmlBody)
        {
            // Change to your from email
            string senderAddress = "sender@example.com";
            // Change to your region
            using (var client = new AmazonSimpleEmailServiceClient(RegionEndpoint.EUWest2))
            {
                var sendRequest = new SendEmailRequest
                {
                    Source = senderAddress,
                    Destination = new Destination
                    {
                        ToAddresses =
                        new List<string> { receiverAddress }
                    },
                    Message = new Message
                    {
                        Subject = new Content(subject),
                        Body = new Body
                        {
                            Html = new Content
                            {
                                Charset = "UTF-8",
                                Data = htmlBody
                            },
                            Text = new Content
                            {
                                Charset = "UTF-8",
                                Data = htmlBody
                            }
                        }
                    }
                };
                var response = await client.SendEmailAsync(sendRequest);
            }
        }
    }
}
```
How to split the string at a specific character in JavaScript?
Tags: javascript
Published: 2020-12-09 00:00:00

---
  title: How to split the string at a specific character in JavaScript?
  published: true
  tags: JavaScript
  date: Wed Dec 09 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/split-string-at-specific-character-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-a63bfb369174e1960d91f08fbaa3b987.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/split-string-at-specific-character-javascript)
  
To split a string at a specific character, you can use the `split()` method on the string and then pass that character as an argument to the `split()` method in JavaScript.

```js
/* Split string at specific character */
str.split(",");
```

Consider a string with commas after every word like this,

```js
// a string
const str = "John,Doe,Mary,Roy,Lily";
```

Now let's use the `split()` method on the string and pass the character in our case comma (`,`) as an argument to the method to split the string when it encounters the comma.

It can be done like this,

```js
// a string
const str = "John,Doe,Mary,Roy,Lily";

// split string at comma
// using the split() method
const splitArr = str.split(",");

console.log(splitArr); // ["John", "Doe", "Mary", "Roy", "Lily"]
```

- The `split()` string method returns an array of split strings.
- You can also pass regex expressions to the `split()` method.

See this example live in [JSBin](https://jsbin.com/taleteleta/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Global Styles in Next.js
Tags: nextjs, blogvent
Published: 2020-12-10 01:38:39

---
title: Global Styles in Next.js
published: true
date: 2020-12-09 00:00:00 UTC
tags: nextjs, blogvent
canonical_url: https://www.netlify.com/blog/2020/12/09/global-styles-in-next.js/
---

Welcome to Blogvent, day 9!

In Next.js, you have TONS of support for pretty much every styling option you’d like to use. CSS Modules, Styled JSX, Sass, Less, Stylus, Styled Components, Emotion… I could go on! If you want to style a component, Next.js has you covered.

One thing that often trips people up though is adding global styles. But luckily, the framework has you covered there, too!

In your `pages/` directory, add an `_app.js` file if you don’t already have one. Yours might look something like this:

```jsx
// pages/_app.js

function Application({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default Application
```

Now, to add some simple global styles to your application, it’s as simple as importing it at this level!

```jsx
import '../styles/globals.css'

function Application({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default Application
```

## It’s done!

You now have a global stylesheet applied to your Next.js application. If you’d like to see it in a starter application, you can [check out this repo here](https://github.com/cassidoo/next-netlify-starter), or deploy the starter directly to Netlify with one click:

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/next-netlify-starter&utm_source=blog&utm_medium=nextstartertyling-cs&utm_campaign=devex)

If you’d like to see this applied in a more advanced application, [you can check out the repo](https://github.com/netlify/explorers/blob/main/src/pages/_app.js#L6-L8) for [Jamstack Explorers](https://explorers.netlify.com/?utm_source=blog&utm_medium=explorers-cs&utm_campaign=devex)!
The 75% keyboard layout
Published: 2021-01-29 20:10:11

---
title: The 75% keyboard layout
published: false
date: 2020-12-02 00:00:00 UTC
tags: 
canonical_url: https://glpzzz.dev/2020/12/02/75-percent-keyboard-layout.html
published: true
---

![Vortex Race 3](https://i.redd.it/w4hr8572jcq01.jpg)

This is a 75% keyboard, exactly the [Vortex Race 3](https://mechanicalkeyboards.com/shop/index.php?l=product_detail&p=3917).

And why do I post about it? Because it’s the layout for my brand new Ajazz AK33 keyboard which I’m testing while writing this post.

What’s special with this layout? Well, I’m very used to it because is the one on my Dell Inspiron 5523. As you can see in the picture It have all the keys except for the number keypad but arranged in a more compact way.

So, when deciding which mechanical keyboard to buy, the safe choice was this one. Until now, the typing experience is very good: I’m getting use to the sound and to the tactile feedback. But yeah, it feels nice! Very different from the keyboard on my laptop or the external Logitech I bought and never used (impossible for me).

Really I was scared. I wanted a more compact layout (there is 60% and even 45%) but the absence of arrow keys was the thing that stopped me.

Let’s see if I’m more brave next time.

With you, the Ajazz AK33:

![My Ajazz AK33 keyboard](https://glpzzz.dev/assets/ajazz-ak33.jpg)
Getting started in DevOps, CI pipelines, and setting up your first GitHub Actions
Tags: webdev, devops, github, testing
Published: 2020-12-08 23:28:35

Last November, FeaturePeek cofounder [Jason Barry](https://twitter.com/jasbarry) joined Mintbean to talk DevOps and help new Mintbean developers set up their first continuous integration pipelines. If you're not familiar with [Mintbean](https://mintbean.io/), it's a growing community of dev bootcamp graduates, self-learners, and other beginning developers that participate in weekly hackathons together. [Past hacks](https://mintbean.io/meets) have included trivia apps, stock trackers, chatbots, and lots more. Along with the hackathons, Mintbean offers free workshops and presentations that feature helpful speakers from relevant startups and industry leading companies. All Mintbean hackathons and workshops are all intended to help new developers build their portfolios and ultimately find their first jobs in software development.

One of the best parts of the Mintbean community is that every participant, code mentor, speaker, and community organizer at Mintbean are there to collaborate together and help each other learn. This focus on helping one another leads to a vibrant enthusiasm in Mintbean communities and chats, and new Mintbean participants always seem to think they've stumbled into a community that's too good to be true. Except that it's the real deal! That's why the FeaturePeek team are so proud to be sponsors of the Mintbean community, as well as frequent presenters on DevOps and career soft skills topics.

## Automate and Deploy with GitHub Actions

On that note, FeaturePeek cofounder and frontend developer Jason Barry joined a recent Mintbean cohort to discuss continuous integration and [setting up your first CI pipelines](https://www.youtube.com/watch?v=tQbZ7_C-KWk&t=32s). In this presentation, Jason chose to feature [GitHub Actions](https://github.com/features/actions) for its ease-of-use and for its generous free tier. In this talk, Jason discusses the important of continuous integration, how to set up GitHub Actions, as well as some simple tests and automations you can integrate.

Don't worry if you weren't able to join us on 11/16. That's why we recorded Jason's session, and this way you can watch it on your own time. Before you start, make sure to check out Jason's [GitHub Actions Starter Pack](https://github.com/jasonbarry/github-actions-starter-pack) repository on GitHub.
GitHub discussions: Your thoughts?
Tags: watercooler, github
Published: 2020-12-08 23:17:47

---
title: GitHub discussions: Your thoughts?
published: true
description: 
tags: watercooler, github
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/htwiz3w6sytp53mrml7g.jpg
---
Yesterday [GitHub announced](https://github.blog/changelog/2020-12-08-github-discussions-now-available-as-a-public-beta/) that the GitHub Discussions feature is now available as a public beta.

To me, GitHub has always been appealing for its straight to the point, productivity-based issues-features-pull requests workflow.

Surely, this could help brainstorm ideas and help new users get their bearings, but could also lead to more work on managing the repo, increase redundant content, spamming, etc.

Do you think the 'GitHub discussions' is a step in the right direction?
Can you age out of dev?
Tags: watercooler, healthydebate, discuss
Published: 2020-12-08 23:17:26

I've been thinking lately about how much I absolutely love to code, like just taking a task and building something cool. And I've also been thinking about my future with development, I'm a Senior Engineer now and I've been coding for 8 years, also taking responsibilities to design, team lead & architect at times. I worry that as I progress the only path is to move more and more into management responsibilities/roles or move into product. 

As a web engineer I feel too specialised to move into a full architect role which seems to be the only technical option for career progression. But I also have the worry that I'll get "too old" and not be hireable because all the new kids will know React v239 better than me 🙄

Am I the only who worries about this? Is there career progression where you get to just stay coding/building cool shit most of the time or _can you age out of dev_?
Learn React context by example
Tags: javascript, react, tutorial, codenewbie
Published: 2020-12-08 23:13:41

Passing data in React is straightforward. It is top to down, from the parent to the child component. But what when you need some data in the root component and have to pass it a few levels down? It can be messy doing it like that. That is the reason why there is context. It allows us to share values down the tree without explicitly passing them. In this post, you can find out how to use the context feature with React hooks.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cs4tb0epebf9ntkju247.gif)

As mentioned before, the context has many different use cases. For this post, I am using user data as an example. When you log in, this is the object you use in different places. 

## Step 1: Create a context
Creating context is simple, and for that, you have one function, createContext. This function receives only one parameter, default data. The result of this function is the context object, which contains the provider component.

{% gist https://gist.github.com/kristijan-pajtasev/4befb12d5c5649102ef28a782e069e9d %}

## Step 2: Using the provide component
Context data is available anywhere inside the context. Still, you need to wrap all the components into the provider. The provider is a component that is available to you by executing the createContext function. This component requires one prop, value. Whatever you pass in this prop is available in all components underneath it.

{% gist https://gist.github.com/kristijan-pajtasev/f4545c94abdea5f0fd6651fc66317902 %}

## Step 3: Access context data
Once you create the context and wrap everything in the provider, you want to access that data. Here is the place where the React hooks come in. All you need to do is use the useContext hook and pass context to it. After that, your context data is available.

{% gist https://gist.github.com/kristijan-pajtasev/ba0ec8c898f11ad1db367f80892811b8 %}

You can find code from this post in my [GitHub repository](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fkristijan-pajtasev%2Freact-hooks).

***

For more, you can follow me on [Twitter](https://twitter.com/hi_iam_chris_), [LinkedIn](https://www.linkedin.com/in/kpajtasev/), [GitHub](https://github.com/kristijan-pajtasev/), or [Instagram](https://www.instagram.com/hi_iam_chris_/).
Rebass Intro
Tags: react, rebass
Published: 2020-12-08 23:05:21

I recently read about an interesting UI library called Rebass for creating set of customizable UI elements which are based on the Styled System library. It gives the ability for React components to render to the canvas rather than the DOM. containing eight foundational components which styled-system, they allow the extension of custom UI components into your app with the ThemeProvider. This also reduces to need to write custom CSS in apps.

**Installation**

Install the core Rebass library:

`npm i rebass`

##Usage

**ThemeProvider**

Rebass components are stylistically unopinionated and do not include a theme by default You can add a theme to your application with a ThemeProvider component and by providing a theme in context. This example uses the Emotion ThemeProvider with the Rebass preset theme.

`npm i @rebass/preset emotion-theming`

Then wrap with the ThemeProvider component:

```
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'
export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>
```

**Theming**

You can use the default Rebass theme or completely customize the look and feel with a custom theme. Rebass follows the Theme Specification, so any theme built for use with Theme UI or Styled System will work out-of-the-box.

```
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
const theme = {
  fontSizes: [
    12, 14, 16, 24, 32, 48, 64
  ],
  colors: {
    primary: '#07c',
    gray: '#f6f6ff',
  },
  buttons: {
    primary: {
      color: 'white',
      bg: 'primary',
    },
    outline: {
      color: 'primary',
      bg: 'transparent',
      boxShadow: 'inset 0 0 0 2px'
    },
  },
}
export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>
```

**Card Composite Component**

Here is an example of a card box component

```
  <Box width={256}>
    <Card
      sx={{
        p: 1,
        borderRadius: 2,
        boxShadow: '0 0 16px rgba(0, 0, 0, .25)',
      }}>
      <Image src={props.image} />
      <Box px={2}>
        <Heading as='h3'>
          Card Demo
        </Heading>
        <Text fontSize={0}>
          You can edit this code
        </Text>
      </Box>
    </Card>
  </Box>
```

This is just a brief dive into Rebass. On the official [site](https://rebassjs.org/), you can look at how to customize props, images, buttons etc. 

**References**

- https://rebassjs.org/
- https://github.com/rebassjs/rebass
How to choose best job offer - interview with tech recruiter
Tags: career, productivity
Published: 2020-12-09 08:39:09

---
title: How to choose best job offer - interview with tech recruiter
published: true
date: 2020-12-08 22:57:48 UTC
tags: career,productivity
canonical_url: https://www.notonlycode.org/choose-best-job-offer/
series: Finding a new job - interview guide for developers
cover_image: https://www.notonlycode.org/content/images/2020/12/2020-12-matt-interview.jpg
---

Hello! This is the 4th and (almost) the last part of my video series about finding a new job. This time I'm talking to Matthew Barr who manages recruitment team at Orange Quarter in Amsterdam. We cover a range of topics: how to choose between job offers, how to compare job offers, how to get a feedback after rejection, whether accepting a counteroffer is a good idea and what are the things besides the basic salary that you should pay attention to.

{% youtube sRpJp7k-JWY %}

🎥 Video timeline:  
[0:00](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=0s) Intro  
[1:17](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=77s) How to respond to a phone call with an offer  
[2:18](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=138s) When to start discussing salary during interview process  
[3:40](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=220s) Why companies don't include salary range in job description  
[5:50](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=350s) How to reply when company asks for salary expectations  
[7:15](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=435s) How to discuss and negotiate the offer  
[9:06](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=546s) What to look at besides basic salary  
[10:12](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=612s) How to compare multiple offers  
[11:34](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=694s) How to think about annual bonuses  
[13:07](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=787s) What matters to people when choosing a company to work for  
[16:02](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=962s) Changing jobs and salary raise  
[18:06](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=1086s) Do people take paycuts when changing jobs?  
[19:45](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=1185s) Lower salary or longer commute?  
[21:57](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=1317s) Is accepting a counteroffer a good idea?  
[25:42](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=1542s) Why companies don't want to share feedback after rejection?  
[30:20](https://www.youtube.com/watch?v=sRpJp7k-JWY&t=1820s) Are companies less flexible in negotiations due to current economic situation?
100 Days of Code: Day 4
Tags: swift, ios, codenewbie, beginners
Published: 2020-12-08 22:48:50

This is one of those times when I thought I was going to learn one thing, but ended up with a completely different lesson. I didn't post last night because I fought with it, said screw it, went to bed and played there for two hours thinking about it. I just couldn't let go of it.

I started off by building a simple app called StinkLock. 4 labels, 3 sliders and a button. The idea was once the sum of the sliders equaled something or some sequence of values, the button would become active to tap and show a modal screen. Related aside, practically every little thing I do to reinforce an idea always becomes some way of telling my kid they stink.

I put everything in the `main.storyboard`. I put the `UILabels` that showed the value rounded to whole numbers above the `UISlider`. I put the `UILabels` and `UISliders` in their own `StackView`. I put those three in a stack together, constrained to center horizontal and vertical. I added my `@IBActions` and `@IBOutlets`. All I really needed to do was decide on the functions to change the button state from `disabled` to `active`, add the segue and call it done. 

I ran my app in the simulator. Slider buttons didn't move. Ran it on my phone. Same thing. I added the `slider.minumumValue` and `slider.maximumValue` properties in the `viewDidLoad()`. Didn't budge. I tinkered with the content mode properties. Nothing. That's when I went to bed to brood over it. 3 hours of sleep.

After a bit of hard googling and slamming back an energy drink, I found it. Every time I embedded the elements into the `StackView`, my leading and trailing were clipped, by the time I had it three stacks deep, the slider had no room to wiggle. I removed all of my constraints, rebuilt the layout. It works fine. Exactly what I wanted it to do. I'm sure I muttered some vulgarities to myself.

I did watch a tutorial on optionals, read a few articles on them. But nothing is going to stick with me like the sleep depriving struggle I had with a simple `UISlider`.