teleren/devto huggingface dataset:
More Conditional Statement – JavaScript Series – Part 9
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-01-30 09:01:53

In last part we didn’t talk much about conditions. In this part we are going to talk about the conditions.

Suppose we need to found a value which is divisible by 5 and 7 both. How can we do this? The straight forward way will be just write one if inside of another one. Example –

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

Now we can do two conditions in one if. By adding && we can do it. Adding && means we need to satisfy both conditions to go that block. Example –

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

Now lets suppose we a string value which is midoriya or todoroki. If we get any of these, then we’ll tell this is coming from BHNA anime, or else we will print, we don’t know the sources. Let’s do it.

First we need a name variable and store the value in it –

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

Now lets check the both condition and put || between them. This means OR. If any of these condition approved, then if block will run.

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

So this was easy right ?

We learned about && which means and. Also we learn about || which means or.

Let me know if you have any questions.


You can see the graphical version here
{% instagram B75mGG5A9wM %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-9/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/)!
Free Bootstrap Templates for Startups & Makers
Tags: webdev, bootstrap, css, html
Published: 2020-01-30 08:46:48

### Today I continue the series of publications of free Bootstrap templates and present another collection that you can get for free.


Be sure that you follow me on  [ Twitter ] ( https://twitter.com/bootstraptor ) and [ Instagram ] ( https://www.instagram.com/bootstraptor_com/) so you never miss:
- My New Templates
- Useful Tools
- Updates 
- as well as insane deals on web design resources, 
- HTML and Wordpress Bundles + website builders

If your startup is in the planning of building a website, or if you’re looking for a refresh, this free Bootstrap templates helps to start at some of the best examples.

If you are not 100% fluent with HTML/CSS, these boilerplates will give you a set of layouts and components to get you started. 

Make by @Bootstraptor with <3 & [the Blueprints app Bootstrap builder ](https://www.google.com "Bootstrap builder")

These templates are fully compatible with [the Bootstrap builder ](https://www.google.com "Bootstrap builder") so that you can easily open and reorder blocks, add new ones and this is a convenient starting point for your project.

Also, if you need more, you can get a huge collection of starter templates 
[ here ](https://demo.bootstraptor.com/blueprints-kit/ "Bootstrap templates") and [ here ](https://demo.bootstraptor.com/blueprints-kit-2/ "Bootstrap templates") at very little price.



#### So let's dive into a few previews of these beautiful templates:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sej9obiz25em1h0s8did.png)
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xqpstcx0b0dnvtiq701a.png)
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d5otjs0zl3soqnj5npmg.png)
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26bw5mausk0qgq2jfpsx.png)
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1egwvf43nll49dlra67i.png)
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ca65v753a9enu3uylgt.png)


So you can [ Download for Free ](https://demo.bootstraptor.com/freebies/ "Bootstrap templates") from our website.

You can use it for free for any of your personal projects, 

but if you plan to use it in a commercial projects (for example, for freelance projects) please buy one [ Commercial License ](https://gum.co/TXoLF "Bootstrap templates")  and use it for any number of projects - a multisite license) 

this will support 🙏 the project and I will post more and more free templates here every week.

Have a wonderful, magical, productive day!

Cheers,
@Bootstraptor
with <3




Be sure that you follow me on  [ Twitter ] ( https://twitter.com/bootstraptor ) and [ Instagram ] ( https://www.instagram.com/bootstraptor_com/) so you never miss:
- My New Templates
- Useful Tools
- Updates 
- as well as insane deals on web design resources, 
- HTML and Wordpress Bundles + website builders
What do you want?
Tags: swift, beginners, webdev
Published: 2020-01-30 08:39:31

1. What do you want to get out of learning how to code?

   A- I want to be able to build my own soft wears and apps.

2. Of those things, which could you do within a playground?

   A- I can do both things. 

3. What simple app could you create either to convey information or to provide inspiration?

   A- I think I could create a blog app, an let other start a blog as well.
✅ I worked as a Software Developer in the beautiful Switzerland 🏔️, AMA!
Tags: ama, career, europe, watercooler
Published: 2020-01-30 08:31:25

####Dear DEV community,

####I am a Software Developer from Europe that migrated and worked in Switzerland 🏔️.

My roles have been mostly focused on Full Stack web development (JavaScript, Java) and I was living and working in Zurich.

Since there are some developers that would like to move to Switzerland 🇨🇭 or have questions about it, I am here to answer them for you!
Docker 101: Use it with NodeJS in 2020! 📦 🙌  (practical guide)
Tags: node, docker, productivity, devops
Published: 2020-01-30 08:14:25


I will skip "What/Why Docker?" part to make it straight to the point! 🤝

<h3>Let's see this in action!</h3>
---------

I already have installed -
- NodeJS
- Docker


We will create a simple Node Server. We will use `http` module from node and make a simple http server. `server.js` file contains the code of our server-
```javascript
var http = require('http');

var server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Node & Docker Running...");
});

server.listen(3333);

console.log("Node HTTP Server started at http://localhost:3333/");
```

If we run <b>`node server.js`</b> on our terminal, it will start the server at 3333 port on localhost.
We can open a browser and hit `http://localhost:3333/` and we can see server is sending the text <b>Node & Docker Running...</b>.
Awesome :clap:

Now, we want to create a docker image for our Node Server. To do this, we need to create a file named `Dockerfile` in the root directory with the below commands-

```javascript
FROM mhart/alpine-node
COPY server.js .
EXPOSE 3333
CMD node server.js
```
Here, I have used `mhart/alpine-node`(Minimal Node.js Docker Image) for having NodeJS environment.

*`EXPOSE 3333` means - `3333` port is intended to be published.*

Now that we have our `Dockerfile` ready, we will build a Docker image from this file. We can run on the terminal-
```
docker build -t docknode .
```
**Here, `docknode` is the image name. We can use any name.*

After running, we can see some steps on our terminal.Like-

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

Here ^ 4 Steps are basically representing the 4 lines of the Dockerfile, which makes sense! 👌

To verify that, our image has been created successfully we can run the below command to get all the docker images-
```
docker images
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4gyzay4n3px48zrbvq6e.png)

Awesome, we can see our newly created image `docknode` there 😎

I will run the docker image now which will make a container for us-
```
docker run -p 3333:3333 docknode
```

We will see Our Node server is running-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ia8geplidkvbrwt5mpkl.png)

Now, if we open any Browser and hit `http://localhost:3333`, we can see the server is running 🎉

If you haven't used Docker yet, I think, you should Try it in 2020!
I will write more on Docker in my future articles! 

Till then,
Cheers!
:wave:
Today I learned - React refs
Tags: react, refs, javascript, todayilearned
Published: 2020-01-30 07:08:13

Today I learned is a series where I share a short summary of one thing I learned during the day. The idea is to show what resources I used and give my own short explanation to things.

Regarding FE libraries for building UI, my go-to library has been Vue. Lately, I've also started to use React because well...it's the most-used FE library for the aforementioned purpose([NPM depended](https://www.npmjs.com/browse/depended)).
Yesterday, I reviewed a PR that used `useRef` hook, which I didn't know of before. That's why I started to look into it.

# What are refs in React?
Refs provide a way to access DOM nodes or React elements created in the render method.

Usually, refs are used to manipulate the DOM node state(focus, active etc).

An example of using ref (from [https://reactjs.org/docs/refs-and-the-dom.html](https://reactjs.org/docs/refs-and-the-dom.html)):
![createRef example](https://dev-to-uploads.s3.amazonaws.com/i/f0xnchpgsrybtb6hymcl.png)

`this.textInput.current` refers to the DOM node, thus we can call out the .focus() method on it.

It's important to remember that each time the component rerenders, a new ref object is created.

# Cool,but I've also seen useRef?

With React hooks, useRef was introduced.

![useRef example](https://dev-to-uploads.s3.amazonaws.com/i/nulbwkn457euq6mmb92o.png)

Difference?

> "Well, the difference is that createRef will return a new ref on every render while useRef will return the same ref each time." by TrinhDinhHuy in DevTo

In his Article [Introduction to useRef Hook](https://dev.to/dinhhuyams/introduction-to-useref-hook-3m7n), TrinhDinhHuy has created an awesome animation about the differences between `createRef` and `useRef`:
![https://i.giphy.com/media/LndDkp00MVrF9ECX55/giphy.gif](https://i.giphy.com/media/LndDkp00MVrF9ECX55/giphy.gif)

Also, remember that `inputEl.current` gotten from React.useRef() is actually a mutable property that you can set to whatever you want and it won't change on rerendering. So basically, you can use React.useRef as instance variables ([Instance variables in React](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables)).

# Resources I used to learn
- [ReactJS doc - refs and the dom](https://reactjs.org/docs/refs-and-the-dom.html)
- [ReactJS doc - useRef](https://reactjs.org/docs/hooks-reference.html#useref)
- [Introduction to useRef Hook](https://dev.to/dinhhuyams/introduction-to-useref-hook-3m7n) - a post by fellow dev.to member TrinhDinhHuy. Really helpful with great examples and animations. So good that I actually borrowed his animation.
Smash your writer’s block with The Hulk Summary™
Tags: writing, productivity, motivation
Published: 2020-01-30 07:06:23

* WRITING IS HARD
* YOU THINK TOO MUCH!
* WE HAVE A SOLUTION
* THE HULK SUMMARY!
* CHANNEL INNER HULK VOICE!
* BULLET LIST!
* FEW WORDS
* SAY IT. EFFECTIVE!
* NOW, SMASH CAR!

Look, when you work with content, it’s not always easy to get going. Perhaps you only manage to come up with the same tired clichés, or you’re too close to the product and find yourself knee-deep on a tangent describing how the design choices were inspired by something your uncle said in a birthday party.

Whatever it is that keeps you from writing that succinct post that presents the what, how, and why to your readers without wasting their time, there is a remedy. We called it “The Hulk Summary”.

The method is simple. First channel your inner Hulk voice (everyone has one hidden in them somewhere), add a touch of rage and use it to describe whatever you need to get writing on. Hammer down that shift key (caps lock is a cop-out) and type max 4 words for each bullet to capture the core sentiment of what you’re arguing. The constraints will set your mind free.

You might not find crude shouting methodology enough to tease out the core of what you try to say. I'm happy to announce that The Hulk Summary™ is fully compatible with renowned communication frameworks whose efficiencies are proven by probably too expensive consultancy hours, such as the [SCQA-model](https://strategyu.co/scqa-a-framework-for-defining-problems-hypotheses/) from [The Minto Pyramid Principle](http://www.barbaraminto.com/). Put differently:

* WHAT SITUATION!
* COMPLICATION! DIFFICULTIES!
* I HAVE QUESTION!
* ANSWERS ARE DUE.

This method will most definitively not be developed further. We have loads to things to ship over at sanity.io. But now that it is introduced to a wider audience, we would love to hear your success stories about how it saved your whole content marketing department from writer’s block and pencil fear. Or how you made an interesting friendship from using it as a quirky icebreaker at a gathering. Literally hit us up on [Twitter](https://twitter.com/kmelve) and let us know, hashtag thehulkmethod.


(_No Banners were hurt in writing this blog post._)
JavaScript Challenge #1
Tags: javascript, java
Published: 2020-01-30 06:30:21

let array = [0,1,1,2,3,5,8];
        
...........
...........
[1,1,2,3,5,8]
[2,2,3,5,8]
[4,3,5,8]
[7,5,8]
[12,8]
[20]

Under the problem solve...make your solution comments..
Award-Winning UI UX Design Company
Tags: uiuxstudio, illustration, userinterface, userexperience
Published: 2020-01-30 06:17:02

UIUX Studio is the number one award-winning UI/UX design company of user interface and user experience design in globally. Founded in 2009, We deliver effective designing services include UX/UI designing, responsive web designing, graphic designing, and branding throughout the world. We have a team of 20+ designers, with different specialties in the UX/UI industry. Hire our experienced design team for your UI/UX Designing projects and achieving efficiency by utilizing our cross-industry expertise.

Visit here to know more: http://www.uiux.studio/
Difference between equals and == in java ?
Tags: java, beginners
Published: 2020-01-30 06:10:09

[Difference between equals and == in java](https://academyera.com/difference-between-equals-and-in-java)

String in Java is not a primitive type and it is a Object type. It means it will allocate the memory in Heap. There are usually two ways of defining an string in Java

__1) with Literal                 :   String s = “Hello India”;__

__2) with new Keyword             :   String s = new String(“Hello India”);__



There is a difference between memory allocation for both the types. For 1st type, it will allocate the memory in String Constant pool which is an integral part of Heap Memory and for 2nd type it will allocate the memory in Heap.

__Note:__ Refer that String Constant pool link what it will do internally

Coming the point of difference between __==__ and equals() method. Both are used for the comparison but one is a operator and another one is method. __“==”__is for address comparison and equals() method is for content comparison.

Refer : https://academyera.com/difference-between-equals-and-in-java
Web design trends to be kept in mind while designing
Tags: design, angular, webdev, tutorial
Published: 2020-01-30 06:04:35


1.  <h2>Interaction-focused Interfaces</h2>

     Creating great interactions often means designing such simplest elements as buttons, blips, alarms to messages with laser-like focus and accuracy. One of the great examples of effective microinteractions is the Twitter’s ‘pull-down-to-refresh-news’.


2.  <h2>Modules & Components</h2>
    
    Breaking down complete interfaces into systems of components goes mainstream. Web designers tend to create mockups with smaller blocks and modules, rather than deliver entire page layouts upfront. The methodology behind this is not new to us, however, it was finally put into shape and legalized by Brad Forest to what is known Atomic Design . The concept of design systems implies a nice opportunity to use the same functionality anywhere on the website with replicated components. Also for web designers gradually increasing the fidelity of interface design means a deeper understanding of the layout concept on each design stage by their clients.

3.  <h2>Stunning Fonts</h2>

    In 2020 priorities shift to bolder and larger fonts in corporate designs as a weapon to convey brand messages in a stronger manner. The overall requirement to typography stays the same: fonts must be easy to read and legible both on high-resolution and lower resolution screens.

4.  <h2>Card-layout Interfaces</h2>

    Grid layouts are common nowadays with cards helping to present information visually in a laconic way. Hover effects on cards amplify users’ perception of text descriptions. The trend is not new as it has been popularised by Pinterest in 2015. Nevertheless, this year card-style layouts are still in fashion and work.

5.  <h2>Tiny Animations</h2>

    While there are more and more websites with alike minimalist layouts web designers try to achieve uniqueness by using ingenious, but subtle animations. In 2016 web designers give preference to small animations that carry out certain tasks efficiently and smoothly.

6.  <h2>Enlivening Iconography</h2>

7.  <h2>Suitable Video Headers</h2>

8.  <h2>Custom Landing Page Videos</h2>

9.  <h2>Product Previews</h2>

10. <h2>Stunning Illustrations</h2>

11. <h2>Charming Sketches</h2>

12. <h2>More Slides & Sliders</h2>

13. <h2>Less Carousels</h2>

14. <h2>Flatter Web Design</h2>

15. <h2>Bold & Bright Colours</h2>

16. <h2>Material Design Aesthetics</h2>

17. <h2>Own Photography, No Stock</h2>

18. <h2>Touch-enabled Interfaces</h2>

19. <h2>Full-screen Forms</h2>

20. <h2>Creative Hover Effects</h2>

21. <h2>Centered Main Content</h2>

22. <h2>Minimal Home Pages</h2>

23. <h2>More Scrolling vs Less Scrolling</h2>

24. <h2>Large Body Text</h2>

25. <h2>Faster Page Load Times</h2>

26. <h2>Hypnotizing Cinemagraphs</h2>

27. <h2>Use of Collaboration Tools</h2>

28. <h2>Design Driven By Users</h2>

29. <h2>Using Vector images</h2>
bit operation in the wild 
Tags: rails
Published: 2020-01-30 05:50:05

I've never used bit operation in my life.
But currently, I've got a chance to know how it is good.

I will develop this post, but publish it first anyway.

## case.1 For day matching operation
### Define and WHY
You can define days like this.

```ruby
MON = 1
TUE = 2
WED = 4
THU = 8
...
```

Maybe, you've got a question, WHY?
Let's see it in bit world.

```ruby
MON.to_s(2).to_i #=>    1
TUE.to_s(2).to_i #=>   10
WED.to_s(2).to_i #=>  100
THU.to_s(2).to_i #=> 1000
...
```

### PROS
If a user check MON and WED, it's easy to calculate now.

```ruby
MON | WED #=> 5 ( MON = 1, WED = 4 )
```

The bit of 5 is `101` which made of `001` and `100`.
It's easy 🎉

### Use it with Date
```ruby
Date.today          #=> Thu, 30 Jan 2020
Date.today.wday     #=> 4
```


```ruby
MON = 1 # = 2**0
TUE = 2 # = 2**1
WED = 4 # = 2**2
THU = 8 # = 2**3
...
```

So, you can get the bit of the date from Date object.

```ruby
2**(Date.today.wday - 1) #=> 8
```

### Take the multi case of the date by the 1 operation
You can filter the cases include "WED" by [bitwise &](https://docs.ruby-lang.org/ja/latest/class/Integer.html#I_--26).

Image is like this.
```ruby
0000 #0 NAN
0001 #1 MON
0010 #2 TUE
0011 #3 TUE and MON
0100 #4 WED
0101 #5 WED and MON
0110 #6 WED and TUE
0111 #7 WED and TUE and MON

&&&&

0100 # WED
```

Example: `3 & 4 #=> 0` ( TUE and MON & WED )
Because, 

```ruby
0011 # TUE and MON
&&&&
0100 # WED
----
0000
```

Example: `5 & 4 #=> 4` ( WED and MON & WED )
Because, 

```ruby
0101 # TUE and MON
&&&&
0100 # WED
----
0100 #=> 4
```

```ruby
0 & 4 #=> 0
1 & 4 #=> 0
2 & 4 #=> 0
3 & 4 #=> 0
4 & 4 #=> 4
5 & 4 #=> 4
6 & 4 #=> 4
7 & 4 #=> 4
```

So, we can check it is valid of not by '=='

```ruby
3 & 4 == 4 #=> 0 == 4 #=> false
5 & 4 == 4 #=> 4 == 4 #=> true
```

By this mechanism, you can easily make sure the date matches the day?


### Use it in SQL, Relation, ActiveRecord, WHERE
Now, you can understand it. ( SQL also has the [bitwise & operator](https://www.w3schools.com/sql/sql_operators.asp). )

```ruby
.where("user_selected_days & ? = ?", 2**(Date.today.wday - 1), 2**(Date.today.wday - 1))
```
You become responsible, forever, for what you have published on NPM
Tags: npm, javascript, opensource, node
Published: 2020-01-30 04:54:06

<q>You become responsible, forever, for what you have tamed.</q>
<small>― Antoine de Saint-Exupéry, The Little Prince </small>

I was checking for my old small codes, looking for some good projects to apply tests and improve my skills.

Suddenly I remembered that some of them were published on NPM, just for fun, to my own use. And then, in that small right area, which I've used so many times before to analyze packages, my eyes became bright:<strong> most of my packages have about 6 to 24 downloads/week!</strong>

![](https://res.cloudinary.com/practicaldev/image/fetch/s--Etk7LUQF--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/p9k8o53dnxp24wo0kzvm.jpg)

I was shocked! Somebody, out there, in the ocean of the open-source, is really using my humble chunks of code...

After minutes of self-admiration, one thing became clear: I was responsible, somehow, for the code of the others. Never, in my 20 years of coding, this kind of responsibility crashed over me.

One thing is to code to the production environment of software you're paid to execute; another is ship some silly code and somebody, not your fellas or company, start to use your package. Weekly.

So, I've decided to improve all of them. Version, tests, good documentation, better code. Even knowing my published codes was simple, the need for some baseline overwhelm my shoulders and became a duty.

And now, 20 years after my first code, I can feel what open source can be. It's not just "contributing back" but become responsible for the others, raising the bar, as I think those same guys do in the all-stared repositories.

...

So, for you out there, using my code: thanks a lot. And one lesson learned: open source out your ideas, maybe somebody can find it useful.