teleren/devto huggingface dataset:
Tailwind CSS static navbar with shadow on scroll for Vue applications
Tags: javascript, webdev, tutorial, css
Published: 2020-02-02 13:42:27

---
title: Tailwind CSS static navbar with shadow on scroll for Vue applications
published: true
canonical_url: https://chrisdermody.com/tailwind-css-static-navbar-with-shadow-on-scroll/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/klrvmdr3sv7r2bp8io5b.png
description: The HTML, CSS and Javascript you need to make a sticky navbar with Tailwind CSS with a dynamic shadow on scroll
tags: javascript, webdev, tutorial, CSS
---

I first wrote about this [over on my blog](https://chrisdermody.com/tailwind-css-static-navbar-with-shadow-on-scroll/?r=devto) - really only for my own personal reference since I'll need this code again in my next project. But thought I'd share here too. 

![demo of scrolling effect for shadow on navbar](https://dev-to-uploads.s3.amazonaws.com/i/rlq57ltibd28kyy1otyr.gif)

If you're not using Tailwind for your CSS needs - I highly recommend it. It's now a staple of my product building toolkit, and it just fits so well with Vue.js and Nuxt workflows that I can't imagine moving to something else.

One thing about Tailwind is it leaves the Javascript to you. This is so it's library-agnostic.

For most of my projects I want that smooth shadow under the navbar - here's the code I use to achieve it.

## The HTML
```html
<nav 
    :class="{ 'scrolled': !view.atTopOfPage }" 
    class="fixed flex w-full bg-white border-b items-center justify-between flex-wrap p-5 m-auto top-0 animated">
</nav>
```
Here, we're adding the `.scrolled` class when the value in `view.atTopOfPage` is false.

## The CSS
I have a navbar component that I use throughout the app, so this code would go there. PS: Yes this is technically SCSS...
```scss
nav {
    z-index: 10
}

nav.scrolled {
    @apply shadow-2xl;
    border-bottom: 0px;
}
```
Apply the shadow to the navbar when it has the class `scrolled`.

## The Javascript

```javascript
// in data, I like to store a view object with all 
// the values I need for a component to manage 
// it's 'view' state - ie loading, 
// or in this case, if the user is at the top of the page or not
data () {
    return {
        view: {
            atTopOfPage: true
        }
    }
},

// a beforeMount call to add a listener to the window
beforeMount () {
    window.addEventListener('scroll', this.handleScroll);
},

methods: {
	// the function to call when the user scrolls, added as a method
    handleScroll(){
        // when the user scrolls, check the pageYOffset
        if(window.pageYOffset>0){
            // user is scrolled
            if(this.view.atTopOfPage) this.view.atTopOfPage = false
        }else{
            // user is at top of page
            if(!this.view.atTopOfPage) this.view.atTopOfPage = true
        }
    }
}
```

## The Result
Buttery smooth shadows on your navbar. Check it out in action on my product [Referextra.com](https://referextra.com?r=devto)
{% youtube khy10yI1eYI %}
How to Achieve Auto Complete faster in Angular via API
Tags: discuss, angular, java, spring
Published: 2020-02-02 13:41:31

Hi, I am currently working on a side project, which uses Third Party API Data search with Autocomplete.

I have written the code in way that 
  (Text Input) - > Make  REST call to MY Server with query Param -> Then My Spring application makes a Rest Template call with API Key and other param to Third Party application. -> On receiving the large JSON it will filter and then return the Array of Suggestion to Angular application.

But the autocomplete is not instantaneous and responsive. I cant call the third-party directly from UI. 
Any suggestions on it.
[SOLVED] How To Merge Arrays Using Spread Operator?
Tags: javascript, webdev, tutorial
Published: 2020-02-02 13:38:54

Spread Operator is of a great use in case of dealing with arrays and objects. Here how to merge two arrays using it.

```javascript
const arr1 = [1, 2];
const arr2 = [3, 4];

const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4]
```
Organizing my NodeJS code and folder structure
Tags: node, beginners, folderstructure, organization
Published: 2020-02-02 13:18:25

---
title: Organizing my NodeJS code and folder structure  
published: true
description: Documenting my adventures in full stack javascript
tags: nodejs, beginners, folderstructure, organization, 
---
 
As I look at other people's nodeJS repository, I see neatly organized code and folder structure by people who seem like they really know what they're doing. Meanwhile I look at mine, it's a mess. As convenient as it might be to not having keeping everything in a single file, it's not the best practice. So I set on mission to perfectly organize my folder structure. 

To do that, I went through a bunch of other people's repositories, read a bunch of articles and basically what I learned was there is no one-size-fits-all approach. However in my case, I did end up with a folder structure that I think will make my code somewhat maintainable. 

In case of my project, I'm doing a full stack javascript application with vuejs at the front-end and nodejs at the backend.

```
App folder:
->client (consists of the client side VueJS)
->server
    --->controllers
    --->routes
    --->models 
    ---services
    --->helpers
    --->server.js (app entry point)
->.env / . git (and other stuff)

```

Here I'm only focusing on the server side nodejs. The main components are :

1. services: consists of methods that does the CRUD(Create Read Update Delete) dirty work
2. controllers: takes user request (HTTP requests in our case) and tells the services what to do
3. models: represents the database schema
4. routes : were done using express to connect urls (user's get and post requests) to controllers
5. helpers: Although there is no clear cut definition in terms of javascript, according to people programming in Java helpers are basically a bunch of functions that help in the internal working of the app, but do not directly serve the user's requests. So it would be safe to assume that it would do the same in Javascript.

So this is how you can organize you Nodejs folder structure for your project.

Thanks for reading and would would love to hear any insights into this matter.

Follow me on Twitter: [@Nipeshkc](https://twitter.com/NipeshKc7)*

Visit my blog: [blog.arpankc.com](https://blog.arpankc.com)
Top YouTube Channels to Learn AI/ML/RL/DS
Tags: ai, machinelearning, ds, rl
Published: 2020-02-02 13:16:33

So some really important Youtube Channels in the field of Artificial Intelligence **(AI)**/ Machine Learning **(ML)**/ Reinforcement Learning **(RL)**/ 
Data Science **(DS)** are:-
1. Sentdex  https://www.youtube.com/user/sentdex
2. deeplizard https://www.youtube.com/channel/UC4UJ26WkceqONNF5S26OiVw
3. 3Blue1Brown https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw
4. Tech With Tim https://www.youtube.com/channel/UC4JX40jDee_tINbkjycV4Sg
5. Corey Schafer https://www.youtube.com/user/schafer5
6. Data School https://www.youtube.com/user/dataschool
7. Two Minute Papers https://www.youtube.com/user/keeroyz
8. Welch Labs https://www.youtube.com/user/Taylorns34
9. Luis Serrano https://www.youtube.com/channel/UCgBncpylJ1kiVaPyP-PZauQ
10. Simplilearn https://www.youtube.com/user/Simplilearn
11. Great Learning https://www.youtube.com/user/beaconelearning
12. DeepLearning.TV https://www.youtube.com/channel/UC9OeZkIwhzfv-_Cb7fCikLQ
13. TensorFlow https://www.youtube.com/channel/UC0rqucBdTuFTjJiefW5t-IQ
14. Deeplearning.ai https://www.youtube.com/channel/UCcIXc5mJsHVYTZR1maL5l9w
15. Code Bullet https://www.youtube.com/channel/UC0e3QhIYukixgh5VVpKHH9Q
16. edureka!   https://www.youtube.com/user/edurekaIN
17. Lex Fridman https://www.youtube.com/channel/UCSHZKyawb77ixDdsGog4iWA
18. The Artificial Intelligence Channe https://www.youtube.com/user/Maaaarth
19. freeCodeCamp.org https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ
20. CloudxLab https://www.youtube.com/channel/UC8mJ6DL1Q32UWyJUceoO8Jw
21. Alexander Amini https://www.youtube.com/user/Zan560
22. Jeff Heaton https://www.youtube.com/user/HeatonResearch

> IF YOU KNOW SOME OTHER YOUTUBE CHANNEL THEN FEEL FREE TO ADD IN THE COMMENTS
Daily Developer Jokes - Sunday, Feb 2, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-02 13:00:13

---
title: "Daily Developer Jokes - Sunday, Feb 2, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Feb%202%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e3bbae5.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why don't bachelors like Git?

___A:___ Because they are afraid to commit.
 -->
How to create release-notes, your users will read. #releasebox.io
Tags: showdev, productivity, devops
Published: 2020-02-02 12:45:58

Hey everyone 🙌,

i'm Patrick - founder of schnell.technology. In the last few years, i developed applications for different customers and tools for power-users and developers.

In this history, i tripped always over one part of my work - writing good release-notes, which your customers will actually read. 

Creating informative but not too techy releasenotes for your customers is key. A lot of developers spent either no time in creating release-notes or a lot of time, describing detailed changes for each release. The problem on this — most customers won’t read them. Either they are too common to be helpful or they are filled with a lot of technical informations, the most users don’t care.

## releasebox.io

So a new project was born - releasebox.io. With this tool, you’re able to create powerful, beautiful release-notes and keep the users in touch. Manage your releases including pre-releases, descriptions via Markdown or technical informations (and links to your project-/ticket-management) for your team-members.

The focus is to provide simple release-notes for your customers, but more technical on the other hand for your team-members. With a simple drag-and-drop-oriented user-interface you can make changes to your releases on the fly (check the demo at https://releasebox.io/acme-monitoring).

Try [releasebox.io](https://releasebox.io) and find out how easy it is to:
🚀 inform users about your incredible work
🎨 customize your beautiful project release-notes
⏱️ manage your changes with simple drag and drop
🔒 show technical informations only for those who are interested in
📢 spread the message and like us on twitter, facebook and other social-media
🎆 prepare your release-notes for the 2020ies right now
UISearchDisplayController crashes on iOS 13
Tags: swift, ios
Published: 2020-02-02 12:32:06

The UISearchDisplayController is fully deprecated on iOS 13 and was deprecated since iOS 8. I'm maintaining an APP that is live since 2012/2013 that was using it.

Last week we received a ticket reporting a crash when a user tries to enter on a part where there is a search bar on it.

One important thing to note is while testing the APP running directly from XCode or generating the .IPA everything seems to work fine *(our testers didn´t get any crash or any strange behaviour)*, only when the build is submitted to the APP STORE to test it through Testflight you get the crash. *We couldn´t reproduce the crash in a dev environment no matter what type of build we setup, how we setup the scheme or how we generate the IPA* **just like the APP STORE does for example** *to install on the device*.

That ViewController had some implementation of the UISearchDisplay that we removed, and also we notice that in the storyboard, the ViewController had some references...

![UISearchDisplayController on the storyboard](https://dev-to-uploads.s3.amazonaws.com/i/t8995zze0z785675jql4.png)

Hope that this help if you are maintaining and old iOS APP and start receiving crashes reports that you can't reproduce on your environment. If you need to replace the old UISearchDisplayController, take a look to [this tutorial from Ray Wenderlich]( https://www.raywenderlich.com/4363809-uisearchcontroller-tutorial-getting-started).
Is Go only for infrastructure?
Tags: go, javascript, node
Published: 2020-02-02 12:29:55

---
title: Is Go only for infrastructure?
published: true
description: 
tags: go,javascript,nodejs
---

So I have a node.js background and I am starting to get into Go. In node i build web services that handle a lot of business logic, I thought I could use Go for this exact purpose but looking online a lot of people say Go should be used for infrastructure tools instead. 

Is this correct? Should I not use Go for building business logic centered web services?

What companies are using Go for business logic?
CSS Modules in Nuxt.js
Tags: nuxt, css, vue
Published: 2020-02-02 12:03:55

---
title: CSS Modules in Nuxt.js
published: true
description: The second article in a series about working with CSS in Nuxt.js, this time focusing on how to use CSS Modules with Nuxt.
tags: nuxt, css, vue
canonical_url: https://redonion.se/en/css-modules-in-nuxt-js/
series: CSS with Nuxt.js
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6khc5mwndtsu85lwznew.png
---
The second article in a series about working with CSS in Nuxt.js, this time focusing on how to use CSS Modules with Nuxt.

Just like in Vue.js, support for CSS Modules is provided out of the box in Nuxt.js projects. (To learn more about CSS Modules in Vue, [see this article](https://dev.to/fridanyvall/css-modules-in-vue-js-2267).)

To alter the generated class names, edit the **nuxt.config.js** file:
```javascript
build: {
    /*
    ** You can extend webpack config here
    */      
    loaders: {
      cssModules: {
        modules: {
          //this is where you can alter the generated class names:
          localIdentName: "[local]--[Frida]_[hash:base64:4]",
        }
      }
    },
  },
```
In the example above, I’ve added my own name in the middle of the class name.

Add the module keyword to the style section of the component file:
```html
<style module lang="scss">
    .moduleclass{
        color: green;
    }
</style>
```
Use CSS Modules by binding the class name using JavaScript in the template part of the component .vue file:
```html
<template>
    <section>
        <h1 :class="$style.moduleclass">Contact</h1>
    </section>
</template>
```
It is also possible to use CSS Modules for just some and not all of the components in a project. Check out [the documentation](https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage) on how to set up opt-in usage.

##Importing Module Style Files
In Vue.js projects, it is possible to put styles in a separate filename.module.css file and import it in the script tag of a .vue file. (See the article [“CSS Modules in Vue.js”](https://dev.to/fridanyvall/css-modules-in-vue-js-2267) for more info.)

The same approach works for Nuxt projects:

```html
<!--CSS Module styles-->
<template>
   <p :class="$style.classname">Remember to add the classes with js.</p>
</template>

<!--Remember to add the '.module' suffix just before the file extension.-->
<style module src="./filename.module.scss" lang="scss">
    //Note that any other styles here are ignored
    //Only the styles in the src import are being used.
</style>
```

##Start Setup
Note that both setup, plugins and framework are evolving. **Changes will in time most certainly happen that make the techniques described in this post less relevant.**

I’ve used create-nuxt-app version 2.10.0 to set up the project. When setting up the project, I chose NPM as package manager and jsconfig.json as development tool (only choice available and recommended for VS Code).
ideras job search engine launch
Published: 2020-02-02 12:03:44

---
title: ideras job search engine launch
published: true
description: ideras.com is a free job search engine for job seekers to find job easily
tags: 
---

ideras.com is built with angular 8 and nodejs 12, the data is crawlered with nodejs, now ideras.com has almost 10 millions jobs on our database, you can find the latest job from many job sites.
We want to build a free [job search engine](https://ideras.com) with better expereince than those already exist job search sites, ideras.com is beautiful and easy to use, it's very fast and smooth.
it's a great [career websites](https://ideras.com) for job seekers to find new jobs.
Please let me know what you think about ideras.com.
Cadence: create and share drum patterns and sequences in the browser
Tags: createweekly, tonejs, vue, showdev
Published: 2020-02-02 12:01:51

As a part of my goal to [create something weekly in 2020](https://dev.to/josephuspaye/createweekly-create-something-new-publicly-every-week-in-2020-1nh9), I made Cadence in Week 4.

Cadence is a simple web app that uses the [Web Audio API](https://webaudio.github.io/web-audio-api/) via [Tone.js](https://tonejs.github.io/) and allows you to create and share drum patterns and sequences in the browser.

Specifically, it allows you to:

- Create 16-note drum patterns using 8 drum instruments: Ride, Open Hat, Closed Hat, Rim, Clap, Snare, Tom and Kick
- Set the beat tempo anywhere between 30bpm and 240bpm
- Save multiple beats locally in your browser
- Easily share your beats with others using a unique URL

## Try it

The app is freely available online at [focused-galileo-7aaf5d.netlify.com](https://focused-galileo-7aaf5d.netlify.com/).

I would love the hear the patterns you create. Feel free to share them in the comments below.

## View the source

The app is open source and available on GitHub at https://github.com/JosephusPaye/cadence.

Contributions, questions, or feedback welcome!
Drag to download: drag links from the browser unto the desktop to download
Tags: createweekly, javascript, showdev
Published: 2020-02-02 11:47:52

As a part of my goal to [create something weekly in 2020](https://dev.to/josephuspaye/createweekly-create-something-new-publicly-every-week-in-2020-1nh9), I made _Drag to download_ in Week 3.

_Drag to download_ is a browser extension that allows you to drag a link from the browser unto your desktop to download.

![Animated GIF demonstrating Drag to download](https://dev-to-uploads.s3.amazonaws.com/i/zz9q3duzdzucx20oiqeo.gif)

It uses a little-known drag-and-drop feature in Chrome as described in [this article](https://www.html5rocks.com/en/tutorials/casestudies/box_dnd_download/). Unfortunately this feature works only in Chrome (tested on Windows).

## Get it

You can try the extension by installing from the [Chrome webstore](https://chrome.google.com/webstore/detail/drag-to-download/nlbdfajoolkacbicncknldfoikncjdhb).

## View the source

The extension is open source and available on GitHub at https://github.com/JosephusPaye/drag-to-download. See the README for details on the design and how it works.

Contributions, questions, or feedback welcome!
Yhee: a time tracking browser extension for Chrome
Tags: createweekly, javascript, vue, showdev
Published: 2020-02-02 11:37:42

As a part of my goal to [create something weekly in 2020](https://dev.to/josephuspaye/createweekly-create-something-new-publicly-every-week-in-2020-1nh9), I made Yhee in Week 2.

Yhee is a time tracking browser extension that keeps tracks how much time you spend on different websites, and displays the results in beautiful charts. Tracking is strictly opt-in, and all tracked data is stored locally, never leaving your computer.

![Screenshot of the Yhee extension popup open on Twitter](https://dev-to-uploads.s3.amazonaws.com/i/mdf2kcnwix9kksk5oaz1.png)

![Screenshot of the Yhee extension dashboard](https://dev-to-uploads.s3.amazonaws.com/i/1ondhld25dxsy3y0bphg.png)

## Get it

You can try the extension by installing from the [Chrome webstore](https://chrome.google.com/webstore/detail/yhee-time-tracker/jfbnogkpfjchbnamkpbgacpnnegpgjgj).

## View the source

The extension is open source and available on GitHub at https://github.com/JosephusPaye/yhee. See the README for details on the design and how it was made.

Contributions, questions, or feedback welcome!
Robots
Tags: swift, beginners, webdev
Published: 2020-02-02 11:35:54

1.How might you program the robot to clean the house?

   A-pickUpClothes, washClothes, dust, sweep, mop.

2.Are there tasks that are common for all rooms of the house? (Vacuuming, dusting) Are there tasks that are specific to certain rooms in the house? (Clean the toilet, make the bed)
   A-(Kitchen)-wash dishes, preheat over, put dishes away.

3.Wich tasks can you assign to functions? (pickUpStuff, dust, sweep, vacuum)

   A-cleanDishes, wash, dry, put away.

4.How might you break up the overall task of cleaning a house into specific functions? (cleanTheKitchen, cleanTheLivingRoom, cleanBathrooms, etc.)

   A-dustHouse, sweepHouse, pickUpTrash, emptyTrash, mopHouse, srayAirFresh, washClothes, foldClothes.