teleren/devto huggingface dataset:
Design Approach to get Spring Service Implementation at Runtime
Published: 2020-09-15 14:59:24

In this post, what we are going to see is how to get the runtime implementation of any service in spring container. That said, there are plenty of ways to do that, but in this post, we are going to see the one which I think meets the requirement without lot of clutter.

1) Vehicle Service is an interface that holds the all possible operation a vehicle could perform.
2) The vehicle service can be implemented by any implementation class to define the behavior.
3) That said, we could potentially have many implementation.
4) But the challenge is the request that we receive could be for any of it. So at runtime, we need to determine to invoke the corresponding implementation based on the input data.
5) Also, there could be some common service which could be shared across by any vehicle implementation (say for example, stop — just cuts the engine); such implementation can be placed in a base class and all the implementation could extend it to get the common implementation or can decide to override it too if required.

Below is link to git project.

https://gitlab.com/learn-java-projects/spring-dynamic-impl-demo.git

Happy Learning!!!
How to use getBoundingClientRect() Javascript Method scroll effect (Tutorial with Practice)
Tags: javascript, getboundingclientrect
Published: 2020-09-15 14:39:18

---
title: How to use getBoundingClientRect() Javascript Method scroll effect (Tutorial with Practice)
published: true
description: 
tags: javascript,js,getBoundingClientRect
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/d3ytxdw1vaiaz0vn8alc.png
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d3ytxdw1vaiaz0vn8alc.png)
Hi Friends,
Today we are going to learn how to use a custom scroll effect when scrolling down.

There is a cool slider called [AOS](https://michalsnik.github.io/aos/)
but we are going to use vanilla javascript to use it as the same effect when scrolling the page.

first, we are going to add 10 sections. for emmet `section*10` vs code

```
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>

```

**CSS**

```
section {
            height: 300px;
            background: red;
            margin-bottom: .5rem;
            transition: .5s;
        }

```
and **javascript**

```
  let section = document.querySelectorAll('section')

        window.onscroll = (() => {
            section.forEach(function(v) {
                let rect = v.getBoundingClientRect();
                let y = rect.y;
                if (y > window.innerHeight) {
                    v.setAttribute('style', 'opacity: 0; transform: translateY(100%)');
                } else {
                    v.setAttribute('style', 'opacity: 1; transform: translateY(0%)');
                }
            })
        })

```

the getBoundingClientRect() method has some object such as:
* x
* y
* width
* height
* top 
* bottom
we have used y cordination and for more details about this getBoundingClientRect()  we can follow some usefull links.

below some usefull links to learn more about getBoundingClientRect() Js method.

* [https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

* [https://www.w3schools.com/JSREF/met_element_getboundingclientrect.asp](https://www.w3schools.com/JSREF/met_element_getboundingclientrect.asp)
* [https://www.digitalocean.com/community/tutorials/js-getboundingclientrect](https://www.digitalocean.com/community/tutorials/js-getboundingclientrect)

* [https://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms](https://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms)

Thanks, for today. If you interested in this short tutorial please like comment and follow.
Bye
Offline JS In Angular
Tags: javascript, html, angular, webdev
Published: 2020-09-15 14:35:36

In this angular application, we used offline js library which is most important for your web application. If you have no internet then, this library can help you to handle via showing a message like Gmail/Facebook on the top side in notification or alert format. just we first install angular then we install offline js using npm. After that, we configure in the angulr.json file and the offline alert is ready.

What is offline js?

offline js is one type of jquery library that is mainly focused on the internet. If your internet is off/lost then you can see the message on alert format notification. This is base on ajax request with minimal and simple user-interface. This library supports all modern browsers and no Dependencies required.

In this project, we used an offline js library and by default, we used the angular home page. Here we just made one folder which name is offline and after that offline folder, we create 3 files 2 is a CSS file and one is a js file. Then we add a path in angulr.json in styles side and script side. After the run the project with simple commend “ng serve”. After that open in the browser then go to the following step:-

Go inspect element(click f12)
got to application
then click on service workers and click offline

After that, you can see the alert notification message on the top side with a simple user interface.

Make it yours now by using it, downloading it, and please share it.

[Source Code](https://w3hubs.com/offline-js-in-angular/)
Sales CRM Dashboard integrated with Airtable
Tags: webdev, uiweekly, nocode, airtable
Published: 2020-09-15 14:22:53

Hey everyone!

We've at UI Bakery (a low-code tech startup) have recently released a sales CRM dashboard with our first integration – Airtable! 
Using it, you get your data updated in real-time & simultaneously with the updates in your Airtable spreadsheets.

No need to build from scratch, the dashboard is customizable and fully responsive, and free. 

You can try it here -> https://uibakery.io/templates/sales-crm-dashboard-integrated-with-airtable?utm_campaign=ui_bakery%20-%20template%20-%20Airtable%20-%20cacq%20-%20xx%20-%20views&utm_source=DevTo&utm_medium=general&utm_content=template_post
The Learning Landscape
Tags: learning
Published: 2020-09-15 14:22:32

---
title: The Learning Landscape
published: true
description: Analogy of hiking to learning
tags: learning
cover_image: https://images.unsplash.com/photo-1501555088652-021faa106b9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3453&q=80
---

# Hiking Analogy

I was hiking and thinking of my own learning journey and Sam Harris' book "The Moral Landscape". The analogy really holds of hiking and landscapes to learning in tech. As the analogy is pretty obvious and on the head, I'll continue here without spelling it out.

## Planning your hike

* Pick a mountain
* Pick your team
* What equipment will you need
* Consider hiring a guide
* Plan a path to the top

First, pick a mountain that's not out of your ability. Something similar to what you've hiked before. Remember, the less familiar or more difficult the mountain is, the more time you'll need to dedicate to it. If it's too difficult, you may need special equipment or a guide who's done the hike before. 

Bringing others who have about the same hiking ability as you helps make the hike more fun even if a little slower. You're also less likely to get lost when hiking with others.

Next, plan a route to the top. Some paths are longer but easier, others are very steep but you'll get to the top faster. Again, you may need special equipment or a guide for difficult paths so plan ahead.

## Begin your journey

* Hike in groups
* Make sure you're going up and not getting lost
* Pace yourself and take extra time on the steep parts

It's best to hike in groups because even if it takes longer it's more enjoyable. Be sure to let the slowest of your group lead so your group doesn't get split up. Agree on milestones where the group can stop to rest and recharge. 

It can help to have a navigator who's making sure the group is on the right path and making progress in the right direction.

You'll notice that steep and difficult areas can quickly burn out the group, emphasize good pacing and slow down on these areas so the group can keep going after.

## Regroup along the way

If there are clearly two very differently paced groups within your group you may want to deliberately break up the group.

Along the way you may see unexpected attractions. Discuss with the group if you want to take the time to go enjoy these.

If someone is sick along the way or too burnt out you may need to take an extra day of rest or some of the group may need to head back down before reaching the top.

## Celebrate success

At the top of difficult mountains there's often a book you can sign to show the world you got there. Be sure to enjoy the view from the top while you're there. You may notice other mountains in the area you might like to climb next!
Online alternatives to VSCode
Tags: vscode, javascript, react, beginners
Published: 2020-09-15 14:19:48

Hello fellow Dev's! I am currently looking for a way to code while I am at work. I cannot install any programs as I have no admin privileges. I am in search of an online IDE similar to VSCode that also has implemented GIT into the mix. Is there anything out there like that? It can be two different websites if that is what it takes. Thanks in advance!
Algos & Data-Structures with React Hooks
Tags: react, typescript, webdev, algorithms
Published: 2020-09-15 14:18:14

<p align="center">
  <img width="200" align="center" src="https://raw.githubusercontent.com/SugarDarius/react-use-algos/master/medias/img/logo.png" />
</p>

# Greetings 👋 !

I've started a new Open Source project called `react-use-algos`.

This is an npm package which proposes you a libray of React Hooks to use some collections, formulas and algos 💪🏻

This project is made to be open source and driven by the community so please feel free to send your feed back, ideas and of course your PRs are welcome 🙏🏻

And, it is written with [TypeScript](https://www.typescriptlang.org/) and released with [GitHub Actions](https://github.com/features/actions) 🤗

## Let's have fun 😜
If you want to try the package:

```sh
npm install --save @sugardarius/react-use-algos
```

## Check it 😁
You can check the project on [GitHub](https://github.com/SugarDarius/react-use-algos)!

<p align="center">
    This project is made with ♥ by <a href="https://github.com/SugarDarius">SugarDarius</a>
</p>
Java developer with 3 years of experience to work in São Paulo, Brazil
Tags: java, maven, kubernetes, docker
Published: 2020-09-15 14:08:13

Main responsibilities
•             Design, build and integrate modules in a service-oriented architecture
•             Collaborate with other internal and external developers in designing APIs and architecture proposals
•             Take measures to improve performance and reliability in the platform
•             Refactor and separate functionality into independent modules
•             Identify, evaluate and drive new technologies, standards, architectures and methods for improving the platform and development process
 
Education
•             At least a Master’s degree in an information technology or computer science related field.
 
Experience & Qualifications
•             3 years of development experience in Java
•             Experience of databases.
•             Experience of modern multi-tier systems design.
•             Experience in agile methodologies e.g. Scrum / Kanban
 
Valuable (one or more of the below)
•             Experience of working with distributed service architecture.
•             Rest API framework
•             Experience in Java EE and application servers.
•             Experience in test driven development (TDD) and testing frameworks.
•             Experience in building large, scalable, and reliable distributed systems
•             Experience in automation tools like Maven, Jenkins, GitLab etc.
•             Experience in Docker and Kubernetes.
•             Experience in design patterns and knowledge how to create maintainable, readable, modular and efficient code
•             Frontend languages like TypeScript or React
 
Who you are
•             You are a good communicator in both Portuguese and English
•             You have a passion for clean code and software craftsmanship
•             You have the ability and like, to learn new tools, technologies and workflows
•             You have a positive attitude and a will to contribute to a healthy team dynamic by seeing opportunities and always highlighting limitations in a constructive way
 
What we offer
The right person is offered a unique chance to develop within one of the fastest growing digital asset companies in the world.  You will be backed up by a highly skilled, enterprising, and positive team. You are given great opportunities to form your work and career as you grow. You will be positioned in São Paulo, Brazil.


Our office is in the Itaim Bibi neighborhood, the office hours are remote and part allocated.

If you are interested, please send your CV in English to comercial@adtoox.com with the subject "Vacancy via DEV".
We usually give a return in a maximum of 2 days.
Hey, it's my first post!
Tags: firstpost
Published: 2020-09-15 13:59:56

Hello Everyone,
I am Sanket, final year computer science engineering student.
It's great to be here.
I am looking forward to exploring blogs about web development, data science, python, cloud computing!
Here is link to my wordpress blog:
https://daredavil453624413.wordpress.com/

You can connect with me on linkedin:
https://www.linkedin.com/in/sankettambare/

Also, you can checkout my github profile:
https://github.com/daredavil01

Thank you for reading.
Looking forward to write more technical articles...!:-)
Do you spend a lot of time creating HTML emails?
Tags: email, newsletter, webdev, beginners
Published: 2020-09-15 13:59:48

---
title: Do you spend a lot of time creating HTML emails?
published: true
description: 50+ tested email templates you can use for your next project.
tags: email,newsletter,webdev,beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2xu8o5mmbvy0ki5erayg.png
---

As a developer, I always came across creating bulletproof emails that should look awesome in every email client. But it takes up more time than needed. Email clients make it hard to write the perfect code for emails.

So I decided to create a few templates that I can use every time I start a new project or change an existing email. However, I ended up creating 50+ email templates using MJML ( the best ;) ) email markup language and I thought to share it with the community. I present to you (drum roll ) [CodedMails](https://codedmails.com).


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

I hope these templates will help you rapidly create emails, which are tested and up to date with the latest email client changes. 

Drop me a comment if you have any feedback. 

Looking for your support and love :)
Thank you DEV! 💖
Tags: watercooler
Published: 2020-09-15 13:55:11

I'm grateful for this community.
I'm grateful to you people who encourage me.
I'm grateful for all my friends who correct me.
# I'm grateful for you who is reading this. ❤️

I wrote my first article on DEV on May 28, 2020, and in a span of 130 days I published 17 posts with 17K+ views, 1000 followers, and a **whole lot of learning!** 🎉

![Thank you](https://media.giphy.com/media/3o6nUQqlowTVIkz5XW/giphy.gif)

Writing on this platform gave me an immense amount of learning, which I couldn't have got without DEV. Every topic I wrote about, helped me understand it deeply enough that would never forget about it. 

I consider this just the beginning for me to get better at writing, learning more, and moreover helping people with the knowledge that I am gaining, one post at a time. 😊

I wish to learn more,
share more,
write more,
grow more. 

Thank you again.

Do check out one of my posts which was most liked by you guys!😁

{% link https://dev.to/rakshakannu/productivity-are-you-a-fox-or-a-hedgehog-3i72 %}

keep learning, keep coding, keep growing! 💖
Python Pattern Design Help!!!
Tags: python
Published: 2020-09-15 13:53:50

I am developing a service at work that generates a report on a weekly basis. The api I use to get the data can take a while so rather than blocking, the api returns a new url to the soon-to-be-completed report that I have to poll until the data returns. To generate my report, I have to make 5 calls to this api. In addition, data from 3 of the calls are related as they have to be combined and massaged to create a particular section of the my report. The data from the other 2 api calls can be copied to the report as returned. I was wondering what type of pattern should I use here. Async polling?
An Analogy for Multi Tasking
Tags: tips, commentary
Published: 2020-11-26 14:38:00

---
title: An Analogy for Multi Tasking
published: true
date: 2020-09-15 13:44:02 UTC
tags: tips,commentary
canonical_url: https://blog.jonstodle.com/an-analogy-for-multi-tasking/
---

A lot of times the words _concurrency_ and _parallelism_ are used interchangeably or used incorrectly. I'd like to present this analogy as a way to understand the difference.

# Synchronous Work

Let's start with the most straight forward term: synchronous. In programming this means that work is done in a sequential order, no working on multiple tasks at once. In the context of code, this means each line is executed after the one before it (disregarding loops, and what not).

Imagine a carpenter making a simple wooden chair: They saw and cut the different pieces, sand them down, paint them, wait for the paint to dry, then assembles the pieces, creating a finished product.

All of this is done in sequence, one after the other. Even waiting for the paint to dry is done in sequence, meaning that no other actions are done while waiting - not even working on other chairs.

# Concurrency

Concurrency is a sort of time share. Instead of waiting for a process to resume work, we'll do something else in the meantime. Why sit around waiting for a mouse click from the user while there's other work to do? We can get back to handling mouse clicks once there are any mouse clicks to handle.

To continue the analogy with the carpenter: This time when the carpenter makes the chair the steps are the same, but multiple chairs are made at the same time. After sawing, sanding and painting the wooden pieces, instead of waiting idly while the paint is drying the carpenter starts working on a new chair.

When there's time to spare, and there's work to do, we can do that _concurrently_.

# Parallelism

Parallelism only became a thing when CPUs gained multiple cores. Now computers were truly able to do multiple things at the same time. Instead of jumping back and forth between tasks when there are a bit of spare time, parallelism is doing multiple things at the exact same moment.

This time, the carpenter has been cloned. There are now multiple copies of the carpenter, all making chairs at the same time. They saw, sand, paint, wait and assemble at the same time.

Remember that each individual carpenter is still capable of working concurrently. They don't need to wait idly while the paint dries. Each carpenter works _concurrently,_ while working in _parallel_ with the other carpenters.

* * *

Hope this helps clearing the terms up a bit.

Happy coding!
My Favorite Way to Do a Changelog
Tags: changelog, nim, codequality, git
Published: 2020-09-15 13:42:42

If you publish code for others to use, it's very beneficial to also publish a Changelog. I won't rehash what's already written in [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).  But I will share my conflict-free method for maintaining such a log.

## The Method

Let's assume your changelog is in `CHANGELOG.md`. Instead of accumulating unreleased changes at the top of that file in an "Unreleased" section, put each entry in a separate file:

1. Create a `./changes/` directory
2. For any change worth noting, commit a new file in `./changes` named `CHANGETYPE-decription-of-change.md`. For example: `fix-issue-2345.md` or `breaking-no-longer-support-cobol.md`
3. When it's time to make a new release, gather up the files and add them to the top of `CHANGELOG.md`, grouped and labeled by change type.
4. Then delete the files.

By using this method you don't have to fix conflicts in `CHANGELOG.md`, either when merging or when backing out a change.

## Other Options

Instead of using markdown snippets, you could use a more structured format if you want more structure (e.g. TOML, YAML, XML, JSON, etc...). I haven't needed this yet.

## Example Script

It's fairly simple to automate this in your project's language.  Here's an example of doing this with [Nim](https://nim-lang.org/).

```nim
import os
import strutils
import strformat
import times
import tables

if paramCount() < 1:
  let prog = getAppFilename().splitFile.name
  echo &"usage: {prog} NEWVERSION"
  quit(1)

let today = now().format("yyyy-MM-dd")
let newversion = &"[{paramStr(1)}] - {today}"
let changedir = "changes"

# Option: You could make the script look in CHANGELOG.md and
# guess the next version based on the presence of fixes, breaking
# changes, or new features.

var changes = initOrderedTable[string, seq[string]]()
changes["breaking"] = @[]
changes["fix"] = @[]
changes["new"] = @[]
changes["doc"] = @[]
changes["misc"] = @[]

for file in changedir.walkDir:
  let changetype = file.path.splitFile.name.split("-")[0]
  if changes.hasKey(changetype):
    var prefix = ""
    case changetype
    of "breaking": prefix = "**BREAKING CHANGE:** "
    of "fix": prefix = "**FIX:** "
    of "new": prefix = "**NEW:** "
    changes[changetype].add("- " & prefix & file.path.readFile.strip)
  else:
    changes["misc"].add("- " & file.path.readFile.strip)

# Option: You could make this handle multi-line entries

echo &"## {newversion}"
echo ""
for entries in changes.values:
  for line in entries:
    echo line

# Option: You could make this update CHANGELOG.md in place
```

What the sample change snippets look like:

```
$ grep "" changes/*
changes/breaking-foo.md:I broke a thing
changes/doc-heyo.md:Fixed documentation
changes/fix-foo.md:Another thing
changes/fix-something.md:I did something
```

Running it:

```
$ nim c -r changelog.nim 1.2.0
## [1.2.0] - 2020-09-15

- **BREAKING CHANGE:** I broke a thing
- **FIX:** Another thing
- **FIX:** I did something
- Fixed documentation
```