DEV Community: Daniele Carta

1 - A new boilerplate for React Application - CRA-ken is finally out!

Daniele Carta — Mon, 23 Aug 2021 20:09:41 +0000

Hi Developers,
I'm Daniele Carta and I'm a Frontend Developer. For 3 years I'm worked with React and with Create React App.

To fastify my work, I decise to create a new boilerplate for fastify the initialize a new application.

The name of this boilerplate is CRA-ken. You can find the project in this link: https://github.com/crtdaniele/cra-ken

Why have I to use CRA-ken?

Because in this boilerplate you can find a lot of helpers and configuration like these:

	CRA(ken)	CRA
React Testing Library	✅ yes	✅ yes
Routing	✅ yes	❌ no
Redux Store	✅ yes	❌ no
Redux Saga Middleware	✅ yes	❌ no
ESLint Configuration	✅ yes	❌ no
Prettier Configuration	✅ yes	❌ no
Versioning App	✅ yes	❌ no

So, to install the boilerplate?

It's very easy:

npx cra-ken-app my-app
cd my-app
npm start

In the next articles I want to show you what I introduce in the next release and how to work the boilerplate CRA-ken.

Stay tuned and follow me on LinkedIn and Github.

LinkedIn: https://www.linkedin.com/in/daniele-carta-lugano/
Github: https://github.com/crtdaniele/

Custom Hooks vs Class vs Other... What is your choice?

Daniele Carta — Tue, 25 Aug 2020 08:10:45 +0000

Hi Developer!

Today I want to ask you what is your prefer method to develop a business logic.

In last year, with ReactJS 16.8, with the functional components + hooks, develop custom hooks with the business logic is very simple and practice.

We need to have and to use Classes in a project? Or now we can use only the custom hooks?

And with Typescript, we have the possibility to use "Namespace" a collection of class.

Give me your opinion, and your best methodology!

Follow me on Github
Follow me on LinkedIn

How to learn a new [programming language, framework, library] in 4 points?

Daniele Carta — Tue, 11 Aug 2020 07:05:54 +0000

When you want learn a new programming language or a new framework, the first question is: How to learn? Where can i study?

With this post, I want to show you how I study a new technology (frontend, but is possibile to apply this method also for other jobs).

For example, if I'll want to learn ReactJS?

1. Official Documentation

In my opinion, the first thing to do is to study the official documentation.
The official documentation is good to learn the syntax base of the language to have a strong base and to undestand the main concepts.

In this case, the documentation of ReactJS is very good.

The official documentation

Before to start a new course or read another resources, I advice you to read the all documentation.

2. Start a course

After you will read the documentation, you can change your job position on LinkedIn in "Senior Frontend Developer"... Ahah :)
The second step, for me, is to start a course to learn better.

Now the question is: Wich course can I choice? and Where?

In the last years one of the best platform to learn a new technology is udemy.com.

For example, if you try to search "ReactJS" in Udemy.com you can find 482 results.

Courses ReactJS: https://www.udemy.com/courses/search/?q=reactjs

What are the strengths?

Price: in general the courses are to expensive
A lot of languages: you can find courses in lot of languages (italian, english, spanish, ecc...)
In a lot of case the courses are taught by people who use those technologies for work
You can watch the video and practice in the meantime

Advice: find a short course where you can learn and improve your knowledge, prevents the long courses (in udemy.com you can find courses of 40 hours).

Another advice is to watch the videos preview of the course. With those video, you can understand if the course is good for you.

3. Start a project

One of the best methods to learn a new technology is to start a new project.

What project?

For example, in ReactJS you can find a short lists of examples in official documentation: https://reactjs.org/community/examples.html

In this link, you can find a previews of the apps and the GIT repositorys. To improve and practice try to replicate one of those app.

4. (last) Others points of view

When you are finish a course or a project and you are confident with the syntax and the main concepts, two methods to improve more your knowledge is:

Follow on Social (for example in LinkedIn) people that works with that technology of lot of years (in this case: Senior Frontend Developer in ReactJS, ReactJS tutors).
Read, read and more read. To discover new tips, follow the hashtag (for example in this case #reactjs) on site like medium.com, dev.to, and so.

Conclusion

I hope to help you with these tips.
Following these steps, I learned lot of things and new technology.

Follow me on Github
Follow me on LinkedIn

Beginners - Create a Slider with GlideJS in SvelteJS

Daniele Carta — Thu, 06 Aug 2020 07:05:42 +0000

In this article I want to show you how to use Glide in Svelte!

If you don't know Glide or Svelte:

Glide: is an awesome slider in ES6
Look the Documentation

Svelte: is an open source framework in Vanilla Javascript
Look the Documentation

First step: install Svelte and create the Scaffold

Open VS Code, go in your terminal and digit:

npx degit sveltejs/template project-svelte-and-glide

Now we have a new folder (project-svelte-and-glide) with Svelte.

The next step is:

cd project-svelte-and-glide

npm install
npm run dev

Great, we have created our first project in SvelteJS!

Second step: install Glide package into Svelte

Now we have created our first project in Svelte. So, after the command npm run dev, open http://localhost:5000 in Google Chrome, you can see a blank page with the title: Hello World.

Open again the terminal and digit (into the folder project-svelte-and-glide):

npm install @glidejs/glide

Perfect, now we can use the glide package, but we don't have the CSS base of Glide. Let's to add the css!

For add the css of Glide, we need to modify the rollup confing (don't worry, it's very easy).

Open your terminal and install a new dependencies into the project:

npm install -D rollup-plugin-css-only

Then, open the rollup config (in the main root) and before the node svelte in the plugins, add this line of code:

plugins: [
    css({ output: "public/build/vendors.css" }),
    svelte({ ...

Now, open the index.html file in the public folder and add vendors.css after bundle.css:

<link rel="stylesheet" href="/build/vendors.css" />

The last step is add the glide.min.css in the App.svelte file. In the script tag, add:

import "../node_modules/@glidejs/glide/dist/css/glide.core.min.css";

Restart the project.

Now, rollup will compile all the external css that we'll import in our components into the vendors.css file.

Enjoy with Glide!

Return into VS Code and open the file App.svelte (src folder) and remove the useless content.

First, in the script tag we need to import Glide, then we need to initialize and mount a new instance of Glide.

In the script tag, import glide and onMount event of Svelte:

import { onMount } from 'svelte';
import Glide from '@glidejs/glide';

onMount(() => {
  new Glide('.glide').mount();
});

Next, we need to create the slider, GlideJS work with this structure of HTML:

<div class="glide">
 <div data-glide-el="track" class="glide__track">
   <ul class="glide__slides">
    <li class="glide__slide"></li>
    <li class="glide__slide"></li>
    <li class="glide__slide"></li>
   </ul>
 </div>
</div>

NOTE
The first class, is the class used in Javascript to identifier the slider.
If you prefer, you can use also an ID.

Now I want to add an image into my slider, into the div glide__slide add:

<img alt="" src="https://picsum.photos/id/834/900" />

Picsum is a service to have a placeholder image.

The final result

If you have an issue, contact me or comment below!

I'll happy to help you!
Have fun!

Follow me on Github
Follow me on LinkedIn

The best plugins for VS Code - Frontend Developer

Daniele Carta — Mon, 03 Aug 2020 10:53:01 +0000

Are you a Frontend Developer? Fantastic!

Today, I want to suggest you the best plugins that you need in Visual Studio Code.

NPM Scripts TABS

If you are a Frontend Developer, you know what does it mean start a project with the terminal of VS Code and NPM. So, in Visual Studio Code you can add a tab "NPM Scripts" with the all scripts of your open package.json.

The steps to add the tab are:

Open VS Code
Go to Settings
Search: npm.enableScriptExplorer
Set to “Enable” Now, you can see the tab “NPM Scripts”.

Emmet support

Emmet is a fantastic plugin to write code faster.
How? It’s easy!

With Emmet you can write abbreviation of code and it will compile automatically for you.

For example, in VS Code you can write:

ul>li*3

The result will:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

You can download Emmet from this link: https://code.visualstudio.com/docs/editor/emmet

MongoDB plugin

Another interesting plugin for VS Code is MongoDB plugin.

Exactly, you can have a simple client of MongoDB (the readonly data and structure of your database MongoDB Cloud).

You need less than 5 minutes to install and configure your database into VS Code.

An example:

It's very comfortable because you don't need to open another client or one browser.

You can download MongoDB plugin from this link: https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode

Drawio

Do you like draw your Frontend infrastructure?

Drawio is the best plugin for VS Code for draw directly into the ide. With this plugin you don't need any external software.

Creating a file with the extension .drawio you will ready to draw a diagram with text, symbol, and other...

You can download Drawio plugin from this link: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Custom font

In the last month I changed a lot of fonts, but finally I finded the best fonts (for me) for VS Code.

Cascadia font!

How to install a custom font?

Download Cascadia font on this link: https://github.com/microsoft/cascadia-code/releases
Install the TTF file on your laptop
Go to File -> Preferences -> Text Editors -> Font and in the textbox write "Cascadia Code"

Snipsnap

Snipsnap is a plugin similar to Emmet, but is more complete because with Snipsnap you can have a snippets of codes in VS Code in a lot of languages of code.

At this link, you can find a list of snippets: https://github.com/snipsnapdev/snipsnap/tree/master/snippets/javascript

For example, in my ide I installed the React snippets.
Now, if I write "React comp" and then I press a TAB on my keyboard the Snipsnap snippets complete automatically the syntax with a empty functional components in ReactJS.

You can download the Snipsnap on this link: https://marketplace.visualstudio.com/items?itemName=snipsnapdev.snipsnap-vscode

Conclusion

I hope to help you with this article. I think now you can write code faster :).

Follow me on Github
Follow me on LinkedIn