teleren/devto huggingface dataset:
Things I wish I knew when starting my web dev journey
Tags: codenewbie, devjourney, devjournal
Published: 2021-04-24 20:58:31

---
canonical_url: https://tanikadev.hashnode.dev/things-i-wish-i-knew-when-starting-my-web-dev-journey
---

When starting your web dev journey it can be hard. Actually no, not that it can be, it pretty much will be hard. When learning something new there is a learning curve and you buck up into trouble. Here are some things I wish I knew to make that journey a little less bumpy.

**It's a marathon not a sprint**

You cannot learn everything in one go, or in a week, not even a month. So cramming is not going to make you a better developer, it most probably will just fluster you and what you learnt won’t even stick. So take your time, practice it all, but hold onto the essentials, the rest you can look up when needed.

**Don’t be afraid to call on your bestfriend**

There will be times when you're stuck and you're kicking yourself thinking why don't I know this? I should be able to work this out. I did, but then I realised there was this awesome tool called Google, when learning to code google is your best friend and using Google doesn’t mean you’re cheating or mean you don't know what you're doing. You’re not a machine you’re not expected to remember everything - that’s why machines have been created for us to use. Call on your best friend whether that be google, stackoverflow, MDN etc. They're essential tools that are free to use when learning to be a developer and even when you’re working as a developer.

**Code code code**

Once you’ve learnt something, test it out. Make something with it and once you've done that do it again, and again, and again in different ways. Experiment with it, understand how and why it works. The more you practice something the more it becomes permanent and hard wired in your brain.

**Teach**

Try to pass on the knowledge of what you’ve just learnt to someone else. Trust me it works wonders, you tap into your memory of the concept and then find a way to relay it to someone so they are able to digest it. While doing so you realise how much information you actually retained on the subject. You also get the joy of helping someone or annoying someone with your ramblings of code. Either way you learnt something new. Celebrate, you can go onto the next concept.
🧰 412 (and counting) of the best web design & development resources organised for your browsing pleasure
Published: 2021-04-24 20:49:15

# <a href="https://toolkit.addy.codes/" target="_blank">https://toolkit.addy.codes/</a>
**Link ↑**

Hey everybody!

Thanks so much for checking out my little project. Hope you find something new. I've worked hard to make sure only quality (imo) resources feature in this directory. It is not just a scrape of everything I can find.

I know there are quite a few of these style sites, but I have tried to improve on them by including real up to date website screenshots (a website's hero says much more than an icon!), a bit of pricing information where available, favourites functionality and some better organisation. Any feedback on the site itself would be very much appreciated.

**What are your go-to web dev links in your bookmarks bar? Are any of your favourite resources missing? I'd love to hear them!**
Freebie Interactive Flat Design UI / Only HTML5 & CSS3
Tags: codepen
Published: 2021-04-24 20:37:14

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs4l55mm5de8hkx6olsa.png)

 <p>Inspired by: 
<a href="http://graphicburger.com/flat-design-ui-components/" target="_blank">http://graphicburger.com/flat-design-ui-components/</a></p>

<p>Line-chart and donut-chart made by <a href="https://codepen.io/Kseso" target="_blank">@Kseso</a>: <a href="http://codepen.io/Kseso/pen/phiyL" target="_blank">http://codepen.io/Kseso/pen/phiyL</a></p>

{% codepen https://codepen.io/aradpardaz/pen/JjExJPO %}
Monolithic vs Microservice Server Architecture
Published: 2021-04-24 20:16:36

#Monolithic Architecture

This is considered to be the "traditional" method of application development. Monolithic applications are designed with the intent of handling multiple related tasks. Components of monolithic applications are NOT independently deployable; they depend greatly on other components.

###Pros
- Simple to develop
- Horizontal scalability
- Testability

###Cons
- Components in a monolithic application are interdependent. If one goes down, the whole application likely will.
- Updating can be troublesome since you have to test the whole application rather than each component as you update them.

#Microservice Architecture

Better known as microservices, microservice architecture structures applications as a collection of services. In a microservice application, components are independently deployable.

###Pros
- Components are independent of one another, making for quick testing and development of each component.
- Future proof (adaptability)
- Allows for applications to be developed, tested, and delivered quickly

###Cons
- Increased complexity
- Components may be independent, but they still need to work together to make the application work. A component may be able to function on its own, but it needs to be able to interact with the entire application.

##Youtube Video
https://youtu.be/VXk5aOLqxAA

##Other links:
https://microservices.io/
https://www.mulesoft.com/resources/api/microservices-vs-monolithic
How to change the WordPress Plugin Watson Assistant Chatbot BOX Size?
Tags: wordpress, webdev, css, ibmwatson
Published: 2021-04-24 19:29:31

The CSS code below changes the height from below to top but not from top to below. I want to decrease the chatbot BOX size from top to below but I am not able to do it.
@media (min-width: 640px) {
#watson-float {
top: 0;
right: 0 !important;
}

#watson-box {
width: 35vw !important;
height: 95vh !important;
}

#message-container {
height: calc(100% – 2.75em) !important;
}
}

I want the size of the box up to the red line in the image.
Ultimate NodeJs Resources
Tags: node, javascript, showdev, contributorswanted
Published: 2021-04-24 19:23:56

Hi

The below is my github repository which gives a combination of all the available resources of NodeJs, 

I will be updating the repository frequently for the updated content regarding Node Js

Use it 👇

[Ultimate NodeJs Resources](https://github.com/dhanushnehru/Ultimate-NodeJs-Resources)

For more technology related information connect with me

[Twitter](https://twitter.com/Dhanush_Nehru)
Why and what is HTML
Tags: html, webdev, website, firststep
Published: 2021-04-24 19:18:20

HTML stands for HyperText Markup Language and it is a primary building block of creating a website

HTML is the foundation of a website it contains the information that tells the browser what is on the page in terms of text, links, where to find images. It also gives priorities to text, is it a header? Is it a paragraph? Is it a sub heading.You can also style individual words in HTML to make them, bold, italic, underline etc. It is like the skeleton of a webpage, it tells you what kind of creature you are dealing with and how all the limbs are organised.

.HTML is for creating Web pages.HTML elements are represented by tags. HTML tags identify content elements such as “heading”, “title”, “paragraph”, “table”, and so on. Browsers do not display HTML tags but use them to display the content of the page.
vue 3 ecommerce
Tags: vue, javascript
Published: 2021-04-24 19:14:14

 i create a repo, a simple ecommerce template with cart and use a lot of things that a vue developer needs for basic app. ui maybe not perfect but these what i used in this project:
- a good folder structure(sort by feature)
- build a cart with vuex
- use plugins
- create components for vanilla js libraries
- countdown timer
- dropdown
- sliders
- gallery
- rating

source code: https://github.com/Tefoh/vue-ecommerce-template .
demo: https://vue-ecommerce-template.netlify.app/

i hope this will be useful for you :))
3D CSS Plane 😎 (Tap to Toggle + Mouse Move Parallax)
Tags: codepen
Published: 2021-04-24 19:07:02

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37j1f4n4dr24kfzgeon2.png)

 {% codepen https://codepen.io/aradpardaz/pen/PoWVmQd %}
Independant from http timeout
Published: 2021-04-24 19:02:41

<sub>Photo by <a href="https://unsplash.com/@louishansel">Louis Hansel</a> on <a href="https://unsplash.com/s/photos/call-center">Unsplash</a></sub>

We have a process to process a large amount of data, but it was bound to http timeout. And easily, we got 500 error.

![Whole Process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5x76z78vhfp0ygdqo7v.png)

[This diagram](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG4gICAgRnJvbnRlbmRDb21wb25lbnQtPj5Gcm9udGVuZFNlcnZpY2U6IERvd25sb2FkXG4gICAgRnJvbnRlbmRTZXJ2aWNlLT4-K0JhY2tlbmRDb250cm9sbGVyOiBJbml0aWF0ZURvd25sb2FkXG4gICAgQmFja2VuZENvbnRyb2xsZXItPj5CYWNrZW5kQ29udHJvbGxlcjogR2VuZXJhdGUgSWRcbiAgICBCYWNrZW5kQ29udHJvbGxlci0tPj5CYWNrZW5kTWFuYWdlcjogR2VuZXJhdGUgRmlsZVxuICAgIEJhY2tlbmRDb250cm9sbGVyLT4-LUZyb250ZW5kU2VydmljZTogU2VuZCBJZFxuICAgIEZyb250ZW5kU2VydmljZS0-PkJhY2tlbmRDb250cm9sbGVyOiBEb3dubG9hZCBGaWxlXG4gICAgQmFja2VuZENvbnRyb2xsZXItLT4-U3RvcmFnZU1hbmFnZXI6IFN0b3JlIEZpbGVcbiAgICBGcm9udGVuZFNlcnZpY2UtPj4rQmFja2VuZENvbnRyb2xsZXI6IERvd25sb2FkIEZpbGVcbiAgICBCYWNrZW5kQ29udHJvbGxlci0-PlN0b3JhZ2VNYW5hZ2VyOiBHZXQgRmlsZVxuICAgIEJhY2tlbmRDb250cm9sbGVyLT4-LUZyb250ZW5kU2VydmljZTogU2VuZCBGaWxlXG4gICAgRnJvbnRlbmRTZXJ2aWNlLT4-RnJvbnRlbmRDb21wb25lbnQ6IERpc3BsYXkgRmlsZSAgICAgICAgIiwibWVybWFpZCI6e30sInVwZGF0ZUVkaXRvciI6ZmFsc2V9) shows original solution as a sequence diagram.

We decouple the data retrieval from http call. First we initiate the work, but send an id as response.
Then, we store the response as a file on Storage, and serve it when the frontend request it.

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

[This diagram of the solution](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG4gICAgRnJvbnRlbmRDb21wb25lbnQtPj5Gcm9udGVuZFNlcnZpY2U6IERvd25sb2FkXG4gICAgRnJvbnRlbmRTZXJ2aWNlLT4-K0JhY2tlbmRDb250cm9sbGVyOiBJbml0aWF0ZURvd25sb2FkXG4gICAgQmFja2VuZENvbnRyb2xsZXItPj5CYWNrZW5kQ29udHJvbGxlcjogR2VuZXJhdGUgSWRcbiAgICBCYWNrZW5kQ29udHJvbGxlci0tPj5CYWNrZW5kTWFuYWdlcjogR2VuZXJhdGUgRmlsZVxuICAgIEJhY2tlbmRDb250cm9sbGVyLT4-LUZyb250ZW5kU2VydmljZTogU2VuZCBJZFxuICAgIGxvb3AgR2V0IEZpbGUgd2hlbiByZWFkeVxuICAgIEZyb250ZW5kU2VydmljZS0-PitCYWNrZW5kQ29udHJvbGxlcjogRG93bmxvYWQgRmlsZVxuICAgIEJhY2tlbmRDb250cm9sbGVyLT4-LUZyb250ZW5kU2VydmljZTogRmlsZSBub3QgcmVhZHlcbiAgICBCYWNrZW5kQ29udHJvbGxlci0tPj5TdG9yYWdlTWFuYWdlcjogU3RvcmUgRmlsZVxuICAgIEZyb250ZW5kU2VydmljZS0-PitCYWNrZW5kQ29udHJvbGxlcjogRG93bmxvYWQgRmlsZVxuICAgIEJhY2tlbmRDb250cm9sbGVyLT4-U3RvcmFnZU1hbmFnZXI6IEdldCBGaWxlXG4gICAgQmFja2VuZENvbnRyb2xsZXItPj5Gcm9udGVuZFNlcnZpY2U6IFNlbmQgRmlsZVxuICAgIGVuZFxuICAgIEJhY2tlbmRDb250cm9sbGVyLT4-LVN0b3JhZ2VNYW5hZ2VyOiBEZWxldGUgRmlsZVxuICAgIEZyb250ZW5kU2VydmljZS0-PkZyb250ZW5kQ29tcG9uZW50OiBEaXNwbGF5IEZpbGUgICAgICAgICIsIm1lcm1haWQiOnt9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ) shows the sequence diagram on how to decouple generation of the file from sending it.

Hope this help !
The implementation
Tags: programming, computerscience, leadership, writing
Published: 2021-04-24 18:17:32

In my previous post, I talked about how it is doing nothing when you read a book and just implement nothing.  

Someone complained, and she was right, in her point of view!  

You are driving to somewhere, and you just read on street plate, __DON’T TURN LEFT!__ And yet you turn left, what was that read for?  

Literally you did something because you read the plate, but practically you did nothing because you didn’t do what that street plate was telling you.
Who knows, maybe you will have trouble when you turn left!  

But that’s not big deal, I just wanted to mean that it’s better to implement something you read/learn especially when it can improve your life, skills or experience in something.

Speaking of implementation, this week was full of a lot of implementations and improvements.  

We (interns) enrolled in _final project, we implemented feedback from the client I talked about in one of my previous posts, I had another side project to work on_, what can I say? __It was just reaping what we sow.__

``You can’t really know where you are going until you know where you have been. Maya Angelou
``  

When I evaluate myself for this time of Bootcamp, I just see no changes between before joining the Bootcamp and being in Bootcamp.

I am like, you know what, I am not learning anything new!  

But when I compare __my codes__, __my presentation__, __my communication__, and __the way I handle situations now__, that’s where the difference comes, __the real difference__!  

“I have this small principle, every word before __but__, is bullshit!”  

We see the difference we made by seeing what we have built, and we build from what we have learned/experienced!  

Try to make difference by doing not saying, and compare your __before and after actions__!
Webpack tips: How to output multiple html
Tags: webpack, htmlwebpackplugin, javascript
Published: 2021-04-24 18:09:01

---
title: Webpack tips: How to output multiple html
published: true
description: I needed to create multiple html outputs with Webpack
tags: Webpack, HtmlWebpackPlugin, Javascript
//cover_image: https://direct_url_to_image.jpg
---

I'm developping a figma plugin with multiple UIs, so I needed to be able to do so. This requires to use HtmlWebpackPlugin for Webpack. So here it is in case you needed it also, this will save you a few hours of research maybe also I'm using grafcet.online (kind of scratch for professional programming) visual component or DSL (Domain Specific Langage) to avoid stupid configuration error  ;)

{% youtube SQme8Dc88a0 %}
Best practice for building a RESTful API
Tags: node, programming
Published: 2021-04-23 09:02:28

Lately, I have been learning how to use Node.js and Express to build APIs. There are no fixed standards to build APIs, but reading online I identified some common themes on how to build a functional and usable API. Some common themes were:

**Don’t return plain text**

Even if the response body is formatted like a JSON, if the response header is not set as application/json some clients may have issues parsing it.

**Use plural rather than singular**

For example, use /articles/ rather than /article/

**Avoid using verbs in URIs**

Use the HTTP verbs (e.g. GET, POST, PUT, PATCH, DELETE) to let the user understand what sort of action the endpoint will perform. 
For example, use POST: /users/ rather than POST: /users/newUser/

**Always return a meaningful status code with error message in the response body**

 If the request is not successful, the API should return an error status rather than an ok status like 200. It is also helpful for the user if there is an error message in the response body.

**Use trailing slashes consistently**

All the endpoints of an API should be consistent in using trailing slashes (e.g. /users/) or not (e.g. /users). Ideally, the client should be automatically redirected to the correct endpoint if they use the other version of the URI. Most frameworks will have such an option, so it is worth looking for it and using it.

**Use a framework**

As an API gets more complex, it is worth investing some time in learning an API framework, such as Django REST Framework for Python or Restify for Node.js. Using an API-specific framework will make it much easier to keep the API consistent and usable.
QR Codes for Scheduling and Bookings
Tags: algorithms, webdev, javascript
Published: 2021-04-24 17:39:41

QR codes allow us to embed/encode information as an image, which we all know as this large square filled with smaller black and white squares. The science and math behind QR codes isn't very easy, but there are a ton of articles and videos on YouTube that explain the process.

![business card qr code generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmtim1413tdh3oby2tsp.png) 

All modern phones have a built-in QR Code Scanner which decodes the information. If the encoded data was just text, your phone will show the message, but if it's an URL then it will prompt you to open it in the browser. It's a great way to promote your website or project. But we can also use it for embedding email addresses or special app events.

You can use our open source [GitHub repository](https://github.com/SpurwingIO/Appointment-Scheduling-Widgets/blob/main/QRCode/) which allows you to generate QR codes using various parameters, [Live demo here](https://spurwingio.github.io/Appointment-Scheduling-Widgets/QRCode/).

![QR code website javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k40jtpaxp8cc08rb4fmu.png) 

The file `index.html` contains the JavaScript code for encoding plain text to a QR code image.

```js
function update_qrcode(text) {
  text = text.replace(/^[\s\u3000]+|[\s\u3000]+$/g, '');
  console.log(text, text.length)
  document.getElementById('qr').innerHTML =
    create_qrcode(text, 4, 'M', 'Byte', 'UTF-8');
};

function create_qrcode(text, version, ECL, mode, mb) {
  qrcode.stringToBytes = qrcode.stringToBytesFuncs[mb];
  let qr = qrcode(version || 4, ECL || 'M');
  qr.addData(text, mode);
  qr.make();
  // return qr.createImgTag();
  return qr.createSvgTag();
};
```

The default settings allow you to encode 62 characters, which is usally enough for a simple URL or message. If you need to encode longer texts you can tweek the settings (`version` and `ECL`) using this [reference sheet](https://www.qrcode.com/en/about/version.html). The library we used for QR code generation is [this one](https://github.com/kazuhikoarase/qrcode-generator).

Since QR codes can encode URLs, we can encode a link pointing to our Appointment Scheduling or Availability Page. For instance our page on Spurwing which allows users to book a demo call: https://www.spurwing.io/contact

Similarly you can encode your email address as such `mailto:ilya@spurwing.io` When scanning that QR code your device will prompt you to open the Email app with your email in the recipient field.

## Conclusion
QR codes are a wonderful technological invention. Unfortunately they are not (yet) very common in the west, but in Asia they are used like crazy.
useReducer Hook for functional components.
Tags: react, redux, tutorial, javascript
Published: 2021-04-24 17:36:00

The `useReducer` hook comes in handy when you want to separate the state logic from the components. In the official doc of React, they have written it as an alternative to `useState`.

`useReducer` hook is usually preferable to `useState` when you have a complex state and you have to change multiple states at the same time.

```javascript
const [state, dispatch] = useReducer(reducer, initialArg, init);
```

arguments of `useReducer`:

1) **reducer**
   A reducer will be a function that takes two arguments.
   the first argument is the **initialState** and the second will be the **action**. It will return the new state based on the action provided.

2) **initialArg**
   initialArg is the initial state which is passed to the reducer.

3) **init** (optional)
   It's a function that is used to create the initial state lazily. If you pass a third function argument to the `useReducer` hook, it passes the second argument to that function and uses the return value for the initial state.
    
## Example
Let's create a counter app, in which the count will increase or decrease based on the button we click.

### Step1 (create the component) 

```javascript
import React from 'react'
const CounterApp = ({initialCount=0,step=1}) => {
const count = initialCount;
const add = () => console.log('add');
const subtract = () => console.log('subtract');
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}
```

### Step2 (create the reducer function)
```javascript
const countReducer = (state,dispatch) => {
const {type,step} = dispatch; 
switch(type){
    case 'ADD':{
    return state + step
  }
   case 'SUBTRACT':{
    return state - step
 }
  default:{
   return state
  }
 }
}
```
here the **state** is the current state and **dispatch** (can also be said as action) is the argument that is passed in the **setState**. We are checking the type of action passed by the user and based on that we will set the new value. It works same as the reducer of Redux.

### Step3 (use the Reducer with our component)
```javascript
import React , {useReducer} from 'react'

const countReducer = (state,dispatch) => {
const {type,step} = dispatch; 
switch(type){
    case 'ADD':{
    return state + step
  }
   case 'SUBTRACT':{
    return state - step
 }
  default:{
   return state
  }
 }
}

const CounterApp = ({initialCount=0,step=1}) => {
const [count,setCount] = useReducer(countReducer,initialCount);
const add = () => setCount({type:'ADD',step});
const subtract = () => setCount({type:'SUBTRACT',step});
return (
<>
<p>{count}</p>
<button onClick={add}>Add</button>
<button onClick={subtract}>Subtract</button>
</>
)
}

const App = () => {
  return <CounterApp />
}

export default App;
```

Out CounterApp is ready. :tada:

We have used the useReducer hook for a simple counter app. I will suggest using the useState hook for simple cases and the useReducer hook for complex cases. 

Thanks for reading my post. :smile:
Let me know if you have any queries.
How to convert Java Object into/from XML – with Castor & Spring Boot
Tags: java, springboot, castor
Published: 2021-04-24 17:34:36

https://grokonez.com/java-integration/convert-java-object-intofrom-xml-spring-boot

How to convert Java Object into/from XML – with Castor & Spring Boot

In the tutorial <a href="https://grokonez.com/java-integration/convert-java-object-intofrom-xml-spring-boot" target="_blank">How to convert Java Object into/from XML</a>,  <a href="https://grokonez.com" target="_blank"><strong>JavaSampleApproach</strong></a> will introduce way to <strong>Marshalling</strong> & <strong>Unmarshalling</strong> by an open source XML binding framework <strong>Castor</strong> with <strong>SpringBoot</strong> project.

Related Posts:
1. <a href="https://grokonez.com/java/java-advanced/gson-converting-java-object-tofrom-json" target="_blank">Gson to convert Java Object to/from Json</a>
2. <a href="https://grokonez.com/java/java-advanced/jackson-converting-java-object-tofrom-json-string" target="_blank">Jackson to convert Java Object to/from Json String</a>

<!--more-->
<iframe width="853" height="480" src="https://www.youtube.com/embed/UJ4WqLW6JyQ?rel=0" frameborder="0" allowfullscreen></iframe>
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technologies for convert Java Object into/from XML tutorial</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
- Castor
- SpringBoot - 1.5.7.RELEASE

<h2>II. Overview</h2>
<h3>1. Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2017/01/Java-Object-into-from-XML-project-structure.png" alt="Java Object into from XML project structure" width="730" height="528" class="alignnone size-full wp-image-2603" />

<h3>2. Step to do</h3>
- Create <strong>SpringBoot project</strong>
- Create <strong>simple Model</strong>
- Create <strong>XML Converter</strong>
- Configure <strong>CastorMarshaller</strong> & <strong>XmlConverter</strong>
- Create <strong>Mapping file</strong>
- Develop main class for checking <strong>Marshalling</strong> & <strong>Unmarshalling</strong>
- Run & Check Results

https://grokonez.com/java-integration/convert-java-object-intofrom-xml-spring-boot

How to convert Java Object into/from XML – with Castor & Spring Boot