teleren/devto huggingface dataset:
Challenge-- Capitalize each word in a string
Tags: javascript, beginners, codenewbie, webdev
Published: 2020-04-04 18:34:24

How is everyone holding up? The last few weeks have been completely unpredictable in the worst ways. So I can only hope that you are all maintaining your sanity, continuing the job search and making progress towards your goals step by step.

I took some time off from blogging to recenter in the midst of this craziness. But found myself wanting to blog about my progress with algos and understanding Big O Notation aka time/space complexity.

Found [this YouTube playlist by KodingKevin](https://www.youtube.com/watch?v=LuXCJxY7nPE&list=PLn2ipk-jqgZiAHiA70hOxAj8RMUeqYNK3&index=1) which does the best job I've seen in breaking down this difficult subject. I've been working through the problems in this playlist one by one. Pausing the video to attempt the challenge, reviewing his solution and quizzing myself on the complexity before hearing Kevin's answer.

I just finished the Capitalize challenge with a different approach. Check out [Kevin's solution](https://youtu.be/Q5UnhIi55-0) and take a look at mine below. How could I make my solution more efficient?

#####Challenge:
- Write a function that returns the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.

#####My initial questions (important in an interview setting):
- Do I want to use Title Case (every word)or Sentence Case (first word only)? ***Response: Title Case***
- Do I need to be grammatically correct? Make sure "I" is always capitalized? Make sure "the", "and", etc are never capitalized? ***Response: Ignore grammar rules***

#####My solution (pseudocode):
1. Split string into an array of words
2. Convert every first letter to uppercase
3. Convert my words array to a string with .join()
4. Return the new string

#####My solution (JavaScript):
```javascript
function capitalize(str) {

  // Split string into an array of words
  const string = str.split(" ");
  const cased = [];

  // Convert every first letter to uppercase
  string.map((word) => {
    cased.push(word[0].toUpperCase() + word.slice(1).toLowerCase());
  });

  // Convert my words array to a string with .join()
  return cased.join(" ");
}
```

#####Time / Space Complexity:
- O(N) aka linear -- this is because our solution goes through every element of our string
Configuring Apache Kafka MongoSinkConnector on Windows
Tags: apachekafka, mongosinkconnector
Published: 2020-04-04 18:30:05

I downloaded the connector from [confluent](https://www.confluent.io/hub/mongodb/kafka-connect-mongodb)
Click on the blue Download button at the left to get **mongodb-kafka-connect-mongodb-1.0.1.zip** file.

There is an -all.jar file in the zip. There is also the file **MongoSinkConnector.properties** in the etc folder inside the zip file.

Move the jar file to kafka_installation_folder\\**plugins**.
Move the properties file to kafka_installation_folder\\**config**.

My Kafka installation folder is E:\Tools\kafka_2.12-2.4.0
That is, in my case,
E:\Tools\kafka_2.12-2.4.0\\**plugins** has **mongo-kafka-1.0.1-all.jar** file. And E:\Tools\kafka_2.12-2.4.0\\**config** has **MongoSinkConnector.properties**.

My **connect-standalone.properties** file has the following entries:
```bootstrap.servers=localhost:9092
key.converter=org.apache.kafka.connect.json.JsonConverter
value.converter=org.apache.kafka.connect.json.JsonConverter

key.converter.schemas.enable=false
value.converter.schemas.enable=false

offset.storage.file.filename=/tmp/connect.offsets
offset.flush.interval.ms=10000
plugin.path=E:/Tools/kafka_2.12-2.4.0/plugins/mongo-kafka-1.0.1-all.jar
```

My **MongoSinkConnector.properties** file has the following entries
```name=mongo-sink
topics=topic1,topic2
connector.class=com.mongodb.kafka.connect.MongoSinkConnector
tasks.max=1

connection.uri=mongodb://localhost:27017,localhost:27017,localhost:27017
database=test_kafka
collection=transactions
max.num.retries=3
retries.defer.timeout=5000

field.renamer.mapping=[]
field.renamer.regex=[]

max.batch.size = 0
rate.limiting.timeout=0
rate.limiting.every.n=0
```

**How To Run**
Start mongodb, zookeeper, kafka server in three consoles.
In 4th console, start Kafka connect --
`bin\windows\connect-standalone config\connect-standalone.properties config\MongoSinkConnector.properties`

In 5th console, send msgs to a topic (I did for topic1)
`bin\windows\kafka-console-producer --broker-list localhost:9092 --topic topic1`
\>{"Hello":1}
\>{"Mongo":2}
\>{"World":3}

Open mongo (client) in a new (5th console) and check your database/collections. You will see the above three messages.

Originally posted on : https://mh-github.github.io/kafka-connect2.html
Tic Tac Toe Fight!
Tags: javascript, showdev, gamedev, webdev
Published: 2020-04-04 18:26:34

---
title: Tic Tac Toe Fight!
published: true
description: Write an AI to play Tic Tac Toe against friends
tags: javascript, showdev, gamedev, webdev
---

Once upon an internship, the company I was with brought all the programming interns together to participate in a fun little challenge: writing an AI to play **Connect 4** against each other. Or maybe it was **Tic Tac Toe**? I can't really remember the details. All I recall is that it was a ton of fun and I wanted to recreate that experience!

So, here it is: [T3F](t3f.netlify.app)

![Tic Tac Toe](https://dev-to-uploads.s3.amazonaws.com/i/hx2e6hebjmzjkvmacoa7.png)

This is a pretty simple **Tic Tac Toe** game where you get to play with humans, or one of the built in AIs (there are only 2 very simple ones right now 😅). But the part I like the most is the part where you can pit your custom AI against a friend's!

![Tic Tac Toe - Custom](https://dev-to-uploads.s3.amazonaws.com/i/z6zlrz79clrk9nzdoke3.png)

The AI is just a function that takes in the game state and returns the position you want to play on. In order for the game to talk to your AI however, we need to put it on a server - which is a great use case for a serverless function!

There are many cloud providers that offer serverless functions, but probably the easiest way to get started is to use Netlify Functions. Kent C. Dodds already has a great blog post on [how to get started with Netlify Functions](https://kentcdodds.com/blog/super-simple-start-to-serverless), so I won't go into how to create one. 

Here's an example of a custom AI:
![Custom AI](https://dev-to-uploads.s3.amazonaws.com/i/lg3g8yqe84vd5saeopt2.png)

This function parses the request body to get the game state object, and then returns the position of the first item in the `cells` array that does not have a `playerId` (the next unoccupied cell). Yours can be a lot more sophisticated than this! Feel free to take this example and make it your own. The game state sent to the function and the expected output are described more fully in the info box that appears below the player setup screen.

Here's a demo of two different AIs playing against each other:
![Game Example](https://dev-to-uploads.s3.amazonaws.com/i/1nm432mwm4gdckb2kwg8.gif)

Let me know if you decide to check it out. Feel free to share your feedback, games and even custom AI for others to play against!

Here's the (very messy) [repo](https://github.com/adrfoong/t3f) if you're interested 😁.
Watch me deploy a React and an Angular website to AWS using AWS CDK with one command
Tags: aws, angular, react, tutorial
Published: 2020-04-04 17:45:41

Watch the latest deconstructing cdkpatterns video where I deconstruct the angular and react patterns.

### Full Architecture:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c4pabcefmgtmp8fzazi1.PNG)

### GitHub Links:
- [Angular Codebase](https://github.com/cdk-patterns/serverless/tree/master/s3-angular-website)
- [React Codebase](https://github.com/cdk-patterns/serverless/tree/master/s3-react-website)

### CDKP Commands:
```
// Angular
npx cdkp init s3-angular-website
cd s3-angular-website
npm run deploy
```
```
// React
npx cdkp init s3-react-website
cd s3-react-website
npm run deploy
```
### Deconstructing The S3 Deploy Pattern

I talk the theory, deploy, show the cdk-spa-deploy jsii construct then delete the bundled website and show you how to deploy your own!

{% youtube tUUNiF0q7rk %}
menuffy to open the app's menu at your fingertips
Tags: macos, swift
Published: 2020-04-04 17:43:22

I've created a mac app called menuffy.

## Motivation

I'm using a 37-inch 34WK95U-W wide display from LG. It is large. It is unusually large on the side. It's a nice and spacious display, but there's one problem.

![1](https://user-images.githubusercontent.com/235650/78457649-ca7d8200-76e6-11ea-9b92-2d755a357a80.jpg)

### The app's menu is too far left and painful

![2](https://user-images.githubusercontent.com/235650/78457650-ce110900-76e6-11ea-90ae-90c47ac4ea5a.jpg)

I have to bend my neck to see it, and if I use the menu bar, I don't remember the shortcuts, so I have to wander around looking for where it is, and my neck gets tired and tiring.

## Usage

You can quickly start menuffy with a shortcut ( `command + control + m` by default). The menu of the application now used is displayed in the middle of the screen when it starts. This way, you can look at the menu carefully while keeping your eye line in the middle.

![3](https://user-images.githubusercontent.com/235650/78457654-d0736300-76e6-11ea-80c8-06580477f67d.jpg)

### Search the menu

I know the name of the menu, but sometimes I don't know where the menu is, so I made it searchable. Now I don't have to get lost.

## Download

If you're interested, you can download it here. I'd love to try it out and get some feedback.

- [menuffy](https://zaru.github.io/menuffy/index_en.html)

I have also published the source code on GitHub, so if you're interested in developing it, we'd love to hear from you.

- [GitHub zaru/menuffy](https://github.com/zaru/menuffy)
A rap song about meetings
Tags: showdev, culture, meetings
Published: 2020-04-04 17:27:09

---
title: A rap song about meetings
published: true
description: https://www.youtube.com/watch?v=Lu3KIiKPpWc
tags: #showdev, #culture, #meetings, #discuss
---

Song url: https://www.youtube.com/watch?v=Lu3KIiKPpWc

Quick background on the project: I'm a full time programmer and I love making rap music. I see a lot of humor in the profession/industry, and thought it would be fun to combine the two.
I am publicly committing to the #100DaysOfCode!
Tags: 100daysofcode, vue
Published: 2020-04-04 17:13:57

## Commitment

April 5, 2020: I am committing to the #100DaysOfCode challenge!

My reason for taking part in this challenge is to sharpen my skills in tech that I know and love. 

- I want to create flow between the day-to-day and build momentum towards making coding a habit outside of work.
- I want to use this time to develop my portfolio and showcase my work.

## Plan

For the challenge, I want to see a project from start to finish. I will build a **mobile app using Vue and Quasar** to solidify my skills as a Vue developer while also learning a new framework at the same time. 

- The app I will work on would be **Budgetier**, an expense tracking app.
- I will track the time I spend on the challenge.
- I will use Notion as my project management tool.

## Goal

By the end of the challenge:

- I will have finished Budgetier and deployed it to the Play Store.
- I will not have skipped a day.
- I will have a portfolio up.
- I will work on the challenge without compromising my health and relationships!
Using SASS global variables in Nuxt JS
Tags: vue, saas, codenewbie
Published: 2020-04-04 17:10:37

Using a configuration file for global variables in Nuxt is very simple, it just takes some steps to follow...

- *Step 1:* Add `sass-loader` and `node-sass` to your project
```Bash
using npm:

npm install --save-dev node-sass sass-loader

using yarn:

yarn add --dev node-sass sass-loader

```

- *Step 2:* Adding the plugin `style-resources` to your project. If you don't know about plugins take a look in [NuxtJS documentation](https://nuxtjs.org/guide/plugins/). Also you can review the mentioned plugin [right here.](https://github.com/nuxt-community/style-resources-module)
```Bash
using npm:

npm install --save-dev @nuxtjs/style-resources

using yarn:

yarn add --dev @nuxtjs/style-resources
```
- *Step 3:* Adding to your `assets` directory a new sccs directory (this is where your global variable files will be stored, you can use as much as you like)

![Directory image](https://res.cloudinary.com/ds6bnmwii/image/upload/v1586019228/blog-posts/directory_ja22co.png)

And my `colors.scss` file looks like this

```scss
$white: #fff;
$black: #000;
$green: #43976c;

/* All the variables you want */
```

>How we're going up to here? We're almost done! let's do this!

- *Step 4*: Modify your `nuxt.config.js` file to map the new styles
```Javascript
export default {
	//...
	css: [
    '~assets/scss/colors.scss'
  ],
	//...
	modules: [
    '@nuxtjs/style-resources'
  ],

	//You will have to add this new object if it doesn't exist already
  styleResources: {
    scss: ['./assets/scss/*.scss']
  },
	//...
}
```

We did it!! That's all! :+1: :+1: Now we can use our new variables wherever we want without importing anything.
Example
```Javascript
// Don't forget to specify lang="scss"
<style lang="scss" scoped>

.my-css-class {
  width: 90%;
  height: 2px;
  background-color: $green; // Here we are using the variable
  border-radius: 5px;
}

</style>
```
Hope this was helpfull for you! I'll leave the [original post](https://hackernoon.com/how-i-use-scss-variables-mixins-functions-globally-in-nuxt-js-projects-while-compiling-css-utilit-58bb6ff30438) where I learned from.

Thank you for reading!
React Hooks | My Package
Tags: react, javascript, nextjs, hooks
Published: 2020-04-04 16:59:28

<center>#start</center>

Hi everyone! 
[GitHub of the Project](https://github.com/DaxSoft/react-hooks)

-----

I have been using React for about 7 months already. And by this, I have created a lot of Hooks and other stuff to made my life easy. So by this, I have created a suit of react hooks to help me. In which, I have been using in whatever 'react-project' I made.

-----

* useAsync : Handle with Async Functions 
* useBoolean : Better way with a good semantic to handle with Boolean states
* useClient : Useful for server-side apps, in which you can check up it is under Server-Side or Client-Side
* useDebounce : For functions that the user can call any time 
* useFetch : A complete tool to handle with requests from API. 
* useIndex : With this you can handle with 'Pagination' or whatever use the concept of 'Page Index', 'Per Page'
* useKeyboard : Identify the key pressed 
* useLocalStorage : Save values it and get the values on LocalStorage
* useMiddleMouse : Identify if the user is using the MiddleMouse (scrolling)
* useMouseOut : Identify if the mouse cursor is out of the range of the element
* useMouseIn : Identify if the mosue cursor is inside of the range of the element
* useObject : Better way to handle with Object values
* useScreenSize : Identify the size of the Window and the orientation of the screen.
* useScroll : Identify the state of the scroll of the page
* useToggle : Useful to handle with Toggle elements like 'Tabs' and so on.

-----

I'm currently building up the Docs for this package and editing to give you guys a better example. So, I'll be really happy if you guys give me a feedback xD

-----

Example: (Next.js + React + Fastify)

It's a simple example of search repository on Github.
To check up, clone the folder 'example' on the repository of this Project. And run up:

```bash
npm install && npm run build && npm run start
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7mmah0mejaqcxmokq2w1.png)
State Management - Redux or MobX?
Tags: react, redux, mobx
Published: 2020-04-04 16:55:17

Coming into my current React project mid-development, I didn't have proficiency with either Redux or MobX, and our project used Redux, so I got accustomed to it.

Now that I have a firm grasp of Redux, I took some time to look at alternatives so I could have additional insight moving forward.

Linking an article I thought did a good job comparing these two main state management contenders, both in concept and in code snippets.

[Redux vs MobX: Which Is Best for Your Project?](https://www.sitepoint.com/redux-vs-mobx-which-is-best)

The Conclusion:

*'Clearly, you can see that MobX’s code base is far much leaner. Using OOP style and good development practices, you can rapidly build applications. The major downside is that it’s very easy to write poor, unmaintainable code.*

*Redux, on the other hand, is more popular and well suited for building large and complex projects. It’s a strict framework with safeguards ensuring every developer writes code that’s easy to test and maintain. However, it’s not well suited to small projects.'*
Using function in v-model
Tags: vue, tutorial, webdev, javascript
Published: 2020-04-04 16:45:38

In a common definition:
“ The _v-model_ attribute is a way of creating a mutual binding between the user input and the vue.js component. This will automatically pick up changes and store this value in the data properties of the component. This will be commonly used on form input to record the user input.”

This means we should use data properties for this.
Sometimes, we need to use a function _(method or computed)_ with a return value in the v-model, but this causes an error.

we can use __:value__ instead of _v-model_, Just like that

>If you found it useful, you can follow me and also visit my [website](http://mohsenfallah.ir), because there are more ways to connect with me. I hope this would help you to improve your coding skills. Thank you for your attention.
___
_This article was originally published on The [Dev.to](https://dev.to/mohsenfallahnjd) on April 4, 2020 and was written by **Mohsen Fallahnejad**._
Two Ways To Manage State In React JS
Tags: javascript, react, webdev, codesandbox
Published: 2020-04-04 16:45:27

Once your application starts to get a little complex, you need to start managing state. I work alot with Ionic Framework and spend time in the forums you you see the same question consistently asked, "How go I get data From one page, Tab in my app to the other?" In some cases it is pretty straight forward, but in most cases it is the beginning of a larger problem that can be easily solved with one of the two solutions provided in the samples below.

[React Context](https://reactjs.org/docs/context.html): Context provides a way to pass data through the component tree without having to pass props down manually at every level.

```javascript
import React from "react";

// create the context
export const Context = React.createContext();

// create the context provider, we are using use state to ensure that
// we get reactive values from the context...
export const TheProvider = ({ children }) => {
  // the reactive values
  const [sharedValue, setSharedValue] = React.useState({
    value: "initial",
    changedBy: "Admin"
  });

  // the store object
  let state = {
    sharedValue,
    setSharedValue
  };

  // wrap the application in the provider with the initialized context
  return <Context.Provider value={state}>{children}</Context.Provider>;
};

export default Context;
```

[React Hooks](https://reactjs.org/docs/hooks-reference.html):Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. 

[useReducer ](https://reactjs.org/docs/hooks-reference.html#usereducer) - An alternative to useState that is very similar to redux.

```javascript
  const reducer = (state: IState, action: ActionType): IState => {
    switch (action.type) {
      case "update":
        return { ...state, ...action.payload };
      case "clear":
        return { ...state, ...action.payload, value: "" };
      default:
        throw new Error();
    }
  };

  const [state, dispatch] = React.useReducer(reducer, initialState);
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zhonqles695gaeqxq4yl.png)

I have created the same project one using useReducer and the other React Context. 

They are all set up and ready to go because the projects are in [@codesandbox](https://codesandbox.io/) ready to run without setup. You can fork or download the projects to your machine and try it out

Context - https://buff.ly/2JzYu53
useReducer - https://buff.ly/39CsyY5

#javascript #reactjs #learntocode #webdevelopment
Adding your Dribbble shots to your Gatsby website
Tags: gatsby, dribbble, api, graphql
Published: 2020-04-04 16:44:41

We all love [Gatsby](https://www.gatsbyjs.org/), don't we? One of my favorites features is being able to pull data from different sources and serve that data statically. 

Recently I found myself in the need of adding Dribbble shots to [my company's website](https://roselab.co/). So, like with any other content source, I looked for a plugin in Gatsby’s website. I found and installed this one.

```shell
    $ npm install --save gatsby-source-dribbble
```

Once installed, we need to add its configuration to the `gatsby-config.js` file:

```javascript
    plugins = [
      {
        resolve: `gatsby-source-dribbble`,
        options: {
          access_token: '' // Your access token here
        }
      }
    ]
```

So far, so good, right? So, what’s the point of this how-to? Well the thing is that getting that **access token** is not a walk in the park.

## Getting Dribbble’s access token

Thanks to Dribbble’s API  not-so-clear documentation, getting our account’s access token is a really tedious task. Here’s a simple walkthrough on how to do it:

### 1) Register your Dribbble application

In orden to access the API data we need to register an application in our Dribbble account.  To do this: 

- Log in into your Dribbble account.
- Go to Account Settings > Applications > Register Application.
- Fill the register form.

Once your application is registered you'll have a *Client ID* and a *Client Secret.* Save these credentials for later.

### 2) Request your access token

Here's where things get...tricky. In order to get access to your access token, open this website in your browser (replace *your_client_id* with the Client ID you got from the previous step:

```
https://dribbble.com/oauth/authorize?client_id=YOUR_CLIENT_ID
```

After you authorize your application, you'll be redirected to the callback URL that you filled in the previous form. That URL will have a parameter like these:

```
https://your-callback-url?code=SOME_RANDOM_CODE
```

We're almost there! ✨ Now, we just need to make a POST request like this —replacing  **your_client_id, your_client_secret ****and **previous_random_code** with the credentials you got in the previous steps— to this URL:

```
https://dribbble.com/oauth/token?client_id=YOUR_CLIENT_ID**&client_secret=YOUR_CLIENT_SECRET&code=PREVIOUS_RANDOM_CODE
```

To make the POST request, open your terminal and run:

```shell
    $ curl -X POST THE_PREVIOUS_URL
```

We did it! 🎉  The POST request should have returned a code like this one:

```javascript
    {
    	'access_token': '123n12jb2v32u32b3u2b', // Yayy 🎉
    	'token_type': 'bearer',
    	'scope': 'public',
    	'createdAt': '123mm22opw'
    }
```

That's it! It wasn't that hard, huh? Well, Dribbble's documentation isn't anywhere clear about how to get this access token, so figuring out this was incredibly tedious and I wanted to clear it out for anyone in the same situation.

Anyway, if you have any question you can DM on Twitter :) 

Stay safe, stay home!