teleren/devto huggingface dataset:
How I found my first freelance project
Tags: career, webdev
Published: 2020-09-21 11:40:47

### Your first project is always the hardest to find. This is the story of how I found mine.

I've been working as a freelancer for 3 months now and I get asked a lot of questions about how I found my freelance work and how others might find work for themselves. I've decided to share the approach I took finding my first project, my experience with it and the results.

## How to find freelance projects

There are many ways you can go about finding freelance projects, and each might work for different people. When I started freelancing, I made it known across my network. I reached out to friends and family asking them to recommend me to others. I spread the word on social media, showcasing my skills through the public development of a new portfolio website. I got in touch with previous workplaces offering my services on a freelance basis.

There's no right answer on how to find freelance projects, and some people have success with many different approaches.

- Close friends and family
- Previous workplaces
- Social media
- Cold calling, either in person or via email outreach
- Freelancing platforms (upwork, toptal, etc)
- Referrals

You can use any or all of these to find your first project (and many projects after that).

My first project came through twitter.

## My first project

It took me a few weeks to get my first project. After reaching out to others on the channels I mentioned above I had a lot of feedback, with people getting in touch wanting help with their projects.

So I had a lot of calls and talked through the ideas proposed (I used Calendly to schedule these). Some projects I could help with, some I couldn't. For those where I could help, I wrote proposals demonstrating how I'd approach fixing their specific problems.

Some people dropped out at this point, which is expected. Some just want to know how much their idea would cost. After a few calls, I found my first client.

The project was Pigeon Loans, which you can read more about in the [Pigeon Loans Case Study on my website](https://danspratling.dev/projects/pigeon-loans).

## How to choose the right project

When going for your first freelance project, you want to make sure you pick something which is right for you. Whether you get a lot of interest or just one person, if the project isn't right for you then you should be wary of taking it.

There's something to be said about learning on the go, and a lot of projects will present you with opportunities to learn new things, but if something is far out of your comfort range it might not be the project for you, or you might spend far longer than expected actually delivering what you promised.
Setup rollup.js for a basic build
Tags: rollup, javascript
Published: 2020-09-21 11:20:48

---
title: Setup rollup.js for a basic build
published: true
description: Shows how to set up a JavaScript project with a build system using rollup.js
tags: rollup, javascript
series: my javascript frontend
//cover_image: https://direct_url_to_image.jpg
---

Hey this is a quick article starter showing what you will need to do if you want to get a really easy JavaScript project installed and running on your local dev PC or cloud dev environment.

The goals of this project are the following:

1. Use a modern packager (in this case rollup)
2. Build on GitHub using GitHub actions
3. Support hosting on static sites or CDN's
4. Organise code in a sensible fashion so that it is fun to develop and maintain in the future
5. Testable code

I am not going to cover all five in this article instead I am focusing on task one: 
```
1. Use a modern packager (in this case rollup)
```

So I have never used rollup before so I am looking forward to it and after reading the startup guide at https://rollupjs.org/ I think I am ready to begin.

I create the following folder structure and then run ```npm init``` into the Project1 folder using terminal.

D: - Development
     +- javascript
        +- Project1
           +- src

Next I modify the package.json file as follows:

```  
"scripts": {
    "build": "rollup --config"
  },
```

And add a rollup.config.dev.js file

```
// rollup.config.js
export default {
    input: 'src/main.js',
    output: {
      file: 'dist/project1.bundle.js',
      format: 'cjs'
    }
  };
```

This has given me the basic setup for creating a development build for my new project.  I execute the build by running ```npm run build rollup.config.dev.js```.

This creates as expected an output file in the dist folder called project1.bundle.js which can be distributed for use as the front end javascript project.
Successful Implementation of Salesforce Communities

Tags: implementation, salesforcecommunities
Published: 2020-09-21 11:05:15

[Salesforce Communities](https://www.cloudanalogy.com/) has transformed the way companies can stay connected with their customers, partners, and employees. Industry-relevant communities can be created to help companies meet customer needs and requirements and thus enable information sharing in an enhanced way. Businesses can greatly benefit from reducing the costs associated with maintaining customer connections with the help of Salesforce communities. However, customer engagement can also be improved by prioritizing understanding the customer needs and requirements that help businesses prosper.

This article covers how to successfully implement Salesforce Communities.

**Enable Salesforce Communities**
This is one of the most important steps to take to ensure a successful implementation of Salesforce communities. Businesses will first need to verify the availability of the community license. This can be done by selecting the Settings tab and choosing Company Profile> Company Information. Check the licenses listed at the bottom of the page. If the Communities license is available for your company, click Customize> Communities> Settings and choose the option titled "Enable Communities." You will need to choose a unique domain name and URL for Salesforce communities confirming availability if other companies use a similar name.

**Creating the Salesforce community**
Creating a [Salesforce community](https://www.cloudanalogy.com/) is a secondary process. The community name must be entered in the name column and the description must be included in the description column. In the URL input space, the custom URL must be entered. Once the details have been completed and completed, the "Create" tab should be selected. The overview page would be made visible to companies that only administrators could see. All remaining edits can be done in preview mode.

**Membership additions**
Choose which member profiles companies want to include in Salesforce communities. The defined permission sets would allow certain categories of employees to have access to each community.

**Add content**
Select the appropriate tab that best suits the community from the menu. However, the tab does not include the Chatter tab, which is the default landing page that will automatically display if neither of the tabs are selected.

**the brand image**
Companies can upload the logo, tagline in the header and footer tabs with the appropriate color selection, thereby embedding the company brand on the [Salesforce community page](https://www.cloudanalogy.com/).
The ES6 in Depth Challenge
Tags: javascript
Published: 2020-09-21 11:04:38

Mozilla (the creators of Firefox and MDN) has this interesting blog called Mozilla Hacks where they post interesting advanced tricks with Web technologies. In April of 2015, they started a [series of blog posts entitled _ES6 in Depth_](https://hacks.mozilla.org/category/es6-in-depth/).

It's basically a list of articles, one for each JS feature coming on ES6: let and const, classes, for-of and iterators, modules, etc., with a decent dive into the details. It's a great way to learn post-2015 modern JavaScript.

## Challenge Time!

The challenge is simple: **read one ES6 in Depth article every two days.** You'll read the article and spend two days understanding and using it, incorporating it into your toolbelt, and making yourself familiar with it. Then, on the third day, read the next article and start over again - until you read them all.

It's a series of 17 blog posts - being 15 about features, an introduction, and a final post. Spend two days on each feature article and you'll finish it in one month. After that, you'll know and have experienced much of today's JS, definitely leveling up your career as a developer.

### Rules

In order to make the best out of this experience, you'll follow the rules below:

**\#1 Don't rush**

The challenge is about absorbing knowledge and some experience. It takes time, often way more than two days. So don't rush. Becoming a better developer takes time, so give yourself time to think about how these features can help you to write better code.

**\#2 Don't give up**

If you miss a day or two for some important reason, don't give up. Reorganize your daily routine and move on. Start the cycle again the next day and keep going until you read all articles.

Don't be sorry if you're falling behind, don't get distracted, don't give a chance to bad feelings.

Accomplishing things is hard, so if you fall on this road, you get up and keep going. Once you finish all the articles you'll feel great for accomplishing it, and better: you'll profit from this knowledge for the rest of your career.

**\# Keep a log**

Write down the things that you're learning somewhere. It can be a note-taking app, a blog, email drafts, whatever. Writing will help you digest knowledge much better than just reading, so write down what you've learned, along with examples, ideas, notes, snippets, etc.

These writings might become your own blog posts in the future. :-)

🙂

Do you think that challenges like this one can inspire and motivate you to learn something? Let me know how useful it is for you in the discussions below!

I'm always on Twitter as [@holyshtjoe](https://twitter.com/holyshtjoe). If you want to discuss programming, you know how to find me. 😉
Beginner Projects For Angular In 2020
Tags: angular, beginners, webdev
Published: 2020-09-21 10:54:20

Angular, filled with a variety of advanced features and modules, help programmers to simplify the process of developing software platforms while enhancing the quality. This technology also allows them to maintain functionality across various platforms including smartphones, tablets, and laptops. Angular enables the developers to build high performance and robust web applications that can manage heavy loads. The tool was initially released in 2013 and is managed by the Angular Development team at Google.

Read on to learn about some of the popular beginner projects for Angular in 2020:

<ol> 
<li><b>URL Shortener-</b> Polr is a web application that is open source, written in PHP, and fuelled by Lumen. It requires MySQL as the primary database and offers a comprehensive interface for the management of your links. To shorten URLs, brand them, and have an overall contemporary look, you can host this on your domain. To familiarise yourself with the method, you can download and go through the Polr repository. </li>

<li> <b>Storybook- </b> This is an open-source tool that is deliberately developed to separate Angular, React, and Vue components from the UI build. Storybook is interesting in that it can operate separately from an application, enabling independent creation of UI components. It provides an easy-to-use API that can be configured in moments and expanded to suit your diverse needs too. It includes various component design add-on functions, documentation, testing, etc. </li>

<li> <b>Basic Messaging Platform-</b> A standard messaging app consists of three major concepts: Text, Thread, and User. These models carry personal chat messages, metadata for a set of messages, and individual user information, respectively. To manage each of the tasks, you will have access to specific services. To achieve this objective, you an apply Angular CLI, RxJS, writing injectable services using Angular 2, and much more. </li>

<li><b>Notepad Application-</b> A notepad application is a perfect example of beginner angular projects, where you can use the Node Package Manager to develop it with NodeJs, Angular CLI, and bootstrap. It is like a digital diary, where notes can be made and saved. You can enter text into the app and display it when returning to the browser, editing, or removing the records if necessary. The notes are arranged according to the dates. </li>
</ol>

Please check the Article For a Better Overview 

https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-Angular-7-by-Example

https://codersera.com/blog/best-angular-projects-for-beginners/
Git Commands Introduction
Tags: git, github, beginners, bash
Published: 2020-09-21 10:49:43

Git is a very powerful, free, open-source and popular version control used worldwide by millions of developers and large companies. It has been and is used to version millions of software to avoid conflicts and make the work of developers really easy.  

This is a Git Commands Handbook, more like a cheatsheet to the various commands for easy reference.

## Create a Repo
```bash
# Creates a local repo
git init [name] 

# Clones a remote repo
git clone [remote_project_url] 
```

## Add a file or directory to the staging area
```bash
# Stage a changed file
git add [file_or_directory]

# Stage all changed files
git add .

# Stage some changes but not all changes
git add --patch [file_name]
```

## Commit to a local repo
```bash
git commit
git commit -m "[commit_message]"
```

## Status of Working Directory
```bash
# Status of the local repository
git status 

# Changes to the file name
git diff [file_name] 
```

## Branches
```bash
# Create a new branch
git branch [new_branch_name]

# List all branches 
git branch  
git branch -a
git branch --list

# Switch to branch
git checkout [branch_name] 
git switch [branch_name]

# Creates a new branch and switch to the branch  
git switch -c [new_branch_name]
git checkout -b [new_branch_name] 

# Merges a branch with another
git merge [branch_name]

# Delete a branch 
git branch -d [branch_name] 

# Branch newFeature has all the commits of branch main
git rebase main newFeature 
```

## Working with Remotes Repositories
```bash
# Clones a remote repo
git clone [remote_project_url] 

# List all remotes repositories to the local repo
git remote -v

# Add a remote repository with local repository 
git remote add [remote_project_url] 

# Fetches changes from the remote repository
git fetch [remote_project_url] 

# Fetches changes from the remote repository and merge it to local
git pull 
git pull origin [main_branch_name] 

# Publish local changes to remote repository
git push 
```

## Configuration
```bash
# List configuration options
git config --list 

# Set your username
git config --global user.name "Ephraim Atta-Duncan"

# Set your email
git config --global user.email 0x10@gmail.com

# Set your global branch names
git config --global init.defaultBranch [new_default_branch_name]
```

## Resetting
```bash
# Revert the changes to exactly what you had
# Go back to HEAD
git reset --hard HEAD

# Go back the commit before head
git reset --head HEAD^

# Go back to two commits before head
git reset --head HEAD~2 

# Revert changes to commits only
# Go back to HEAD
git reset --soft HEAD

# Go back the commit before head
git reset --soft HEAD^

# Go back to two commits before head
git reset --soft HEAD~2 
```
Hacktoberfest 2020 participation
Tags: hacktoberfest, python, beginners, html
Published: 2020-09-21 10:42:38

#### My first Coding Event
Since I've started programming again, I want to contribute something beyond my small projects.

I know a few projects besides the Hacktoberfest, but I find getting started, especially as a beginner, quite difficult and sometimes complicated.

Then I heard about the Hacktoberfest. However, I don't feel safe enough myself and the month was almost over so that it was no longer worth participating.

#### Why i participate
However, this year I have decided to contribute something and take part. The Hacktoberfest in particular appeals to me very much. Getting started is very easy and a lot of help is available.

As an open source user and lover, the Hacktoberfest appeals to me very much. The Hacktoberfest strengthens open source software and by participating, you become part of the open source movement.

I hope that I can contribute a small part to some open source projects. And I hope to get hold of one of the coveted t-shirts.
What are the best free tools you use?
Tags: webdev, discuss, productivity
Published: 2020-09-21 10:41:54

---
title: What are the best free tools you use?
published: true
description: 
tags: webdev, discuss, productivity
cover_image: https://miro.medium.com/max/3600/1*UFvB4J8ke8EaYrImwXui1w.jpeg
---

A while ago I create a topic on what [paid services do you use](https://dev.to/madza/what-paid-services-do-you-use-1fa5), now let's discuss your favorite free tools/services!

To start off, some of my favs include Linux, Chrome, VS Code, GIMP, InkScape, Figma, Libra Office, Postman, Bitwarden, ShareX and  others.
.format in Python ⚙
Tags: python, codenewbie, tutorial
Published: 2020-09-21 10:38:46

In this post, let's take a quick look at the `format()` method in Python.

## What is `.format()`?

`.format()` is a special function in Python that is used with `print()` to customize the output format easily.  

### Example

Consider the below code, 

```python
a = 10
b = 20
c = 30
```
We want to print the output like below,
```python
10 + 20 - 30 = 0
```
Generally we would do something like below,

```python
print(a,"+",b,"-",c,"=",a+b-c)
```
This works fine! but it's boring and looks more complex than a Christopher Nolan film. This is not Python known for! 

## Lets do it in Python way 😎

Here comes the `format()` function.

Using `format()` the above can be achieved as below,

### Type 1

```python
print("{} + {} - {} = {}".format(a,b,c,a+b-c))
```
That's it! this looks much better than the original implementation.

### Type 2

We can also specify the index position for the format method if you want,

```python
print("{0} + {1} - {2} = {3}".format(a,b,c,a+b-c))
```
The first argument in the `format()` will replace the `{0}` and the second argument in `format()` will replace `{1}` and so on.

### Type 3

We can also use keywords instead of index.
```python
print("{0} + {1} - {2} = {res}".format(a,b,c, res = a+b-c))
```
Here, the `res` will be replaced by its definition.

That's it devs. Follow for more awesome tutorials ❤
Front_END Web developer Roadmap
Tags: node, career, webdev, javascript
Published: 2020-09-21 10:37:13

*Complete Front end web development roadmap*





##### HTML
1. learn the basics
2. Forms and validations
3. Accessibility
4. SEO
5. Convention and best Practices

##### Web Components
- HTML elements
- Custom elements
- Shadow DOM

##### CSS
- Learn the basics
- Responsive Design
- Making layouts
  * Floats
  * Positioning
  * Display Box
  * Model CSS
  * Grid
  * FlexBox

##### CSS Architecture
- BEM
- OOCS
- SMACSS

##### CSS Preprocessor
- Sass
- Postcss
- Less

##### CSS FrameWorks
- CSS first Frameworks
  * Bootstrap
  * Materialise CSS
  * Bulma
 - JS Based Framework
   * Reactstrap
   * Material Ui
   * Tailwind CSS
   * Chakra UI
  
##### Modern CSS
- Styled Component
- CSS MOdules
- Styled JSX
- Emotion
- Radium
- Glamorous

##### Javascript
- Syntax and Basic Construct
- Learn DOM manipulation
- Learn Fetch API/ Ajax
- ES6+ 
- Modular javascript
- Understand below Concepts
   * Closures
   * Scope
   * Async await
   * Prototype
   * Event Bubbling
   * Shadow DOM
   * Hoisting
   * Strict ...etc
   *....And many more 
   
#### JS Framework
- React js
  * MobX
  * ReduX
- Vue js
  * VueX
- Angular 
   * RxJS
   * NgR
 
##### Type checkers
- Typescript
- Flow


##### Progressive Web Apps(PWA)
- Storage
- web Sockets
- Service Workers
- Location
- Notification
- Device Orientation
- Payments
- Credentials
- Accelerated Mobile pages (AMP)


##### Perfomance
- PRPL Pattern
- RAIL Model
- Perfomance
- Metrics
- Using LightHouse
- Using DevTools

##### Server Side Rendering (SSR)
- React js
  * Next.js
  * After.js
 - Angular
    * Universal
- Vue.js
   * Nuxt.js

##### GraphQL
- Apollo
- Relay Modern

##### Static site generators
- Next.js
- Gatsby.js
- Nuxt.js
- Vuepress
- jekyll
- Hugo

##### Mobile Applications
- ReactNative
- NativeScript
- Flutter
- Ionic

##### Desktop Applications
- electron
- Carlo
- Proton Native

##### Pacakage Managers
- npm
- Yarn

##### Test your apps
- Jest
- React-testing-library
- cypress
- enzyme

##### Build Tools
- Linters and formatters
    * Prettier
    * ESLint
    * StandardJS

##### Module Bundlers
- Webpack
- Rollup
- Parcel

##### web security Knowledge
- Owasp top 10
- CORS
- HTTP
- CSP(Content Security policy)

Note:- You don't need to learn all the above things..
Pick some of them and `master` them

------

_Some useful websites for resources_
- [Webskills](https://andreasbm.github.io/web-skills/)
- [WebDev](https://web.dev/)
- [Frontendfront](http://frontendfront.com/)
Let's Go - Book Review
Tags: webdev, books, go
Published: 2020-09-21 10:33:03

After getting my feet weth with [Test Driven Development](https://dev.to/cpustejovsky/learn-go-with-tests-book-review-na4) in Go, I decided to go through [Let's Go](https://lets-go.alexedwards.net/) by [Alex Edwards](https://twitter.com/ajmedwards). My next step is to re-write my web app's backend with Go, so this was the next logical step for me.

Alex shows you how to build a web application from start to finish. He walks the reader step-by-step through:
* Setting up a server
* RESTful Routing
* Middleware
* Database Connection
* Templating
* Testing (Unit, E2E, Integration)

He shows you from the very beginning how to do all this in a way that will keep your web app scalable, composable, etc. I really appreciated this since too many tutorials show you the simple way first and only later add in the clean up and refactoring. I find this way is better for setting up good habits.

While sprinkling advice and best practices throughout the book, He shows the reader exactly which files to create where, and where to put each bit of code for the web app. This is great for making sure you never get lost while following along.

Because all his code samples have in-depth comments explaining what each thing does, even if you mindlessly copied and pasted everything, you'd still end up with a great web app to go back and reference.

![Code Sample](https://dev-to-uploads.s3.amazonaws.com/i/xzkb3yr4yh349x5cpj92.png)
<figcaption>This is what I'm talking about. Each new piece of code or update includes comments like this.</figcaption>

If you're on the fence, check out his blogs like [this one on interfaces](https://www.alexedwards.net/blog/interfaces-explained) to see if you'll like his teaching style.

But I highly recommend buying and reading this book if you're interested in web development with Golang. It is absolutely worth the price. [Check it out](https://lets-go.alexedwards.net/#packages)!
vagrant cannot create a custom named network for virtualbox
Tags: vagrant, virtualbox
Published: 2020-09-21 10:31:10

``` 
master.vm.network "private_network", ip: "10.0.1.20", name: "k8s"
```

> The specified host network could not be found: 'k8s.'
If the name specification is removed, Vagrant will create a new
host only network for you. Alternatively, please create the
specified network manually.

I tried to create the network manually using virtualbox gui, found out that I cannot using a custom name