teleren/devto huggingface dataset:
🚀10 Trending projects on GitHub for web developers - 18th September 2020
Tags: javascript, css, webdev, react
Published: 2020-09-18 16:44:41

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. React Pro Sidebar

Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus

{% github azouaoui-med/react-pro-sidebar %}

---

### 2. Conquer of Completion

Make your Vim/Neovim as smart as VSCode.

{% github neoclide/coc.nvim %}

---

### 3. Bot Framework SDK

Bot Framework provides the most comprehensive experience for building conversation applications.With the Bot Framework SDK, developers can build bots that converse free-form or with guided interactions including using simple text or rich cards that contain text, images, and action buttons.

{% github microsoft/botframework-sdk %}

---

### 4. Swiper

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

{% github nolimits4web/swiper %}

---

### 5. Strapi 

API creation made simple, secure and fast. The most advanced open-source headless CMS to build powerful APIs with no effort.

{% github strapi/strapi %}

---

### 6. Day.js

Fast 2kB alternative to Moment.js with the same modern API

{% github iamkun/dayjs %}

---

### 7. SurveyJS 

SurveyJS is a modern way to add surveys and forms to your website. It has versions for angular2+, jQuery, knockout, react and vue.

{% github surveyjs/survey-library %}

---

### 8. Hamburgers

Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

{% github jonsuh/hamburgers %}

---

### 9. Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

{% github IanLunn/Hover %}

---

### 10. Admin Bro

AdminBro is An automatic admin interface which can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminBro generates UI which allows you (or other trusted users) to manage content.

{% github SoftwareBrothers/admin-bro %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Alternative Ruby Symbol Literals
Tags: rubytapasfreebies, ruby, syntax
Published: 2020-11-08 18:24:10

---
title: Alternative Ruby Symbol Literals
published: true
date: 2020-09-18 14:53:04 UTC
tags: RubyTapasFreebies,Ruby,syntax
canonical_url: https://avdi.codes/alternative-ruby-symbol-literals/
---

Periodically I take episodes from the RubyTapas archives and publish them for free. This episode from October 2012 is about symbol literals, and how you can use alternative quoting syntax to embed and interpolate any kind of character sequence in a symbol. And also: why you might _not_ want to take advantage of this. Enjoy!

<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

 ![](https://fast.wistia.com/embed/medias/k1pxlthk7o/swatch)

## Video Script
As you know, a [Symbol](https://www.rubytapas.com/out/ruby--symbol) literal is a word with a colon in front of it.
```
:foo

```
You may also know that symbols aren’t limited to simple words; anything that can go in a [String](https://www.rubytapas.com/out/ruby--string), can go in a symbol. But how do we get arbitrary characters, like spaces and dashes, into a symbol?One way is to start with a string and use `#to_sym` to convert it to a symbol:
```
"foo-bar (baz)".to_sym # => :"foo-bar (baz)"

```
But there’s a more concise and idiomatic way to do it. If we precede a quoted string with a colon, it becomes a quoted symbol.
```
:"foo-bar (baz)" # => :"foo-bar (baz)"

```
You can interpolate values into the quoted symbol just as you would into a string.
```
post_id = 123
:"post-#{post_id}" # => :"post-123"

```
And it also works for single-quotes.
```
:'hello, "world"' # => :"hello, \"world\""

```
Finally, if that doesn’t satisfy your symbol-quoting needs, there’s also a percent-quote literal syntax. Just like %q for strings, you can quote a symbol with %s followed by any delimiter you want.
```
%s{foo:bar} # => :"foo:bar"

```
Of course, all these different ways of writing symbols don’t mean you should go nuts with generating symbols. Symbols are best used for constrained vocabularies, like the names of options that may be passed to a method. The [Ruby virtual machine](https://www.rubytapas.com/in/ruby-vm) has to keep a table in memory of all known symbols, so that it can assign a single unique integer ID to each. That means generating an unbounded set of symbols, from, say, user input can lead to memory leaks. So go easy on the symbol interpolation.That’s it for today. Happy hacking!
Vue props not persisting update
Tags: vue, help
Published: 2020-09-18 16:42:16

So I'm working on a node editor that allows you to do multiple selection and multiple move.

I have spent hours on this trivial problem with no joy.

*Steps to recreate issue*
- shift click two nodes
- move one node, (see two nodes move 👌)
- do the move again

You will see the node that was 'parented' by the move just snaps back to it's original props rather than remembering it's position?!

*Files of interest*
- Boundary.vue (parent)
- Node.vue (v-for children)

https://0g7eu.csb.app/
{% codesandbox 0g7eu %}
My Open Source Journey Starts Here
Tags: opensource
Published: 2020-09-18 16:35:49

I am Isabella Liu and I am enrolled in OSD600. I live in Toronto and am currently in a co-op position as Java Developer. 

I have completed four semesters' study at Seneca. The major reason that I chose OSD600 is our professor David Humphrey. I was lucky that I got David for my second half semester's WEB422 study. I learned a lot from David and impressed with David's professional teaching and enthusiasm in programming. This makes me desire to learn much more from him. After I get to know the outline of this course, I am more than happy that I made the right choice. Since I have no related background before at all, I have been so confused about which direction I should choose to focus on. Through this course, I can get more real-world information and I hope I can find something that I'm really interested in. 

[ML_course](https://github.com/epfml/ML_course) is the trending repo that I decide to learn more about. Since nowadays machine learning is so hot and popular, I would like to learn some modern techniques when I get the chance.
Highlight/Reply shortcut in github
Tags: github, beginners, webdev, codenewbie
Published: 2020-09-18 16:33:11

When in an issue, Highlight the line which needs reply.

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

Then press `r` to reply to that comment

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

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-09-18 16:21:51

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Hey everyone! I'm back for the week as @graciegregory is getting a head start on our company-wide vacation: 

{% link https://dev.to/devteam/the-dev-forem-team-is-taking-a-mental-health-holiday-1ldl %}

Looking back on the past few days -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![skateboard-rail](https://media.giphy.com/media/26tPlaxbzaO1kRG9O/giphy.gif)

Happy Friday!
VueJS 3.0 released
Tags: news, javascript, vue
Published: 2020-09-18 16:17:44

---
title: VueJS 3.0 released
published: true
description: VueJS 3.0 has been released
tags: news, javascript, vue
//cover_image: https://direct_url_to_image.jpg
---
After two years in the making, Vue.js 3.0 "One Piece" has been released! 

> Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.

A quick rundown of the new features:

- Layered internal modules
- New APIs for tackling scale
- Performance Improvements
- Improved TypeScript integration
- Experimental Features

Check out [their release for more information](https://github.com/vuejs/vue-next/releases/tag/v3.0.0). 

Who's excited to start using 3.0?
Join us at #AIDevDay ☁️
Tags: beginners, azure, machinelearning, challenge
Published: 2020-09-18 16:13:51

### Take the Azure Dev Challenge 🏆
1. Complete any one of the Microsoft Learning Path from [here](https://docs.microsoft.com/en-us/users/arkodyutisaha/collections/j2w2hjge0xq3r0?wt.mc_id=AID3018161_QSG_EML_461735&ocid=AID3018161_QSG_EML_461735&WT.mc_id=aidevday-devto-arsaha)
2. Share your MS Learn Profile and achievement badge with [#AIDevDay](https://twitter.com/hashtag/AIDevDay?src=hashtag_click) on Twitter 
3. Subscribe to [Microsoft.Source](https://azure.microsoft.com/en-in/resources/join-the-azure-developer-community/?wt.mc_id=AID3018161_QSG_PD_SCL_446884&ocid=AID3018161_QSG_PD_SCL_446884) newsletter and keep learning 

> Note: Valid submissions will receive an [Azure Hero Badge](https://www.microsoft.com/skills/azureheroes) via Twitter DM. Please ensure your Twitter DM is open 😉. If you've any questions regarding the Azure Dev Challenge, drop us a line on the comment section below. 

## About AI Dev Day 🎬
Hello everyone! Microsoft is excited to join [AI Dev Day](https://aidevday.konfhub.com/) as the main sponsor. AI Dev Day is a single day, virtual, developer-focussed, community-driven conference on AI and Cloud, taken over by professional AI and Cloud developers. The event has been tailor-made with the objective of encouraging and helping AI & ML developers upskill in the most face-paced career trend. The event is absolutely free and open for all. 
> Grab your AI Dev Day Conference tickets [here](https://aidevday.konfhub.com/) 🎟️

## Meet our Speakers 📺
Whether you are someone who works on AI and Machine Learning for a  living or planning to get started. We got you covered with an amazing line up of speakers from the community 💖 

✅ *[Amanda Wong](https://www.linkedin.com/in/wonggamanda/) & [Devanshi Thakar](https://www.linkedin.com/in/devanshithakar/) on Extracting Value from Text and Audio to Inform Business Strategy*
✅ *[Akanksha Malik](https://twitter.com/akankshamalik96) on AI to BI - One Stop Solutions in Azure Synapse*
✅ *[Amy Boyd](https://twitter.com/AmyKateNicho) & [Gary Pretty](https://twitter.com/GaryPretty) on Improve Customer Engagement and Productivity with Conversational AI*
✅ *[Haimantika Mitra](https://twitter.com/HaimantikaM) on Build your model using Azure Custom Vision and deploy it in a web app.*
> Find the entire conference schedule [here](https://aidevday.konfhub.com/#schedule)

![](https://media.giphy.com/media/muL2iYJR1MNPCdXxHv/giphy.gif)
*📢 See you all at the virtual stage of [#AIDevDay](https://aidevday.konfhub.com/)* 

*Follow [Azure](https://dev.to/azure) organization 🔖  for content/updates from Cloud Advocates and other Microsoft Technology professionals.*
Introducing the DOVU Token Grant Program 🚀🌔 £20k a month.
Tags: blockchain, news
Published: 2020-09-18 16:10:17

🚀 Big announcement at DOVU. 🎉

Our token grant program is now open for applications, it takes less than 3 minutes.

We will be distributing up to £20,000 a month in DOV tokens to developers and teams that want to build innovative Carbon Offsetting solutions using DOVU tech.

In the coming weeks, we will be adding more resources, support, and tools to help developers get started.

1) You'll get DOV token support for up to 6 months.
2) An invite to our private developer community.
3) Get exposure of your project on our social channels.

This. is. exciting. ❤️

We welcome any developer or team to apply that has a vision of building carbon offsetting solutions to apply.

A developer or team could get up to £6,000 in DOV tokens building carbon offsetting solutions with DOVU.

[Apply to the DOVU token grant program](https://dovu.earth/grant)

Reach out to me directly at matt.s@dovu.io if you have any questions I'll be happy to answer them.

Kind Regards

Matt 😊
Ask Octopus - Can I show a progress bar during a deployment?
Tags: octopus, tutorial, devops, logging
Published: 2020-09-18 16:05:21

---
title: Ask Octopus - Can I show a progress bar during a deployment?
published: true
description: You have a long-running task that performs several actions. Can you show the progress of the overall task during the deployment? Find out in this edition of Ask Octopus!
tags: octopus,tutorial,devops,logging
series: Ask Octopus
---

You have a long-running task that performs several actions. Can you show the progress of the overall task during the deployment? Find out in this edition of Ask Octopus!

{% youtube kXTuqqdSM9o %}

Do you have a question about how to use Octopus? Email advice@octopus.com and someone from our team will get you an answer. You might even see it in a future episode.

Join our community slack at https://octopus.com/slack
Building Projects vs Doing the next online course.What should You Do?
Tags: selflearning, codenewbie, projects, onlinecourses
Published: 2020-09-18 16:01:36

Hello All! This is the first time I am writing a blog!! This is completely new to me which makes it more interesting!!!
Coming to the point straightaway,recently I have seen students debating over whether to do online courses on sites like Udemy,Coursera, Udacity etc. or to build projects on their own in order to gain a new skill. While this is a very common confusion among students let’s talk about the aspects of both.

##Online Courses
Let’s talk about online courses.While sites like Udemy,Udacity etc. were already there from before, the online learning curve has seen a steep rise in this pandemic.While people are in their home,everyone is looking to use these sites to their advantage for learning new skills.Be it learning a new language or mastering the new framework currently in the market… curated courses are there for everything you are looking forward to learn!

####CAN ONLINE COURSES MAKE YOU A MASTER?
Well…truly you cannot be good at anything unless you give it a try.Online courses are good enough to introduce you to libraries, frameworks,the basics of a language.But unless you yourself go out there and explore more on your own it won’t benefit much.

####ARE ONLINE COURSES WASTE OF MONEY THEN?
No of course not.But learning every new course out there just for the sake of certificates definitely is.The job of these sites is to lure you into buying courses which sometimes may not be very useful for you.You yourself have to figure out what exactly you need which will help you get the initial boost.

##Building Projects
As I was saying earlier,no matter how many courses you get yourself enrolled into,if you truly want to master something,practice is the only key.
Building a project from scratch truly helps in strengthening your concept.You encounter thousands of difficulties…you search for the correct solution… you learn a lot of other things along the way.That’s how it should be.
After completing a course,instead of jumping into another,take some time.Build something with what you have learnt.Read the docs of the library/framework you came to know about in the course.If a project was built in the course improvise on that.Knowledge is not much of use if you are not applying it.

####WHAT SHOULD I DO THEN?
Do what suits you better.Some people are pretty comfortable going through the documentation and building something from scratch right from the start,others(including me) find a course more helpful to begin with.Totally depends on you.

##Thoughts
I think I have made my point.While courses can be helpful to get you an introduction,only practice can make you better day by day.

>_At the end of the day only one thing matters.**PRACTICE!**_

Woah! It’s been quite a long post.Hope you liked it.Feel free to drop a message if you did.
Top 5 Online Courses to Learn React JS in 2020 - Best of All
Tags: react, javascript, reactnative, codenewbie
Published: 2020-09-18 15:34:31

Howdy Folks, welcome to my first blog post. Up to this point, I was only writing project-based tutorials, but I thought why shouldn't I recommend the best products out there which I felt is the best in the universe? That's why I started writing this blog post...

Now to the point, If you are a web developer or someone passionate about front end web development and had already done learning HTML, CSS, and Javascript and now you are currently looking to learn some front end libraries like React or React JS or React.js (yes you can call it however you like), but are confused about which courses to choose, then you have come to the right place! 

Yes, I had experienced the pain now you are currently experiencing. Choosing the best up to date course is not an easy task. Only who had selected all paths and realized that "this is the best path" can only answer your search. Here I have curated a list of the top 5 best online courses to learn React JS in 2020. Hope this will help you.

Talking about React JS, React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. By far this is the top trending and most loved Javascript library behind JQuery.

According to the Stack Overflow Developer Survey 2020, JQuery is slowly losing ground to React.js, and React.js is at the top place making Angular and Vue.js far behind:

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

So this is by far the best time to learn React.js. And If you are wondering why you should learn a library like React.js, then ask this, Why Shouldn't you? Because companies like Facebook, Walmart, Uber, Airbnb, and Netflix are all using React in production. Learning React.js will also improve your chances of getting a job as a front end web developer. And more than anything else, it is a lot more fun to learn React.js as a hobby!

Without further ado, let's explore the best courses to learn React.js in 2020.

1). React - The Complete Guide (incl Hooks, React Router, Redux)

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


Instructor - Maximilian Schwarzmüller
Total Length - 40.5 hours on-demand video
Students enrolled - More than 298,871
4.6 Star Rating (out of 5)
This is by far the best course available on React JS. It is completely up to date, so you can take this course without any worry.

In this course, you will start with the very basics of Javascript and then learn to code in React, followed-up by testing and debugging your React application. Throughout the course, you will make a Burger Builder React Project which grows as you learn and apply new things.

In short, this course will start at the very basics and expla...

You can read the complete blog post here on my blog - [thecodingpie.com](https://thecodingpie.com/post/top-5-online-courses-to-learn-react-js-in-2020/)
GitHub CLI
Tags: github, githubcli, introduction, git
Published: 2020-09-18 15:31:35

Github just released a new command line tool called the GitHub CLI. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working.

##### GitHub CLI ??

`gh` is GitHub on the command line. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working.GitHub CLI is available for download on Linux, MacOS, Windows machines


#### Installation

##### For MacoS, `gh` is available via Homebrew and MacPorts.

```
brew install gh
sudo port install gh
```

##### For Windows, `gh` is available via scoop, chocolatey and as downloadable MSI
* scoop
```
scoop bucket add github-gh https://github.com/cli/scoop-gh.git
scoop install gh
```

* chocolatey
```
choco install gh  
```

###### For Linux

```
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-key C99B11DEB97541F0
sudo apt-add-repository https://cli.github.com/packages
sudo apt update
sudo apt install gh
```

#### Authentication:

Use below command to authenticate with your GitHub account. `gh` will respect tokens set using GITHUB_TOKEN.
```
gh auth login
```

##### For GitHub Enterprise instance
```
gh auth login --hostname <hostname>
```

You will be prompted to either authenticate using your browser, or to paste a token.

#### View Authentication status
```
gh auth status [flags]
```

##### Now we have Successfully installed the GitHub CLI. lets clone a repo and raise a PR

```
gh repo clone @username/@reponame
```

By this time, GitHub will ask to authenticate.Once Authenticated navigate to cloned repo

```
cd @reponame
```

##### Creating a new branch ,create a file in this branch and push it 
```
git checkout -b new_branch
touch test.js
echo "Testing" >> test.js
git push origin new_branch
```

##### To create a PR
```
gh pr create
```
Answering simple questions to above command creates a PR

##### To know all pull requests
```
gh pr checkout {<pull request number> | <url> | <branch>} [flags]
```

##### To view Diff
```
gh pr diff
```

##### To merge a PR
```
gh pr merge
```

##### To know if all test cases are passing
```
gh pr checks
```


##### To know open issues assigned to you.

```
gh issue status
```
By using below command , you can see any issues assigned to you or any issues that mentioned you

##### To know all issues 

```
gh issue list
gh issue list --state open
gh issue list --state closed
```
By using below command , you can see all issues


##### To create a PR
```
gh pr create
```
Answering simple questions to above command creates a PR

#### How to manage Aliases with github cli

A alias is essentially nothing more than a keyboard shortcut, an abbreviation, a means of avoiding typing a long command sequence

##### Creating an Alias
```
gh alias set
```

##### Share your alias with gist
```
gh alias list | gh gist create
```

#### To access the GitHub API directly

```
gh api
```

### Resources

[GitHub CLI 1.0](https://cli.github.com/)
Repository for HacktoberFest2020, Pull Here
Published: 2020-09-18 15:15:00

## What is Hacktoberfest? 

Hacktoberfest is a month long virtual festival event to celebrate open source contributions presented by Digital Ocean and DEV. It is the easiest way to get into open source!

During the entire month of October 2020, all you have to do is contribute to any open-source projects and open at least 4 pull requests. Yes, any project and any kind of contributions.

## Here is the list for Hacktoberfest2020

https://github.com/DrakeEntity/Repository-for-Hacktoberfest-2020

If you are maintainer so Pull Repo and enter beginner-friendly open-Source repository so Everyone can participate.

If you have **Telegram** application then search **hacktoberfest2020** and join telegram group to stay connected to the community.