teleren/devto huggingface dataset:
Store text inside variables instead of inline.
Tags: javascript, react, beginners, tutorial
Published: 2021-11-29 09:37:59

Why does text stored inside variables give you flexibility and control?

Before I wrote this article, I’ve tried a couple of times to write down my thoughts. Let me explain first what I called inline:
```tsx
<CopyText.Heading tag="h2">
  Lorem Ipsum dolores set.
</CopyText.Heading>
```
This example showed you what I meant as an inline text.

Let’s go straight forward to the point:
When you are a programmer, and you have been writing the code. One of the most important parts is clarity of your own code. The clarity sometimes defines if you’re engaged. 

I wrote some rules how our code could be more efficient by using vars instead of pure text.

Firstly, when you got the message from the marketing team with new needs, you as a programmer gonna replace the text manually. Trust me, it isn’t easy to find text covered by components. Since I have been using const instead of inline text, my life become easier.

```tsx
const title = `Title`;
const description = `Description`;
    
// component 
<Component>
  <Title>{title}</Title>
  <Description>{description}</Description>
</Component>
```

Secondly, client or even you during the project lifecycle can decide to use API to manage the page. When you got all text stored inside variables, the change is easy-peasy to the implementation.

```tsx
// old variables
const title = `Title`;
const description = `Description`;
    
// new API
const { title, description } = API();
    
// component 
<Component>
  <Title>{title}</Title>
  <Description>{description}</Description>
</Component>
```

Thirdly, in some cases, the structure requires displaying column of the same components with different content. It’s easier to use map and display each component in simple way, than copying one by one - this solution reduce code and complexity.

```tsx
const data = [
  {
    title: `Title`,
    description: 'Description',
  },
  {
    title: `Title`,
    description: `Description`,
  },
  {
    title: `Title`,
    description: `Description`,
  },
];
    
// component 
<Parent>
  {data.map(({ title, description}) => (
    <Component>
      <Title>{title}</Title>
      <Description>{description}</Description>
    </Component>
  ))}
</Parent>
```

**Key takeaways:**
* const variable is easier to find and replace
* const variable reduce complexity of components
Personal websites and blogs, custom quotes in CSS, blockchain and more

My 10 favorite Tech Twitter tweets from this week:
Tags: webdev, javascript, beginners, programming
Published: 2021-11-29 09:20:50

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

How to create a simple personal blog

codingyuri

{% twitter 1463137177169281033 %}

Looking to build a personal website? Read this first

tom_hirst

{% twitter 1463108088144138242 %}

How to add custom quotes with CSS

IMAC2

{% twitter 1463132438486556673 %}

Freecodecamp is the first website every newbie dev should visit

TheAnkurTyagi

{% twitter 1462824288554307588 %}

Learning how to code in an interactive way is way more fun

denicmarko

{% twitter 1463461216253362180 %}

People always underestimate HTML and CSS

luciantartea

{% twitter 1463146290171322376 %}

Learn the fundamentals first for real

WellPaidGeek

{% twitter 1463892292255760385 %}

Balance is everything

catalinmpit

{% twitter 1463224348341321740 %}

Great explanation of some basic terms from the blockchain field

nachoiacovino

{% twitter 1463895699981058049 %}

Being open to new opportunities is key

razacodes

{% twitter 1463415517235056641 %}

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)_
Gotchas when learning SolidJS with (p)react background
Tags: javascript, solidjs
Published: 2021-11-29 05:37:05

I recently took on a new project and since I was following solid.js for a while, I thought I'd give it a try. And to reduce the time needed to develop the project I decided to port components from another project I built previously, using preact.

I replaced `useState` with `createSignal` or `createStore`, `useEffect` with `createEffect`, etc., with their appropriate syntax (no dependencies for `createEffect` etc). Since solid shares a lot with react, I thought these fixes were enough. Boy was I surprised. I'll list my findings below. I might be wrong on some details so feel free to correct me.

## Solid doesn't like custom hooks exported as default

I had a custom hook to show a loader, whose state is controlled in a context.
```js
// loader.jsx
export default function useLoading() {
    ...
    return () => {...}
}

// component.jsx
import useLoading from './loader.jsx'
...
const loading = useLoading()
loading(true)
...
loading(false)
```
And the loader doesn't show. Then I copied over the hook definition to `component.jsx` and it worked. So I tried converting it to a named export, and it worked.

## Using state outside of returned JSX is not reactive.

I think this is because components only run once, but 
it took me hours to get this:

```js
...
return state.loading && <Loader />
```

What do you think happens when `state.loading` changes? Nothing. All changes must be inside the JSX for the component to be reactive.

```js
...
return <>
  {state.loading && <Loader />}
</>
```

# Using `For` as a top-level return value with a changing list creates an infinite loop

Even when the `For` is inside a top-level fragment.

```js
...
return <For each={state.list}>
  {...}
</For>
```
Or
```js
return <>
  <For each={state.list}>
    {...}
  </For>
</>
```

Both of these create an infinite loop. It must be at least one level deep.
```js
return <div>
  <For each={state.list}>
    {...}
  </For></div>
</div>
```

As I said in the beginning, all of these may be due to my wrong understanding, but they did take a lot of hours for me to find, and I wanted to share them here. Thanks for reading.
CDK V2 Snapshot Testing with assertions (alpha lib)
Published: 2021-11-29 09:18:05


With CDK V1 and CDK V2 the testing libraries created a little bit of confusion - at least on my side :) . What to import and how to test.

So I just wanted to share a snapshot code snippet in Typescript to use a snapshot test in CDK V2.

Assume you have a "user" stack, which you want to refactor. So, make a snapshot test:

```js
import { Template } from "@aws-cdk/assertions-alpha";
import * as cdk from 'aws-cdk-lib';
import { User } from '../lib/user';


describe("User", () => {
    test("snapshot after refactor", () => {
        const stack = new cdk.Stack();

        const env = {
            account: '5555555555',
            region: "eu-central-1"
        }
        const user = new User(stack, "user", { env })
        const template = Template.fromStack(user);
        expect(template).toMatchSnapshot();


    });
});
```

If you have a file, e.g. "user.test.ts" in your "/test" subdirectory, the first `npm run test` will create a snapshot in `test/__snapshots__/`.

First time you see:

```bash
 PASS  test/user.test.ts
  user
    ✓ snapshot after refactor (288 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        4.698 s, estimated 6 s
Ran all test suites.
```

If you now change **anything** and a different CloudFormation Template is generated you will notice.

I just changed one username from "gernot" to "gernot2" and npm run test gives:

```bash
...
          ],
    -         "UserName": "gernot",
    +         "UserName": "gernot2",
```

## When is this useful?

If you refactor code like creating a base Construct/Object.
At first, you dont`t want to change any functionality. 

This snapshot test will prove that.

Happy CDK-ing!

Thanks for a nice picture:

Photo by <a href="https://unsplash.com/@marcobian?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Marco Bianchetti</a> on <a href="https://unsplash.com/s/photos/snapshot?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Discovering the Entando Standard Banking Demo
Tags: javascript, microservices, jhipster, opensource
Published: 2021-11-29 09:09:40

Did you know Entando provides a set of Microservices, Micro Frontends and CMS components to demonstrate the capability to compose applications?

This is the Standard Banking Demo!

Today, I’m inviting you to discover this application through the four different bundles we built with React and Angular micro frontends and Java Spring backends.

From the source code to the packaged artifacts, called bundles, we will discover the capabilities of these components to resolve a business issue.

In this video we will dive into the global architecture, the way to install the Standard Banking Demo, discovering the code source, how to configure the micro frontends on the fly and how the Entando App Builder can help us on the final composition.

This Standard Banking Demo is a great starting point for having a global overview of what a Composition Platform looks like and how it successfully makes components working together.

I hope it will help you on this path and you will enjoy it!

{% youtube jPq6cI4EK2U %}



## Additional resources

Start with the Standard Banking Demo Tutorial

[https://dev.entando.org/v6.3.2/tutorials/samples/install-standard-demo.html](https://dev.entando.org/v6.3.2/tutorials/samples/install-standard-demo.html)

The Standard Banking Demo blog series

[https://www.entando.com/page/en/standard_banking_demo_introduction?contentId=BLG5066&modelId=64](https://www.entando.com/page/en/standard_banking_demo_introduction?contentId=BLG5066&modelId=64)

Star with Entando

[https://dev.entando.org/](https://dev.entando.org/)
Advantages and disadvantages of GraphQL
Published: 2021-11-29 09:08:03

### GraphQL:

GraphQL is a syntax that `describes how to ask for data` and is generally used to load data from a server to a client.

`Advantages:`

1. A single endpoint that takes multiple parameters dynamically.
2. It allows more dynamic development.
3. Allows rapid iterations and fast feedback from businesses.
4. No over fetch and under fetch of data.
5. It saves backend development time.
6. It is faster than other communication APIs because you can cut down the request and the fields which you need only.
7. Strongly typed query language.
  - Because it is strongly typed most of the errors will be reduced at compile time itself.
8. No versioning of APIs is required.
9. The client will query only the required data needed.
10. It makes it easier to aggregate data from multiple sources.

`Disadvantages:`

1. If the query requested by the server is too large then the response will be slow.
2. More complicated to implement cache, because for a single endpoint the query will be changed.
3. Rate limiting
   - In REST we can specify the number of requests allowed in a day, but in GraphQL it is very complex for that statement.

Thank you...
Introduction Html And Css
Published: 2021-11-29 08:52:20

HTML stands for Hyper Text Markup Language,

Advantages of learning HTML

Create Web site - You can create a website or customize an existing web template if you know HTML well.

Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing is a must skill.

Understand web - If you want to optimize your website, to boost its speed and performance, it is good to know HTML to yield best results.

Learn other languages - Once you understands the basic of HTML then other related technologies like javascript, php, or angular are become easier to understand.

HTML Tags

    <!DOCTYPE...>
This tag defines the document type and HTML version.

2	<html>
This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.

3	<head>
This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.


4	<title>
The <title> tag is used inside the <head> tag to mention the document title.

5	<body>
This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.

6	<h1>
This tag represents the heading.

7	<p>
Th
An HTML element is defined by a starting tag,
HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements.

The four core attributes that can be used on the majority of HTML elements (although not all) are −

Id
Title
Class
Style
How I earned my postman student expert badge
Tags: javascript, webdev, beginners, programming
Published: 2021-11-29 08:30:04

In this article I will be sharing my whole journey about how I got it, benefits of earning this badge, what you can learn from it, etc... So, without wasting any time let's get started

##About Postman  

In today's world we are totally dependent on API's (Application Programming Interfaces), weather we want to book a cab or shop something online, every task happens via API's as it helps the client-side application (such as websites, mobile apps, etc.) to interact with the server and postman is a tool (one of the best) which is used to test an API. We can send request, write tests and even add scripts in postman to test the behavior of an API.

##Student Expert Badge & How to earn it?

To be honest this badge is just a swag to showcase that you have completed and successfully passed the expert training.
To get this training, you need to need to enroll in the student expert program ([Link](https://www.postman.com/company/student-program/#student-expert-program)) by submitting a google form.
After this you get a welcome email for the postman student community about the next steps to follow and the invitation to join the student community on discord. Now visit the training link then fork the project to your own workspace and start you training. As per my experience the resources are easy to understand and don't worry if you stuck at somewhere, simply ask the community and they are ready to help you. After you have completed the training, passed all the tests and submitted your collection link. Kudos ow you have become a postman student expert, welcome to expert's community, share your swag badge link with every one 

##Things to remember
After you have got your student expert badge, this doesn't mean that you have become an expert in using postman So to become a real expert you next to practice a lot using postman and the
best way to do so is to join the postman bootcamp. 
Another most important thing is taht you must have a little bit of knowledge JavaScript, Json (JavaScript Object Notation) and API, just watch a few tutorials on YouTube for free and you will be ready.

##My journey in the Postman Student Expert Program

I haven't faced any such difficulties in the training as the course was designed for beginner's also move over, I have enough knowledge about postman as I have used it earlier for testing APIs, but to be honest I got stuck at one test (as I have unchecked one query parameter) but the community is so friendly that it helped me to get out of it.

##Lastly
Kudos now you have got all the info and what steps to follow to be a part of this amazing community. Still if you have any questions, you can post a comment.

##Connect
 <a href="https://linktr.ee/kumarkalyan">
  <img align="left" width="100px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" />
</a>
Use GIT REBASE instead of GIT MERGE
Tags: github, git
Published: 2021-11-29 08:20:49

This post cross-published with [OnePublish](https://www.onepubli.sh)

I want to show how to use git rebase to keep your commit path clean and maintainable.

##What is `git rebase`?

It behaves like merging by applying all changes from the target branch but not creating an extra commit for that where it keeps the commit log clean and readable. Simply, it takes your new commits at puts them at the very top of commit log.

Let's assume that you're implementing a new feature by creating a new branch from the master. Meanwhile, you're co-workers also working on other features and some of them already merged their PRs to master branch. 

At this point, your branch will be no longer up-to-date with master so you need to apply those changes before attempting to create any pull request.

Usually, there're two options for such cases:

Using `git merge`
Using `git rebase`

Let's say you decide to use `git merge` to apply changes from `master` where it will create an extra commit for each merging. Imagine how messy the git log will be if we continuously use merging to keep our branch up-to-date. It also makes hard to track real commits since the majority of them will be created automatically by merging.

##Example scenario

Assume that we want to rebase with the `master` branch to apply most recent changes:

```
git rebase master
```

If there will be any conflicts while rebasing, then you have to resolve them and also adding changes once you finished:

```
git add -u
git rebase --continue
```
In case you decided to abort the process:

```
git rebase --abort
```

Once rebasing finished, you will able to see new changes in your branch.

I prefer to avoid git merge at all except in PRs where it have to merge with master by creating a commit about it. So, when analyzing git log it will be much easier to understand purpose of commits.

##Video Explanation

{% youtube laKgInNOie4 %}
Feature update: Markdown Toolbar
Tags: meta, product, ux, changelog
Published: 2021-11-29 08:16:43

_(Psst - we also just brought it to the comment section! Read more [here](https://dev.to/devteam/feature-update-markdown-toolbar-coming-to-comment-editor-544o))_

Hello, DEV community!

Today, I have a quick (but exciting!) update for those of you who write on DEV. 

## We now have a markdown toolbar in our editor!

We have always prided ourselves on minimalistic and concise design. When possible, we keep things simple and straightforward. Our editor is tricky, though. While we have gotten consistent feedback that our community appreciates the simplicity, we have also gotten requests for more instruction and guidance when writing, especially around markdown formatting syntaxes. Though the majority of our community members are familiar with markdown syntaxes, we certainly don’t want those who are not familiar with them feeling uncomfortable and unwelcome to share their experience on DEV. 

To improve this, we are adding a little human touch to the editor with the introduction of the markdown toolbar. We believe the toolbar should give writers _just enough_  guidance to have an enriched writing experience without formatting getting in the way of the writing itself. If you like keyboard shortcuts (such as cmd/ctrl+b to bold), we got you covered, too. In other words, we aim to remove the distractions you may encounter, so you can focus on writing. (Hint: we also have something exciting planned around [simplifying liquid tags](https://github.com/forem/forem/issues/15099) :sparkles:)

We are also aware that our community enjoys learning about how our features come together. If that is your cup of tea, stay tuned! Our own wonderful [Suzanne](https://dev.to/s_aitchison) (Frontend Software Engineer @ Forem) will be sharing her experience developing the Toolbar. 

## Have you written a post yet?

Have you written a post since this update? Have you noticed the Toolbar? How do you like it? Are you a Toolbar user or do you prefer to type out syntaxes? If you haven’t used the Toolbar yet, I encourage you to check it out and let us know what you think! 

If you have _never_ written a post on DEV, consider this your personal invitation from me to start! Check out [these ideas](https://dev.to/andrewbaisden/100-blog-topic-ideas-for-your-next-article-no-more-writers-block-2e0j) for your first DEV post from community member @andrewbaisden for your first DEV post.


_Cover image screenshot by [Suzanne Aitchison](https://dev.to/s_aitchison)._

Follow me for Forem updates:
{% user amyatforem %}
One step at a time, week 5  Task-force
Tags: awesomity, codeofafrica
Published: 2021-11-29 08:15:37

> Every step is progress

The week continued with a lot of intense work especially codding sessions.

where we had to coordinate ourselves in our teams either in what order we do the work and also how the work was to be done.

### Room for Errors

the week was supposed to be all about test, logs, and documentation, i can say we started a little bit  slow not actually realizing how much the work was and we didn't give ourselves time for error which i can say really stressed us on the demo day.

### cultural Differences

we also had intercultural communication and solving conflicts with Silke where we learned that culture is a very big thing and you cant really understand it all at first time, and also to be cautious on how you judge people from different culture than you cause they might have many reasons you don't know.

we also learned to solve conflicts which happens during intercultural communication,
we saw that conflicts are likely inevitable they'll happen and it's up to us to solve them.

### Talk is cheap show me the code

back to the coding work we rounded up the week with a team demo, which took place on Friday and presented our work to the Awesomity team and got some feedback to make the product better.

really time do fly but memories don't we are going in the last week of the task-force which i think it's went great and had a lot of good memories and gained more knowledge, i believe it left me a better professional than i was before.

```
let testing = new test()
testing.run()  //ooops unexpected error
testing.whyErrors()  //  but it was running before

```
Week 5 in task force at Awesomity & Code Of Africa
Tags: awesomity, codeofafrica, taskforce
Published: 2021-11-29 08:13:03

Greetings my once again beautiful people🥰

Time flies very quickly, it is already week five and it only feels like week 2 or 3 in my mind. Well, That's because of the work we had to do for the last five weeks, which doesn't make us see time fling.

Week five had a lot of technical stuff going on, regarding the app we are working on as I described it in my last posts. Mainly week five tasks were composed of: first applying all the feedback from last week's demo, adding a security level of the app, testing and documenting all the app, and logging the app. So as you may think of, it was a lot of things to do, and which also involved learning new things because most of us were new to these concepts, which made it fun and interesting and at some time.

As you are now used to it, the weekend with a Friday demo of the work of the week, and from there, we receive feedback, which was also a great one because we hard implemented most of the thing.

In a few words that's how my week looked like and still looking forward to entering week six which is the last week in taskforce Bootcamp.
Day 75/100 Project: Skill-Sharing Website
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-29 08:06:43

"If you have knowledge, let others light their candles at it."

– Margaret Fuller

![share](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipnrzxe11elczsu9nova.png)
Introduction on virtual control system
Tags: git, html, css
Published: 2021-11-29 07:55:54

Git is a free and open-source distributed version control system for tracking changes in source code and is used for software development.It allows you to record changes in your file over time so that you can access specific versions of your file later on.Git is basically a content tracker

GitHub is a Git repository hosting service, but it adds many of its own features. While Git is a command-line tool, GitHub provides a Web-based graphical interface. It also provides access control and several collaboration features, such as wikis and basic task management tools for every project.