teleren/devto huggingface dataset:
Quick links sticky footer
Tags: html, css
Published: 2020-09-02 04:22:44

##Introduction
Building sticky footer using bootstrap to serve as quick links on your webpage.

Nowadays, we see numerous apps with quick links feature in footer. So whenever we create any responsive website we think of providing various quick links in mobile view at the bottom in the form of sticky footer.

Then we think of.... 
####how many links should I provide?
####should I provide a more icon?
####how many links should I place in more option?

So, I decided to build a sticky footer with a more option and providing additional links in the more section of footer with some animation.
In my case I have placed a center icon which drives the animation.

what I used?
Bootstrap 4.5.0
Some jQuery
Font awesome 4.7.0

You can find the implementation here: https://codepen.io/miteshkamat27/pen/NWNPWjv
Hope it helps.

Cheers !!!
Redux in less than five minutes
Tags: redux, react, webdev
Published: 2020-09-02 04:01:41

Heelllooo there. Now if you were anything like me, you probably found learning Redux quite a cumbersome task. The purpose of this article is to simplify the concepts and bring you to a high level understanding of Redux and how it works. 

###Store
Redux in a nutshell is a state management library. One of the core parts of Redux is what is called the `store` which you could think of as a cloud that sits on top of your application and holds the current state of your app at a given point in time. 

So, a few things you need to know about the store : 
1. It is the single source of truth, meaning all your UI elements fetch state and any updates to application state from the store and only from the store
2. The store is not directly mutated because the store in its nature is an immutable object. 


So how then do we actually update the state? I am glad you asked. Because the store is an immutable object, we write a function called a reducer, that takes the store as an argument and returns an updated store with the updated state. 

###Reducer 
Another core piece of Redux is what is called the `reducer`. All the reducer really is, is a function that takes the current instance of the store and returns an updated store. The reducer does not touch global state at all, mutate any arguments or have any side effects. 

###Action
The last major piece in this puzzle is called the `action`. The action is just a plain JavaScript object that describes what just happened. The action represents what just happened and can really represent any action a user might perform on your application e.g. adding an item to cart, deleting a record, updating their name on their profile etc. The action informs the reducer on what needs to be changed. Based on the type of action, the reducer then knows what properties of the state must be updated. 

###How does it all work under the hood?
1. Whenever an action is performed by the user, an action object is created and dispatched. This is done through the dispatch method which takes in an action as an argument
2. The store will forward the action to the reducer
(Note that the store is in charge of calling the reducer)
3. The reducer will then receive the action, compute a new state based on the action type and will then return the new state to the store 
4. The store will then set the state internally and notify all the UI components about the update
5. The UI components will then pull the updated state from the store and refresh themselves accordingly. 

This is a VERY, VERY high-level explanation of Redux. Under the hood, it is a bit more complex but it is important to understand the basics because it will inform your understanding of the deeper operations and complexities of the library. I hope this helped! Please share if you think this might help someone else! 

Till next time 😃
Coaching a manager who lacks time management and ability to prioritize tasks
Tags: productivity, management, leadership
Published: 2020-09-02 03:55:36

I use a three-step approach when coaching a manager who’s struggling with time management.
 
1. Zero in on the problem. I go through that manager’s task list and let him/her explain to me how he/she performs each task and the amount of time it takes. This usually brings to light issues or challenges that a manager might have with time management. For instance, there might be too much on a manager’s plate so he/she is unable to meet deadlines, or no tools were provided so that a task can still be done properly, but a lot faster.
 
2. Brainstorm a solution. Once we’ve identified the problem areas, the next step is to come with specific solutions to address the problem. I work with the manager to come up with a comprehensive action plan. We also agree on a time each month (of an entire quarter) to see what progress has been done.
 
3. Do monthly check-ins. I meet with the manager each month for at least three months to go over his/her action plan. 
 
Bottom line: Supporting a manager struggling with time management can be done through a one-on-one meeting that involves identifying the problem and then providing guidance on how to come up with solutions that work.

Read more on [time management](https://www.dotcomdollar.com/time-management-strategies/) tips here:
How To be An Effective Leader During Turbulent Times
Tags: leadership, management
Published: 2020-09-02 03:54:03

In a time where uncertainty is prevalent, consistency is the key.

Times are unpredictable right now. People are losing work left and right, companies are closing down. During these times, your employees are worried at how stable their job is. As a leader, you can motivate your team by being a source of stability in a time of uncertainty.
 
There are plenty of ways to show your employees that you are a stable leader and that their jobs are secured:
 
Instead of creating plenty of new projects, slow down and delegate tasks on maintaining what you currently have.
Be communicative. Show your initiative by reaching out to your team instead of waiting for them to come to you instead.
Let them know that you are willing to work things out and communicate with them whether it be suggestions, complaints or the need to discuss some personal issues that might be affecting work performance.
Provide incentives where you can to make your employees/team members feel recognized and valued.
 
Bottom line: Being energetic and positive, expressing your excitement while providing tasks or improving guidelines goes a long way in making your employees feel more optimistic about the current state of society.

Read more on [leadership qualities](https://www.dotcomdollar.com/leadership-qualities/)  here.
Best tips for project management
Tags: management, productivity
Published: 2020-09-02 03:52:01

I own multiple blogging sites. I run a small operation so I also manage the various projects we undertake. 

My best tip for getting projects back on track is to recognize warning signs and act fast. Project snags don’t magically resolve themselves. The earlier you face these problems in the project’s lifecycle, the more options you have to resolve them.

I learned this the hard way during the launch of one of our blog sites. I knew there were tensions building up between two project members over some of the work. However, I foolishly thought that they’d work it out. Instead, they ended up in a big fight and quit just days before launch day. Both had key roles in the project and there was no time to replace them so launch day was ultimately a failure.

Now, I always do a morale check on my employees. I also encourage my team to forecast their remaining work, factoring in any project plan changes so that potential slippages are identified as soon as possible. 

Hope this was useful. Thanks for the opportunity.
Small Business Management Software That You Can't Live Without
Published: 2020-09-02 03:46:55

15% Annual Sales Growth With This Tool

Salesforce, our CRM software of choice, has helped us manage our business more efficiently and gets us more customers. Since using this CRM, we’ve seen annual sales growth of 15% year-over-year.
 
Salesforce is an all-in-one, cloud-based solution with a robust set of tools and resources. I like that it allows me to manage a number of key areas in our business using a single piece of software. I can track employee activity, monitor sales, and reply to customer queries with just a few clicks of the mouse. It’s also a great platform for managing existing customers and finding new ones. It can be accessed anywhere as everything’s on the cloud. No software installation required.
 
Bottom line: Salesforce gives my small business the power and functionality of an enterprise-level CRM in a package that can be gradually scaled and upgraded over time.
Day 93 : #100DaysofCode - Learning About Rails Backend
Published: 2020-09-02 03:41:43

Today was a hard day, I found out some heartbreaking stuff and I am really saddened by it, but they say he gives his toughest tasks to his strongest soldiers. I have to keep going.

I struggled with coding and felt overwhelmed by Javascript today, but luckily I have amazing friends who reminded me that I can do anything. So, I still attempted to create an app with a ruby on rails backend while watching a code along.

Below is the repo, I wrote the steps I took in the README.md. 

{% github SincerelyBrittany/notes-ruby-js-backend %}

I did not get to finish the code along but I did learn a lot. Feel free to use the step by step guide I provided in the readme. 

Thanks for reading!

Sincerely, 
Brittany
Work From Home: Home Office Security Tips
Tags: security, career
Published: 2020-09-02 03:36:17

The biggest online security threat we’ve found was information being weaponized. A recent example would be the bogus World Health Organization app created by a group of hackers. Once installed, the application downloads the Cerberus banking trojan to steal sensitive data. The attacks essentially weaponize tools and information, because they can easily be done with applications that provide legitimate benefits, too.

To protect company assets from threats like this, we have a cloud infrastructure that employees can tunnel in through a VPN with encryption. We also use a password manager so login details to different systems aren’t just pasted on some random Google doc. 

I have separate devices for personal and work use and will find a way to help employees do the same if they wanted to. Regardless of whether they have separate computers or not, we all follow strict protocols when it comes to handling and sharing company data, physical safety measures while working at home, etc.

I’d strongly advise companies who’ve transitioned to working remotely to review areas in their operations where they could be vulnerable to cyberattacks and create a plan of action to prevent this from happening.

Hope this was useful.

For more information, you can visit https://www.dotcomdollar.com
YouTube Video | YDKJS — Scopes and Closures — 2
Tags: javascript, showdev, webdev, youtube
Published: 2020-09-02 03:36:13

Welcome to the YDKJS series. Every Javascript developer knows one thing that they don’t know enough Javascript. On the top level, it’s only var, for , if else just like any other Programming language, but if you want to dive deep and know how JS work. There is no better place then the legendary book series [You don’t know JS](https://maximdenisov.gitbooks.io/you-don-t-know-js/content/) by **Kyle Simpson**

This is the second part of the series

{% youtube 11fvQ2EV4RI %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | YDKJS — Scopes and Closures — 1
Tags: javascript, webdev, showdev, youtube
Published: 2020-09-02 03:34:29

Welcome to the YDKJS series. Every Javascript developer knows one thing that they don’t know enough Javascript. On the top level, it’s only var, for , if else just like any other Programming language, but if you want to dive deep and know how JS work. There is no better place then the legendary book series [You don’t know JS](https://maximdenisov.gitbooks.io/you-don-t-know-js/content/) by **Kyle Simpson**

This is the first part of the series

{% youtube i38TChxaayE %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
As a beginner, what was your first job? Also, how long untill you felt stable in a web design position? 
Tags: python, django, career, life
Published: 2020-09-02 03:24:41

Between JavaScript Frameworks and Python/Django. 

What was your first job? Using those? 

How long untill you felt stable? Even being a “beginner”, did you think you were stable in your spot?
React TS - Webpack - Starter kit
Tags: react, typescript, webpack, beginners
Published: 2020-09-02 03:04:09

## A quick and easy template for React TS with Webpack.

[Link to Repository](https://github.com/SoorajSNBlaze333/react-webpack-ts-starter)
Please star the repo if you find it useful :)

## Setting up and Installation
1. If you want to use this template, just click on the `Use this template` and continue the steps.
2. Or you can clone the repo manually using,
```
git clone https://github.com/SoorajSNBlaze333/react-webpack-ts-starter
cd react-webpack-ts-starter
npm i
npm start
```
Perfect Documentation
Tags: documentation, development, vue
Published: 2020-09-02 02:58:00

So you have taken the bait. Documentation really is the hottest topic in tech right now 😼.

This post is inspired by the podcast [Enjoy the Vue](https://enjoythevue.io/) where they discussed in detail the documentation process. Check out [episode 30(https://enjoythevue.io/episodes/30) for all the gory details! Thanks [Natalia](https://twitter.com/n_tepluhina) and [Sam](https://www.instagram.com/mxsambrandt/) and the rest of the team at Enjoy the Vue! Now lets dig in to this very high level process 😜.

# The Process
![Documentation Process](https://dev-to-uploads.s3.amazonaws.com/i/xkcl5qp3vksbj5t80tfa.jpg)


## Crap Documentation (docs)
You have to start somewhere.. and documentation will always be less than ideal to begin with. There are no shortcuts too good documentation either. Don't expect your first draft to be close to good. Just do it. 

## Review
After you have completed your personal review, you need the documentation to be reviewed by others. This will include SME's (subject matter experts) and people who represent the intended audience. If you don't have people available to review it, publish it. You can then incorporate feedback from readers feedback.

## Good Documentation
After many reviews, and feedback from readers, documentation can get to a good state. Be careful though, this will not last. As time passes, documentation can quickly become outdated, and will become crap documentation again in no time. 

## Perfect Documentation
While its an honorable goal, no documentation will ever be perfect. Maintaining good documentation is a lot of work in itself. But the benefits of maintaining good documentation are huge. 

I think much of the success of VueJS today has to do with its great documentation. Yes, its great, and that is because there are so many contributors. Over 700 people have contributed to the Vue docs. 

I think documentation can help in many ways. I also like to document stuff before I start developing in some cases too. It helps me to frame my thoughts, and keeps me focused if I get stuck on a technical issue that takes me down a rabbit 🐰 hole.

And, this document is in the "crap" phase itself. I would love for you to review it, and provide feedback below. Perhaps together we can make this process "good".
Workona Saved My Workspace
Tags: productivity, management, discuss
Published: 2020-09-02 02:52:40

I started using Workona recently to organize my tabs. If you're like me, you probably have multiple browsers open per project, each with over 10 tabs.

I didn't like having multiple browsers open across my screens or minimized in the Dock. With Workona, there's no more having to organize links in bookmarks or saving them in a document you're going to lose track of.

With Workona, I now only have 1-2 browsers open at a time, organized by workspace/project. I can easily switch between projects without losing any tabs or adding more browsers.

Does anyone use Workona? Or have any other tech productivity tools they really like and use often?
resizing and optimizing images in terminal
Tags: graphics, design, tutorial, images
Published: 2020-09-02 02:51:00

_Disclaimer: This tutorial assumes you're using Mac and Homebrew, do some google-fu for your particular situation._

Batch resizing pngs and optimizing quickly in Terminal for anyone else who may want a lil trick to save time!

Download <a href='https://pngmini.com/' alt='links to ImageAlpha&#8217;s website' target='_blank'>ImageAlpha</a> and <a href='https://imageoptim.com/mac' alt='links to ImageOptim&#8217;s website' target='_blank'>ImageOptim</a> and move them to your applications folder.

In terminal, type:

`brew update`

`brew install imageoptim-cli`

Then navigate to a directory holding all of the pngs you want to optimize, and type:

`imageoptim --imagealpha '**/*.png'`

This also works with a program called JPEGmini for optimizing jpg’s but I haven’t tried that out yet.

Now batch resizing! Navigate to the directory holding images you wish to resize. Let's say this time there are both pngs and jpgs in this directory and you want to resize them all to have a width of 640px and maintain their aspect ratio. Type:

`sips -Z 640 *.png *.jpg`

Badabing, badabang! This is how that line breaks down. `sips` is the program you’re running, `-Z` tells it to maintain the aspect ratio, `640` is the width you want to resize all the images as in pixels, and then the next part is you identifying which image types you are resizing, in this case both `*.png *.jpg` filetypes will be affected. If only png, all you’d need to have here is `*.png`.

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/kvvpa)
Short Video example in 20 Seconds. Get a Github directory quickly by a simple command without installation.
Tags: github, npx, npm
Published: 2020-09-02 02:31:54

{% youtube sO8h5Zn_kug %}

# Usage

```sh
npx generate-github-directory <URL> [directory]

# e.g.
npx generate-github-directory https://github.com/rocket-hangar/rocket-scripts-templates/tree/master/templates/web my-project
```

# See more...

<https://www.npmjs.com/package/generate-github-directory>

---

<span>Covered Photo by <a href="https://unsplash.com/@chris_s3tudios?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Chris Stein</a> on <a href="https://unsplash.com/s/photos/pattern?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Fix slow compile time in Unreal engine
Published: 2020-09-02 02:29:46

Unreal engine version: 4.22

1. In your code editor go to the file Explorer tab and navigate to
```
/UE_4.22/Engine/Binaries/<depending on your system name may be different>Win64/UnrealHeaderTool.target
```

2. Open UnrealHeaderTool.target
3. Add a white space somewhere so you can save the file as if a change took place.
4. Compile in Unreal Engine. 
*The first compile after this fix may take awhile but subsequent compiles should be much shorter.
I released VN.CSS
Published: 2020-09-02 02:20:37

It is Vietnam Nation Day today. I want to celebrate it with a css library. I was inspired by [Bennett Feely](https://bennettfeely.com/) and [Lynn Fisher](https://twitter.com/lynnandtonic). So I created patterns with css gradient. I used 2 colors on Vietnam's flag red and yellow. Check it out at [vncss.vercel.app](https://vncss.vercel.app/)
WSL2 Time Sync
Tags: windows, wsl
Published: 2020-09-02 02:12:52

The simplest way I've found to keep your WSL2 clock in sync with your host clock.

Start WSL and add the following line to your ~/.bashrc file

```shell

# fix wsl time sync
sudo ntpdate ntp.ubuntu.com &>/dev/null &

```
This will sync your clock to the ubuntu ntp server (any ntp server will work)

> the `&` on the end causes the command to run in the background so that your startup isn't delayed
interactively build a docker image
Tags: docker, beginners, devops
Published: 2020-09-02 01:56:31


Let's take a close look at how to interactively build a docker image from base ubuntu image. We will use docker commands to create our custom image.

* Interactively launch BASH shell under Ubuntu Base image, Update apt-get, install figlet and its dependencies using apt-get, and then save the image.

e.g. 

Figlet software + Ubuntu base image -> New Image named figlet


### Prerequisites:
Ensure the Docker engine is installed on your machine

Fetch the base image and connect to the container.

```
docker run -it ubuntu
```

Next, Update apt-get update and its dependencies (with in the docker container)

```
apt-get update
```

Install figlet software and its dependencies.

```
apt-get install figlet
```

Verify if the software is installed correctly on the container.

```
figlet DEV.TO
```

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

If your output matches the above image, exit the container (Ensure you copy the container id)

Now run docker commit command with the container id saved in the previous step.


```
// Works even if you mention initial chars of container id
docker commit cbe1bc 
```

Now look at all the images

```
docker images

undefined              undefined              cbe1bc519023        39 hours ago        98MB
ubuntu              latest              4e2eef94cd6b        13 days ago         73.9MB

```

Rename the image created with a readable name

```
docker tag cbe1bc519023 figlet
```

Now look at all the images again

```
docker images

figlet              latest              cbe1bc519023        39 hours ago        98MB
ubuntu              latest              4e2eef94cd6b        13 days ago         73.9MB

```

That is all :) Our custom image is ready to be pushed to docker hub and used by the community. 

Note: Didn't cover the docker push and pull commands for the custom image created. That's for another day :)

...
Why give Puppertino a chance? Why do I have faith in Puppertino?
Published: 2020-09-02 01:54:43

Puppertino seems to implement in our websites a UI based on Apple styles (MacOS, iOS, etc.).

Although today we have Ionic or Onsen UI, which in its latest versions, allows us to develop web applications with a UI oriented to Apple styles. Puppertino differs in that we can use it with any other CSS framework, that is, without interfering with the styles of the framework we are using, whatever it is.

Puppertino can come to stay, let's remember that in previous years two CSS Frameworks appeared with the same premise, one was Materialize based on Material Design and the other is Metro 4, which is based on Microsoft's UI.

This means that for the future we can find many more libraries or frameworks, with UI based on operating systems or designs made by big companies like Google, Apple, Microsoft, etc.

Its creator, called Edgar Perez, told me that the Framework was developed to be able to use it in conjunction with other Frameworks and UI Libraries. 

I leave the repository of his GitHub, so that I can collaborate with him, in the development of this great tool for UI based on Apple.

Edgar's GitHub || https://github.com/codedgar/Puppertino