teleren/devto huggingface dataset:
Reducing heroku build time
Tags: heroku, build, deployments
Published: 2020-06-25 18:25:19

---
title: Reducing heroku build time
published: true
description: Reducing heroku build time in nodejs project
tags: heroku, build, deployments
---

If you have been facing issues with larger build time on heroku, probably your slug size is getting out of hand.

Here are some of ways you can reduce your slug size which can reduce build time

## .slugignore

This is just like `.gitignore` we use for ignoring files in git. Add all the folders, files which are not necessary for your app to use such as 
- design files (.psd)
- .pdf files
- test data

Add this `.slugignore` to root of the repository

```
.pdf
.psd
```

## cache node_modules

On heroku, set `NODE_MODULES_CACHE=true` and in your `package.json` add `node_modules` in your `cacheDirectories`

package.json

```
“devDependencies”: {...}“
”cacheDirectories”: [“node_modules”]
```

## Move static assets to S3 or any storage provider

You should move all static files - image, video, pdf etc to S3 or any storage provider so that it doesn’t compile with your app.


## Remove unused dependencies

Check for unused dependencies in your node project and remove it as it increases the installation time

You can use the below command to check for un-used dependencies and remove it manually

```
npx depcheck
```

## Git repo clean up

Install the [Heroku Repo plugin](https://github.com/heroku/heroku-repo)

`heroku plugins:install heroku-repo`

Then run:

````
heroku repo:gc --app your-app-name
heroku repo:purge_cache --app your-app-name
```

These commands will execute `git gc --agressive (git-clean)` and delete the contents of the Heroku build cache stored in your application’s Git repository.


Hope this helps!

Feel free to comment if you have any more suggestions :metal:
How to build a simple CD pipeline for your nodejs project 
Tags: git, devops, node, tutorial
Published: 2020-06-25 18:13:44


# What we need?

 - [Gitlab account](https://gitlab.com/)
 - [SSH](https://www.ssh.com/)
 - [PM2](https://pm2.keymetrics.io/)
 - VPS
 - Git
 - [Nodejs](https://nodejs.org/en/)

# Whats is CD?

**Continuous deployment** is the process of automatically deploying an application, the goal of this practice is to minimize the time pushing a new line of code and using it live on production.

# Setting up Pipeline

## Gitlab runner:
As we gonna use Gitlab to setup our pipeline we need a runner.

- **Runner** is an environment to run your jobs and run tests, deploy your code.


  In this case, either you use a shared Runner or you step up one yourself we gonna use a shared one but if you wanna set up it check the documentation here : [Gitlab Runner](https://docs.gitlab.com/runner/).
  

## Gitlab-CI File :

 Create **.gitlab-ci.yml** file on the root of your project.
 So what we gonna write there we gonna follow these steps : 
 
 1. Updating Linux package manager 
 2. Installing Git
 3. Setting up SSH key
 4. Connect to our server using ssh
 5. Pull our project from git
 6. Install dependencies
 7. Build it
 8. Restart server using pm2

  
```bash
  before_script:
 - apt-get update -qq
 - apt-get install -qq git
 # Setup SSH deploy keys
 - 'which  ssh-agent  ||  (  apt-get  install  -qq  openssh-client  )'
 - eval $(ssh-agent -s)
 - ssh-add <(echo "$SSH_PRIVATE_KEY")
 - mkdir -p ~/.ssh
 - '[[  -f  /.dockerenv  ]]  &&  echo  -e  "Host  *\n\tStrictHostKeyChecking  no\n\n"  >  ~/.ssh/config'
  
deploy_staging:
 tags:
 - docker
 type: deploy
 environment:
 name: testing
 url: "$VPS_IP"
 script:
 - ssh root@"$VPS_IP" "cd /root/app/allomakkah && git fetch origin master && git reset --hard FETCH_HEAD && git clean -df && npm i && npm run prod-build"
 - ssh root@"$VPS_IP" "pm2 restart hiddy"
 only:
 - master
```

Now let's deploy our application it will automatically run this pipeline whenever we push to the master branch because of that ligne :
```bash
only:
- master
```
![Pipeline](https://media-exp1.licdn.com/dms/image/C4E22AQGeZFVl1C9QXQ/feedshare-shrink_2048_1536/0?e=1596067200&v=beta&t=wb0F-oBWMywDnruymWVfhnRo9qbDjRs038BkgmJHDqw)
![Pipeline](https://media-exp1.licdn.com/dms/image/C4E22AQG6mCoTlYEOLA/feedshare-shrink_2048_1536/0?e=1596067200&v=beta&t=6xTaGJu-M9Gik8oMlCO62HpXeDSusyOBLwy8fZuCKH0)
A Week At A Time - Building SaaS #46
Tags: python, django, saas, views
Published: 2020-06-25 18:06:51

{% youtube DMe7CeAxWwc %}

In this episode, we worked on a weekly view for the Django app.  We made navigation that would let users click from one week to the next, then fixed up the view to pull time from that particular week.

The first thing that I did was focus on the UI required to navigate to a new weekly view in the app.  We mocked out the UI and talked briefly about the flexbox layout that is available to modern browsers.

From the UI mock up, I changed the view code to include a `previous_week_date` and `next_week_date` in the view context so we could change the links to show real dates.

From there, we needed a destination URL.  I create a new `path` in the URLconf that connected the weekly URL to the existing app view that shows the week data.

After wiring things together, I was able to extract the week date from the URL and make the view pull from the specified day and show that in the UI.

Finally, we chatted about the tricky offset calculation that needs to happen to pull the right course tasks, but I ended the stream at that stage because the logic changes for that problem are tedious and very specific to my particular app.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/building-saas/week-at-a-time/).
8 awesome methods to clean your code with RamdaJS (Part 1)
Tags: javascript, ramda, functional
Published: 2020-06-25 18:02:47

After a post about currying in Javascript, now we'll know one of the powerful Javascript libraries that can help you to work with functional programming, RamdaJS. You will never stop using it once you know it 🙌🏻
⠀
👉🏻 Check the post: https://devinda.house/ramda-pt1

In the first part of this series, we'll talk about 4 very useful RamdaJS methods: R.assoc, R.assocPath, R.pipe, and R.propEq ✅ Stay connected to the next post 🚀
⠀
Liked this post? 💬 Comment 🤝 Share on your Instagram stories and mark us 💙 Like it and 👉🏻 Follow us to daily content of #programming, #javascript, #reactjs and more 🙏🏻⁣⁣⁣
⠀⠀⠀⠀⠀⠀⠀⠀⠀⁣⁣⁣
📨 Send us your feedback, if you want to make a partnership or have something to talk, please send us an email to talk@devindahouse.com⁣⁣⁣
Taking Advantage Over Flutter Mobile App As Web Developer
Tags: flutter, webapp, mobileapp, dart
Published: 2020-06-25 17:55:22

Being a software developer is one of the most challenging profession in the world. Technologies changes rapidly since humans want more no matter how much you give them. As a web developer you have to HTML, CSS, JavaScript and any other back-end programming language. We developers always don’t forget their HTML element attributes especially the front end developers. If you are a full stack web developer/front end developer who loves to work APIs and don’t want to worry about learning more languages to keep up with IOS and android then look into flutter.

[Flutter](https://flutter.dev/) is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Flutter uses widgets to create UI. With the use of material designs, you can create beautiful, natively UI for your applications. 
#### Flutter UI Example
![Flutter UI](https://flutter.dev/assets/homepage/news-1-325f033155f8fa7a28a9d3f2a512da9a2b1675be0f97e790d124c0e9a8d7546f.gif)
But then, flutter comes with a programming language called Dart. Dart is strict type programming language just like the C#, java, etc. So far as you understand programming concept in your preferred language, you can cope with that really fast (well  it depends on your ability learn fast).

#### Dart Code Example
![Dart Code](https://dev-to-uploads.s3.amazonaws.com/i/m37flll2vp33ftf3eioi.png)

Now look at our traditional HTML and CSS and the flutter Widgets Scripts.

#### HTML, CSS And Flutter Example
## HTML
![Html code](https://dev-to-uploads.s3.amazonaws.com/i/si9tngkrv0524i7e7153.png)

## CSS
![Css code](https://dev-to-uploads.s3.amazonaws.com/i/gif01e7u9z3w6lu5u8jf.png)

## FLUTTER
![Flutter code](https://dev-to-uploads.s3.amazonaws.com/i/4o9li75xwbd1l420pj6a.png)

### Conclusion
As you can see there are some patterns in there like the font style, font family, color, background image, rows, columns, padding,etc.
The thing is if you know how to write HTML and CSS for web UI taken advantage over flutter will be easy.
It worked for me and I believe it will work for you. The most important thing is to learning the basis of flutter. Apply the knowledge of the front end scripts to the flutter widget and the back-end for dart.
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-06-25 17:35:24

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@yechielk shared his experience working on a team of five devs at a non-software company in the [Biggest Differences Between Working for a "Tech Company" and a "Non-Tech Company"](https://dev.to/ben/what-are-the-big-differences-between-working-for-a-tech-company-and-being-a-dev-for-a-non-tech-company-2896) thread:

{% devcomment 10g4e %}

@stephanie revealed that there's a difference between software and hardware expertise in the [Misconceptions About Web Development](https://dev.to/ben/what-are-some-misconceptions-about-web-development-25m8) thread: 

{% devcomment 10jid %}

Some simple but powerful advice from @merri in the [Give one Short Piece of Advice or Wisdom to Beginning Programmers](https://dev.to/alfki/give-one-short-piece-of-advice-or-wisdom-to-beginning-programmers-5g5e) discussion:

{% devcomment 10kp9 %}

@s_aitchison made a pure CSS washing machine, which she shared in the [What are some of the coolest things you've made using *just* HTML or CSS?](https://dev.to/graciegregory/what-are-some-of-the-coolest-things-you-ve-made-using-just-html-or-css-5h53) conversation:

{% devcomment 10h67 %}

@coly010 brings up some great points about the various risks associated with being pressured to do work-related coding outside of designated working hours in [Do I need to code in my free time to be a good developer?](https://dev.to/chechenev/do-i-need-to-code-in-my-free-time-to-be-a-good-developer-10h9/comments)

{% devcomment 10j5e %}



See you next week for more great comments ✌
Translations for React using i18n hook
Tags: react, javascript, npm, hook
Published: 2020-06-25 17:23:29

### Introduction

Recently in my work, the need to include translations to a project built with React arose. I had to investigate and came to this solution, which I think someone might find helpful.

### Installation of necessary packages

For the installation of these packages, we will need to have previously installed and configured [npm](https://www.npmjs.com/get-npm).

Once we have **npm** installed we must install the following packages:

```npm install --save i18next```
```npm install --save react-i18next```
```npm install --save i18next-browser-languagedetector```

### Create a file where translations will be stored

We will create a folder called translations within src and, within the translations folder, we will create a folder for each language to which we want to add the translations.

```
./src
    ./translations
        ./es
            ./translations.js

```
We will create the translation.js file where the translations stored in this case for the Spanish language:

```js

// File: translations.js

export const TRANSLATIONS_ES = {

    "female": "Femenino"

}

```
### Create the configuration file for i18n

```
./src
    ./translations
        ./i18n.js

```

with the following content:

```js
// File: i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

// import translations file
import { TRANSLATIONS_ES } from '../translations/es/translations'

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
    resources: {
        es: {
            // use translations file for spanish resources
            translation: TRANSLATIONS_ES,
        },
    }
});
```
### Using the hook for translations in component

```js
// File: ExampleComponent.js

// import hook for translations and i18n configuration file
import { useTranslation } from "react-i18next";
import '../../translations/i18n.js';

export const ExampleComponent = () => {

	// destructuring t() function for useTranslation()
    const { t } = useTranslation();

    return (
        {// using t() function for translate}
        <p>{ t('female') }</p>
    )
}
```

Thanks for reading me. 😊

![thank you](https://media.giphy.com/media/xThtafIpo4LZgPEQuY/giphy.gif)
Amazon Honeycode announced
Published: 2020-06-25 17:20:10

https://aws.amazon.com/blogs/aws/introducing-amazon-honeycode-build-web-mobile-apps-without-writing-code/ 

If Microsoft released a Mix of MS Access and Excel these days, it would be this plattform. 

Any opinions on this ? 
To me it looks like both a blessing and a curse. I don’t have any experience with it, but I think it is another proprietary technology to learn, just like MS Access back these days. Maybe many developers of current common business apps will be obsolete because of technologies like this.
Day-9: Bash Scripting - #1 
Tags: cybersecurity, security, blogaday, bash
Published: 2020-06-25 17:17:33

**Day-9:** Started my day with completing 5 exercises out of 35 of *Unix Badge* on pentesterlab! After that did some research on Bash scripting, follow my notes below to know more!

### **Bash Scripting, Whattttt?**
- Okay so, BASH stands for *Bourne-Again SHell*. what it does is that it takes in commands from the user and performs actions using operating system services. It is basically a shell interpreter! 
- A Bash script is a plain text file which contains a series of commands.
- For example, the `ls` command lists the files and folders in a directory. Bash is the improved version of Sh (Bourne Shell).
- Bash Scripting is used for: 
    - Managing complexities and for automating recurrent tasks.
    
### **Writing the first Script!**
1. The first line should be "shebang" - (#!). Starts with hash character (#) and a bang character (!) and it declares the interpreter for the script.
    - `#!/bin/bash` - This line indicates that we are using bash interpreter!
2. **Adding Commands:** The command “echo” prints out its arguments to standard output. “$@” is the variable name for all arguments passed in.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ssaduy8uoyi45puua0qx.png)
3. **File Permissions:** First save the file in your current directory with the extension of ".sh" (The “.sh” extension is conventional for shell scripts.) and then give permission with the following command! The “chmod” command edits the permissions for a file, and “+x” indicates that we want to add the permission to execute for all users.
```
chmod +x hello.sh
```


4 .   **Executing the script:** Now you can execute the file `./hello.sh` and it will give you the following result!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gshhjbvtw2ak6toydmp3.png)

PS: You can use any file editor like nano, vim, etc. Here I used `nano hello.sh`

---

# **Resources:**

**Bash Scripting Cheatsheet:** https://devhints.io/bash
**Bash Script examples:** https://linuxhint.com/30_bash_script_examples/



# **Contact:**

Got doubts? Contact me on [Twitter](https://twitter.com/FenilShah1616). 
Feedbacks are welcomed, do comment it down below! :)
When would be the ideal time to quit your unhappy job to seek new one?
Tags: career, job, discuss, advice
Published: 2020-06-25 17:00:51

I have been working for this job for seven months as a React developer which is my first job as a full-time frontend developer, before that I was working as a research assistant for almost 4 years. There are some managerial problems, work culture is a bit toxic and it is almost normal to organize a meeting on weekends(which is weirdly kind of perceived as normal in my country unfortunately.) 
I couldn’t stand with these conditions and I don’t think that I am not expanding my knowledge. However, I am always worried about that If I quit this right now, it will look bad on my CV and people might think that I am a kind of person who gives up easily and not reliable employee.

What do you think? What would you do If you are in this situation as me?
Replacing Redux with React Contexts
Tags: react, redux, javascript
Published: 2020-06-25 16:52:23

In my current project, we used to use [Redux](https://redux.js.org/) for things like user authentication, language preferences, viewport width, and in general sharing state between components deep down the tree.

Long ago, we started replacing the shared state with [contexts](https://reactjs.org/docs/context.html), as it is easier to provide and manage state localized to just a part of the application. That way, the state does not leak upwards, that is, the login page does not have to have access to the to-do list.

A practical example, only relevant bits:

```ts
type SetLanguageAction = {
    type: 'SET_LANGUAGE'
    language: string
}

const language = (
    state: string = initialLanguage,
    action: SetLanguageAction
) => {
    if (action.type !== 'SET_LANGUAGE') {
        return state
    }

    localStorage.set('language', action.language)
    return action.language
}

// plus boilerplate to attach it to the store
```

With context, it becomes:

```ts
import React from 'react'

const Context = React.createContext({} as {
    language: string
    setLanguage: React.Dispatch<React.SetStateAction<string>>
})

const LanguageProvider: React.FC = ({ children }) => {
    const [language, setLanguage] = useLocalStorage('language', initialLanguage)
 
    return (
        <Context.Provider value={{ language, setLanguage }}>
            {children}
        </Context.Provider>
    )
}
 
const useLanguage = () => React.useContext(Context)
// and that's it!
```

See, the entire behavior is contained in a single file, and not spread across as is common with Redux (you would have `actions.ts`, `reducers.ts` to glue everything).

Additionally, you get full [React hooks](https://reactjs.org/docs/hooks-reference.html) power, as Providers are React components. As an example, I got access to `useLocalStorage` (that's from [react-use](https://github.com/streamich/react-use)) and don't need to handle local storage by hand.

It helps isolate behavior, but it also helps with stricter typing. In user authentication, if the user state was inside the global state, it's type would be `User | null`, as the user data is initialized after data is loaded from the backend.

With a localized context, it can be `User` and we never have to check for nullability or stick `!` after accessing the store, as I can suspend rendering while waiting for data to load (say `if (!user) return null`). It goes really well with [SWR](https://swr.vercel.app/) :)

Cover image by Timothy Meinberg ([see in Unsplash](https://unsplash.com/photos/AL2-t0GrSko)).
Sample blog post
Published: 2020-06-25 16:33:59

Check out this Learn module! https://docs.microsoft.com/en-us/learn/modules/principles-cloud-computing/?WT.mc_id=javascript-6386-dachauss

Check out our docs: https://docs.microsoft.com/en-us/?WT.mc_id=javascript-6386-dachauss

Check out Azure: https://azure.microsoft.com/en-us/?WT.mc_id=javascript-6386-dachauss
What are you building?
Tags: impact, webdev, productivity, change
Published: 2020-06-25 16:17:05

Where do you work? What do you do?

How many times have you been asked one of those questions? Probably a lot. I’ll bet you have a pretty standard answer you can rattle off without much thought.

You may give an arrogant answer: “I’m a managing senior customer service engineer at a multi-national fortune 500 company”.

You may be ashamed. You may give an answer that is minimalistic. “I’m just a customer service rep,” you say.

But what if you were asked, “What are you building?”

How would you answer that question? What would you say?

The answer to that question will be infinitely more interesting and self-affirming than the answer to the previous two questions.

We can find the perfect example in the commonly told story of the janitor at NASA, questioned as to what they were doing. The janitor answered, “I’m putting a man into space”. This answer is aspirational, inspirational, and shows the vision this person had.

We are undoubtedly building things that aren’t related to our place of employment if we even have one. You are probably building relationships, financial stability, and other people, both while you’re “at work” and while you’re not.

This question also creates mindfulness. It makes you aware of how each task contributes to a much much greater whole. Being mindful at work gives you the opportunity to see the value you are creating.

Answering this question will reduce negativity in our lives. No matter what you’re doing, no matter how stuck you feel, no matter how dead-end your job is, you have an answer for “what are you building?”. And if you answer that question right now, I’ll bet you’ll find that you’ll feel a lot less negative about your situation.

It also gives you the opportunity to “drill up” (a loftier version of “drilling down”) in the purpose and value of what you’re doing. The above janitor could start with “I’m mopping the floor” and then move to “I’m keeping the building clean” then progress again to “I’m providing an environment that lets others work effectively” and then finally arrive at “I’m putting a man in space”.

If you ask me what we’re building at Thinkster, I would start with “We’re creating online development courses”, which then drills up to “We’re teaching developers new skills”. That leads up again to “We’re helping developers be more productive to get more done or get a better job”, and then we finally arrive at what we’re truly building: “We’re helping people improve their lives”.

So the next time someone asks you, “Where do you work?” or “What do you do?”, don’t answer those questions directly. Instead, answer the question “What are you building?”. I’ll bet whatever it is, it’s amazing and important.

Happy Coding!

Enjoy this discussion? Sign up for our newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=whatareyoubuilding&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=whatareyoubuilding&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster