teleren/devto huggingface dataset:
3 Categories of NPM Packages
Tags: javascript, npm
Published: 2020-02-24 13:19:15

So I typed that in Google and no interesting result. By my experience, I feel I can categorize them into those used via: 
- CLI,
- API,
- as a Plugin

## CLI
Examples: [Del-cli](https://www.npmjs.com/package/del-cli), [Postcss-cli](https://www.npmjs.com/package/postcss-cli), [Webpack-cli](https://www.npmjs.com/package/webpack-cli), and any other npm package you see ending with "-cli" (convention, probably). 
They are run via the terminal

```
> del '*.png' --dry-run
```

A package can be available as a CLI only tool (del-cli), while some others may be available as an alternative to run the API via CLI (eg Webpack-CLI runs Webpack via CLI).
 
## API
Examples are [Webpack](https://www.npmjs.com/package/webpack), [Bootstrap](https://www.npmjs.com/package/bootstrap). They are required/imported in a script

```
// Using webpack via API
const webpack = require('webpack');

webpack(...);
```

or referenced 
```
<!-- For example, in an html file -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
```

NB: The above is used to illustrate referencing a file directly from the ***node_modules***. For those using bundlers like webpack, you may simply import bootstrap in a script like this and take advantage of other features of the bundler

```
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
```

## Plugin
By plugin, I mean a package that can be used to make another package compatible in an environment. Example: [gulp-postcss](https://www.npmjs.com/package/gulp-postcss) makes [postcss](https://www.npmjs.com/package/postcss) usable within [gulp](https://www.npmjs.com/package/gulp); [css-loader](https://www.npmjs.com/package/css-loader) and [Mini Css Extract Plugin](https://www.npmjs.com/package/mini-css-extract-plugin) enable using a stylesheet through a script in webpack (*I'm categorizing both webpack loaders and plugins as plugins in a general term*). Their usage depends on the environment's condition.

-----

*Anything else I missed?* Thanks for reading
State Switching..!
Tags: javascript, tutorial, webdev, vue
Published: 2020-03-16 20:13:59

Sometimes, when we are writing the logical commands of a part of the main program, we need to change the situation between the two types, if a specific condition happen.

For example, when we click the “ _Edit_ ” button, we can edit the text and disable editing by pressing the “ _Edit_ ” button again.

Or in a Todo list, when the ‘ _check_ ’ is clicked, the task will switch to the DONE state and return to its original state when clicked again.

![alt text](https://miro.medium.com/max/721/1*RUXviUbxailnhiTKbmioHw.png "CodePic1")
![alt text](https://miro.medium.com/max/736/1*N3JkrII7YTBcEHxw2Un4NA.png "CodePic2")
######when the ‘ _check_ ’ is clicked, the task will switch to the DONE state and return to its original state when clicked again.

In this type of change state, we can write the logic with the “ _if_ ” and “ _else_ ” commands. For example, in the first case, we can say “ If the editing button was clicked and it wasn’t on the “Edit” mode, the text becomes editable and if it was on the “Edit” mode when clicked, it would switch to the non-editing mode…. ”, that which includes long commands “ _If_ ” and “ _Else_ ”…

___

But the point is, in these cases, you can set _**true**_ or _**false**_ for it.
“….If the editing mode had a “**false** state”, the text box can’t be edited…”

![alt text](https://miro.medium.com/max/1390/1*2g3TjPqBmPcEmywQ0x8tcw.png "CodePic3")

By clicking on the button, it should switch to the _**true**_ mode and be ready for editing…

The simplest way to opposite the default state is considering the “ _**!**_ “ phrase like this:

![alt text](https://miro.medium.com/max/1390/1*2SJy7oea7gfi0YcLW4pmQA.png "CodePic4")

>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 March 16, 2020 and was written by **Mohsen Fallahnejad**._
How I Got Started Developing Games
Tags: career, womenintech
Published: 2020-02-24 16:21:27

I taught myself to code in (or around) 2004 because I wanted my Neopets profile to play music - and I haven't looked back.

After graduating from college in 2014 and accepting the first job I was offered, I landed a job I actually liked in 2017. I started working as a FE Solutions Developer/Consultant with various clients across the Southeast USA. 

Beginning in 2018, I started taking some online courses on game development and worked with a colleague to refine these skills. I chose game development initially for one reason - *games are fun*. 

>**Note:** There are developers out there who find immense joy in building complex systems with tons of integrations to solve a problem. These developers have incredibly valid interests and are no less impressive in my mind...but I am not one of them. 

I wanted to challenge myself to learn something new, but I also wanted my new skills to produce something accessible for my friends and family who aren't as technically gifted. Games can be incredibly simple to play while still challenging to create. 

As I learned more, I realized there are a number of reasons game development skills make sense for developers outside of the freelance and game dev environments:
- Almost everyone plays games so it's a great way to expand into new markets
- Businesses are taking notice and workplace gamification is ramping up
- Game development is still code and any practice makes you better

Today, I am building games for clients and for fun. I've held trainings for my team on game development technologies like Unity and established myself as a reliable source of knowledge - and I get *paid* to ~~play games~~ test software at work.
How To Integrate CKEditor with Django Admin
Tags: django
Published: 2020-02-24 17:27:37

Sometimes we have to add WYSIWYG editor to an input box in the Django Admin. It is a simple and easy task but may seem tricky for newbies. So, we are going to add a WYSIWYG (which s an acronym for “What You See Is What You Get”) editor to our Django Admin.
For this tutorial, I am assuming that we have a ProjectUpdate model where we need to integrate a WYSIWYG editor. I am using CKEditor 5 for this tutorial.
# Add an id to Admin Textarea
At first, we need to add id to the textarea in Django Admin so that we can find it through the id and bind it with CKEditor. For that, we will use formfield_overrides that provides a quick-and-dirty way to override some of the field options on Django admin.
   ` # myproject/admin.py
    class ProjectUpdateAdmin(admin.ModelAdmin):
        formfield_overrides = {
            models.TextField: {'widget': Textarea(
                attrs={'id': 'project_update_textarea'})}
        }`
Here we have added an id **project_update_textarea** to every textfield in Django admin panel of the ProjectUpdate model.
# Add the script to base.html
At first, make a directory named admin in your templates directory and copy the *base.html* file there. The admin base template can be found in this path: *django/contrib/admin/templates/admin/base.html*. After that, add these lines before the body closing tag:
`
    # templates/admin/base.httemplates/admin/base.httemplates/admin/base.html
    <!-- Start custom scripts for customizing admin form -->
    <script src="{% static 'vendor/ckeditor5/ckeditor.js' %}"></script>
    <script>
    ClassicEditor
         .create( document.querySelector( '#project_update_textarea' ) )
         .catch( error => {
                console.error( error );
            } );
    </script>
    <!-- End custom scripts for customizing admin form -->
`
I have downloaded the CKEditor package and stored in *static/vendor/ckeditor5* directory. Hence, I have used the static tag in the script. You can use the CDN link also if you prefer.
# Conclusion
That’s it. Go to your Django Admin Panel. The CKEditor should work now.
How come job interviews turned in LeetCode familiarity?
Tags: anonymous, discuss, leetcode, interview
Published: 2020-02-24 19:09:33

There are some big companies, in which the interviewer told me secretly 

>"if you don't do tons of LeetCode, don't even think about getting into our company"

Another one I heard was

> "if you can't give the most optimal solution in the phone interview (which was a medium hard LeetCode problem), don't even think about getting an onsite interview"

For some questions in LeetCode, it can be we work in the real world (especially as Front End development) for 10 years, and never use once.  So getting into the company just means doing a lot of LeetCode problems. How can it make sense, or should we just take it "the way it is"?

Kind of like SAT: if you can't give a synonym of "abnegation" or "adumbrate", you just get a lower score and can't get into your dream school, that's it.

There is also somebody who said he

> got warmed up by doing 300 Leetcode problems, and then he did 600 of them

On the other spectrum, there are also people who said LeetCode doesn't work, and that the interviewers only want to see how you behave in a getting stuck or difficult situation, and some say want to see how you cooperate with interviewer and discuss and reach a possible solution... I wonder how true it is, as it usually seemed the interview just pushed and pushed and say your code is 100% correct, and what is better, and when better is given, what is the most optimal.

Sometimes, the most optimal for people who haven't seen the problem before took them days or even months to reach it.
Dealing with infinite loops in useEffect hook
Tags: react
Published: 2020-02-24 19:33:40

When i switched to hooks from class styled components, i considered `useEffect()` hook with empty dependencies array as `componentDidMount()`, what stopped me from using it this way - eslint error `react-hooks/exhaustive-deps`, so i've started to dig deeper on how to do it the right way.

Let's look at this common example, where we are fetching some data from an API using our custom hook:

```js
const useFetch = <R, B>(
  url: string,
  method: Methods,
  body: B | undefined = undefined,
  headers: { [key: string]: string } = {}
) => {
  const [response, setResponse] = useState<R | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    (async () => {
      dispatch(onRequest(true));
      try {
        if (user.jwt) {
          headers['Authorization'] = `Bearer ${user.jwt}`;
        }
        const result = await api<R, B>(url, method, body, headers);
        setResponse(result as R);
      } catch (error) {
        setError(error);
        dispatch(onFailure(false, error));
      } finally {
        dispatch(onFinish(false));
      }
    })();
  }, []);
};
```

This looks and works as expected, when your component mounts, data would be fetched once, but eslint would start warn you: 

"ESLint: React Hook useEffect has missing dependencies: 'body', 'dispatch', 'headers', 'method', 'url', and 'user.jwt'. Either include them or remove the dependency array.(react-hooks/exhaustive-deps)"

If we add all of these noted above dependencies, then we would get an infinite loop, because of the `headers` param is equal to `{}`.
In JavaScript `{} === {}` is always false, so we would get stuck in a loop.

Solution to this problem, is to use `useRef()` hook:


```js
const { current: hdrs } = useRef(headers);
```

Then we just have to rename `headers` param references to `hdrs` (we just destructured current from useRef for convenience, otherwise we would have to use it as `variableName.current`). And add all of `useEffect()` dependencies in to array:

```js
[body, hdrs, dispatch, method, url, user.jwt]
```

Now, every time our component is mounted, it fires `useEffect`, but we won't get stuck in a nasty loop, because all of its dependencies remain unchanged.

I previously used `useMemo()` to save a reference to a value, but there's a `useRef()` for such purposes. A good [article](https://blog.logrocket.com/rethinking-hooks-memoization) that pointed me in a right direction
GitHub from the beginning, in Visual Studio
Published: 2020-02-24 23:24:50

###Who's this for?

Visual Studio users who want to start using Source Control in their projects, new or existing, but have no experience with source control.

###Pre-work.

OK, you will need a GitHub account.  They're <a href="https://github.com/join">free and fast to setup!</a> I doubt I can explain that any better then GitHub do.

Go get setup, I'll wait.

###Open your Project (in Visual Studio)

Oh, your back!  

Let's continue. To get your project into GitHub, you want to open it first.
Alternatively you can start a brand new project to experiment with.

Either way, get a project open in Visual Studio.

###Get version control for your project

With your project open, right click on the solution.  In the (rather long) list is a magic option **Add Solution to Source Control**.

![](http://www.valleysoftware.com.au/wp-content/uploads/2019/10/image-4.png)

Click it and a new repository will be added to your solution.  Yay!  You now have source control.

###But...

It's only local to your PC.  Not on GitHub or anywhere else.

![](https://media.giphy.com/media/5LU6ZcEGBbhVS/giphy.gif)

##Get your project into GitHub!

Don't be disheartened though, you're actually almost there.

Next, get the **Team Explorer** tab open.  If it is not currently visible, you can get it from the **View** menu.

![](https://i2.wp.com/www.valleysoftware.com.au/wp-content/uploads/2019/10/Commit-to-Source-Control.gif)

With the Team Explorer open, click the **Sync** button (You can always find these buttons again by pressing the **Home** button)

You'll be prompted to chose between Azure DevOps, GitHub or other remote repository.  Choose GitHub and then sign in with your shiny new GitHub account.

You'll notice that in the example, I tick the *Private* check box.  As that particular project of mine is not open source I have ticked it so only I, and others I select, can view it.

Press **Publish**, and up it goes to GitHub.

![](https://media.giphy.com/media/GA2FNpP1kAQNi/giphy.gif)

###Now what?

Now you start making changes to your project like normal.

As you do, you'll see the icon next to each file change.  If it's red then that file has changed compared to the repository.

If you're working alone on your project (the easiest way to start and the way I'm limiting this article) then you need only push your changes up to the server.

*Note: do this only when you're happy with the changes you've made.*

To sync up your changes, go back to the **Team Explorer** and select **Changes**.

This will list for you all the changed or added files.  

Add a note to explain what you've modified and then press **Commit All**.  I tend to always use the **Commit All and Sync** option to make sure everything matches.

![](https://i2.wp.com/www.valleysoftware.com.au/wp-content/uploads/2019/10/Check-In-Changes.gif)

*Well done!*

Welcome to the world of professional source control.

There is much more to learn, but this is just to get you started.

Enjoy!

Rob,
Valley Software.
First Post!!!
Tags: beginners
Published: 2020-02-25 00:34:08

I've started the software engineering immersive bootcamp at Flatiron School! This is week 5 for me. I've progressed through Ruby and some of it's libraries (ActiveRecord, etc.) and am currently deep diving into Rails :)

But enough about code, I've been asked to explain WHY I WANT TO CODE. And so here we go. I majored in civil engineering in college and pursued a master's degree only to realize that I REALLY disliked the industry. Like building things is cool, but turns out different professions have can VERY different work cultures and expectations. So in short, I realized I was a fish out of water at my former job and decided to try something else.

My time in grad school did introduce me to something else I enjoyed: CODING!!!! I was able to take a course in Python that introduced me to computational programming and my first higher-level language. The professor was super cool and this ended up being my favorite class at UW. In hindsight, this should have raised some alarm bells but live and learn ¯\_(ツ)_/¯ 

So I knew I wanted to spend some time coding to confirm that I enjoyed it enough to do it year-round. I was already living in Seattle and looked around ultimately going with Flatiron because it felt right. Not knowing much about web development or coding outside of school, I figured this experience would introduce me to a whole new world.

And I'm so glad I did! This program has been a great experience for me and a fun way to start of 2020.
Succeeding at your First Developer Job
Tags: career, beginners, codenewbie, discuss
Published: 2020-02-25 03:46:33

For those in their first year of being a developer - either a new grad with CS degree or self-taught developer - what is your biggest challenge after learning to code?

Knowing how to code is just one of the things you do while working as a professional (i.e. paid) software developer. Some of the other things are:

- reading and understanding existing code
- understanding the architecture of your codebase
- understanding the data model
- debugging
- designing and planning features 
- version control, code reviews and release process
- configuring and installing stuff

Which of these would you like to read more about?
How much time you're wasting in your day?
Tags: watercooler, career, productivity, tutorial
Published: 2020-02-25 07:58:09

Are you a person like me, looking for some spare time to work on personal projects, read books, watch tutorials or attend classes?

The answer is that you'll never ever get that time you're looking for and you'll always end up complaining about it. This is the truth.

"You can't cure the disease if you don't know what it is? You can't save the time until you know how much time you're wasting"

I'm not talking about others, I'll talk about myself. I've tried almost every productivity system out-there and Softwares and apps but nothing works for me. I want the time, but I don't want to change the way all the things work(the unorganized routine). All of this drama is not about time, it's about the correct usage of the time. Waking up early doesn't make you productive or the To-do list won't make you productive because of the **RESET** Mechanism. What is **RESET**?

It's my own abbr of **R**epeat **E**veryday **S**leep **E**veryday **T**uning. It's the programming of your mind, you've to modify to get productive. You're unconsciously repeating every day, there are little to no changes in your day and you always make a to-do list for the same day like today, and you always schedule your day as RESET. write all the things you want to do for tomorrow, write down everything don't think that there is no time to do all of this. Now Go and sleep, again repeat your day as you do but don't look at the list or follow it. Complete your day and then before going to sleep look at the list, and see what you've done? 
- If you've done 40% of tasks - You're going well without any pressure of a schedule.
- If you've done 70% of tasks - You're not writing correctly, there can be more tasks.
- If you've done less than 30% of tasks

Now calculate the time these tasks took from your time, you'll find the correct ratio of time you are wasting.

**Example**:
 I wrote down 12 tasks but I only have 5 hours a day. Tonight I checked the list, that I completed 3 of the tasks only and these 3 tasks took me 1 hour each = 3 hours
So I have wasted 2 hours of my day, I don't know how? 
Total Day Time = 5 hours
Total Time Tasks took = 3 hours 
Time Wasted =  2 hours (Watching Videos, Chatting on Facebook)

So This is how you'll know, that how much time you're wasting. OOOOOOFFFF So Now at the end of the day, I get to know that I wasted my 2 hours of the day.



**Note:** I wrote this, and I know it's bullshit but yeah I posted it.
Delayed replica set Member in MongoDB
Tags: mongodb, replication
Published: 2020-02-25 08:15:10

What is Delayed replica set member?
Delayed replica set member is a node that runs N number of seconds behind from the primary node. For example, if you have configured delayed node with one hour delay it will be always 60 minutes behind from the primary node. It means if you have created a new collection on the primary node it will appear in delayed node after 60 minutes. 

Why Do we need a delayed replica set member?

We configure delayed node for the following purposes:

Safeguard the data from human mistakes like wrong code push on the primary. Accidental data insert or update.
For backup and recovery purposes when you get a lot of concurrent data changes happen from the primary. At any given point in if you have to revert any specific data set.
It can be used for a point in time recovery.
It can also be used while making  BCP (Bussines Continuity Plan) setup.
 

How to configure it?

From primary node while adding a new delayed node just add ‘cfg.members[0].slaveDelay = 3600’ where 3600 demotes the seconds.

Full command


cfg = rs.conf()                                          Start the confiuration 
cfg.members[0].priority = 0                              Seting the node priority so that it never become primary  
cfg.members[0].hidden = true                             It Can’t vote in node eletion process 
cfg.members[0].slaveDelay = 3600                         Delay in seconds 
rs.reconfig(cfg)                                         Save the configuration
Important Note:

There might be a slight disconnection because ‘rs.config()’ may step down the primary and begin the node election process. You will see 5 to 10 seconds disconnect because this process will close all the application connection. The safer side you can perform delayed node addition in the downtime window.

read more:https://www.thedbadmin.com/delayed-replica-set-member-in-mongodb/
Mobile Phones 100vh issue
Tags: css, html
Published: 2020-02-25 20:41:32

### In diesem Blog wird kurz erklärt, wie man auf dem Smartphone das 100vh Problem lösen kann.

{% codepen https://codepen.io/tobiasroeder/pen/ExjWPEV %}

In diesem Codepen Beispiel ist ein Lösungsweg, wie man die '100vh' Höhe in einem mobile Browser mit CSS einstellt.

Kurz erklärt: das am übergeordnetste `div` Element, in diesem Beispiel `#app`, wird mit der Hilfe von `position: absolute` und `top: 0; right: 0; bottom: 0; left: 0;` auf die komplette Größe in der Breite als auch in der Höhe der Browsers gesetzt. Das ist wie die Höhe auf `100%` zu setzten.