DEV Community: Alessandro

Grow your shop

Alessandro — Tue, 28 Dec 2021 12:01:15 +0000

Today’s era of digital connection requires more than just providing a good service to sell - you have to market it, too. Regardless of the type of business you run, a robust online presence can increase the awareness of your brand, grow your audience, engage customers, and assist you in increasing sales.

Having a website that resonates with your target audience is the doorway to all of this. Websites are usually the first point of contact between your business and your customers. A well-designed website can serve as an interface for delivering products and services and a lead-generation tool.

However, your visitors will likely shut down your site if it takes too long to load, has a confusing layout, or is not optimized for mobile devices - and will leave with a negative impression of your brand – forever! Thankfully, a web designer can assist you in providing a smooth user experience while also looking good.

Still, a good website's components are not just visible to the bare eyes but overall users' experience. The days when a developer's primary concern was fitting a website into a single screen are long gone. With the introduction of various mobile devices, the requirement for a website that works flawlessly on all of them has become critical.

And with balancing search engine optimization (SEO) and graphic design as one of the most difficult aspects of modern website design, you need more than just any designer/developer. Unfortunately, too many businesses neglect this kind of user-experience issue on their websites, which costs them a lot of money in the long run. This doesn’t have to be your case hence why I’m sharing the biggest website misses’ businesses face and how to address them.

Out of Date Mobile Experience

As previously said, With the popularity of mobile devices on the rise, it's critical that customers can simply access your website while on the go, either on desktop/laptop screens and mobile hand-held devices as they voyage on the bus, in a meeting, or even at home. Furthermore, responsive web design eliminates the need to spend money building for each and every device on the market when one can suffice effectively.

Not SEO - Optimized

The importance of having a search engine optimized website in today's highly competitive online business world cannot be overstated. A good SEO website design provides online business owners with cost-effective options for optimizing their websites to become search engine friendly. On the other hand, SEO website design presents both an opportunity and a challenge. Obviously, every website owner wishes to rank in search engine results pages (SERPs). At the same time, they want an attractive website. The Holy Grail of web design is where SEO and SERP optimization meets to give high-quality experience, which is where many designers fail. If your ultimate objective is to optimize your website for organic search engine traffic, you'll want to make sure your designer builds with SEO in mind.

Unclear Information

With the thought of a new website comes the desire to look cool and show off aesthetically pleasing designs – which is normal. However, your design should align with the messaging been passed across. Look at your website. Can your target audience identify you at a glance? Do the design cause distractions to onboarding reading? Your designer or developer must have a keen eye for these details as they can make or mar your online presence as well.

Original posted here

Learning Svelte Part # 5

Alessandro — Sun, 21 Nov 2021 06:54:07 +0000

Arrays & Objects

Hello developers and welcome back to this series about how i am learning Svelte.
In today's post i will explain how to update Arrays and Objects, the update happen reactively when we change values.

Let’s try with an example:

First of all, we’re going to declare a new variable called frameworks.

<script>
let frameworks = ["Vue", "React","Angular", "Ember"];
</script>

And we will loop trough it, in th HTML section:

<ul>
{#each frameworks as framework}
  <li>{framework}</li>
{/each}
</ul>

Essentially we are creating a new list item for each one out of our Frameworks, the result in our html file:

Now to demonstrate the reactivity we are going to add another item to our list, let’s say after a 3 seconds delay.

To do that we need a new function:

We would expect now to have the last item added to our list, but it's not the case, we need another step before accomplishing the result.

Svelte it's not able to catch the change yet, so it's not reflected inside the list.

To make Svelte to pick up the change we only need to write another line of code on our function, that it's going to work because we will use an equal operator that it's re-assigning the value of frameworks

The new function:

Now the result is the one expected:

Another way to achieve the same result it's using the spread syntax in our variable:

This is the equivalent to using "push", also we use the equal operator.

For the Objects it's the same but just a little bit easier:

This is it for my weekly update, see you next Sunday, until then you can find me on Twitter

Learning Svelte Part #4

Alessandro — Sun, 14 Nov 2021 18:44:14 +0000

Props and Components

Hello developers, welcome back to my series of articles about my journey to learn Svelte, this is my 4th post about it, and so far it’s very helpful for my learning, writing down my steps make it public make a good contribution to my knowledge.

Today I am writing about Props and Components.

Normally, a Svelte website is made with of many different components: App.svelte, Header.svelte, Content.svelte, Footer.svelte and so on.
All this components will be structured to make up the full page, the root component it’s the App.svelte, this component will be directly deployed in the Dom by the main.JS file.

We will nest all the others components with it.

The question is: why we need to split our webapp in so many different pieces and not write all the code in the App.svelte root component?
The main reason is to keep your code easy to read, tidy and modular.
Imagine we put everything in one module, the chances that our code will be disorganized are very high.

Another reason to split in different modules is that with this method we can easily reuse it, we can create components to use whenever we need.

We can easily import our components in the App.svelte using the syntax import

And then we will display it in our HTML like in the follow example:

If we want to change any data in the reused component, we can do that, using props.

How can we pass props to a component?

We need to declare the props we want to pass in, in the component itself, we can call it how we like it and we need to set it to a value that ca be: a string, an object, could be an integer. When the components it’s created it will read the props and the value

To access the prop inside the Footer component we need to declare that we are going to use that variable called “prop” (you can name it how you like most)

We declare the variable “prop”, and set to “export” , so now this way we can access the value outside the component.

That’s it for my contribution today, it’s difficult for me write in English but I will keep going, please feel free to leave a comment and roast my explanation.

Learning Svelte

Alessandro — Sun, 07 Nov 2021 17:10:01 +0000

Input Data Binding

Hello friends, this is my third blog post ever, and to tell the truth it's quite difficult for me keeping this challenge up and running, the big problem, i think it's that my mother language it's italian but every day i speak spanish!

But i am here, and i need to do it, it's help me on my journey to become web developer one day soon.

This is post it's very short, i will publish another one about Data Binding, next week to complete my "lesson".

As you now, Svelte is a “radical new approach to building user interfaces”, according to the official documentation.

In practice, Svelte is quite similar to JavaScript frameworks like React, Vue etc.

Today i will write about Input data binding.

Input bindings are essentially just a way you can keep variables inside your components in sync with input fields.

They are very handy when design forms or having any form of data entry.

bind:property

Let’s start with the most common form of binding you’ll often use, which you can apply using bind:value. You take a variable from the component state, and you bind it to a form field:

 <script>

 Let name = “Alessandro”

 </script>

 <p> Your name is: {name}

 <input bind:value = {name}

Now if name changes the input field will update its value. And the opposite is true, as well: if the form is updated by the user, the name variable value changes.

We successfully binded name variable to the input field, when the user makes change to the input field it is going to update the data within your components, this is the most basic example .

bind:value works on all flavors of input fields (type="number", type="email" and so on), but it also works for other kind of fields, like textarea and select

Let's see an example:



<script>
let coffeeOrigins = ["Ethiopia","Colombia","Sumatra","India","Nicaragua"];
let selected;
</script>

<main>

<p> Your have choose: {selected || 'nothing'}</p>

{#each coffeeOrigins as origin}

<label>
<input type="radio" bind:group={selected} value={origin}/>
{origin}
</label>
{/each}

</main>


Thank you for reading, see you next sunday!

Beginner to beginner introduction to Svelte

Alessandro — Sun, 31 Oct 2021 08:31:24 +0000

Conditional Rendering

Hello friends, this is the second chapter of my series about Svelte, a new idea of framework.

This series of posts are not intended to teach anyone, they are basically a way for me to learn better the topic, so be free to roast me or help me where I make mistakes.

What is Conditional Rendering?

As the official documentation says:
“ Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app“.

I can’t really say my opinion on other frameworks, I am really new in this area, so I’ll take it to granted!

In the last few days, I’ve been playing with it, and I can tell you that it’s really easy to grasp it and hold it and at the same time if you are new to frameworks, the syntax it’s easy to learn.

For me the difficult part it’s, no it’s not difficult, let’s say unusual, it’s working with different components.

I usually play with single app or a single page with a single style sheet and another for JavaScript, but I see the convenience and speed of working on small chunks of code and puzzle it together, I like it!

Remember that this is all new for me, using the JavaScript power in this way it’s vitalizing my knowledge about it.

Today i am writing about: Conditional Rendering

Conditional rendering means the way we show or hide elements from the Dom, based on JavaScript conditions, that we write directly in the HTML.

Render a component is extremely simple:

<main>

<h1>Hello World </h1>

</main>

Basic if conditions start with a special syntax:

{#if isActive} // we open the condition with "#"

<h1> Your title goes here </h1> // HTML

{/if}  // We close the condition with "/"

The full example:

<script>
  Let isActive = true;
</script>
<main>
{#if isActive}
<h1> Show your title </h1>
{/}

We render the h1 element into the dom if isActive property is true.

Now we can chain differents statements, another elseblock or an else if block and so on.

A very good place to play with Svelte is the REPL on the Svelte official page, the follow link is related for the Conditional Rendering

That’s it for my contribution about conditional rendering, there is a lots more to add to it, but this set of my first post will be not very long, because I am still not use to it, but I promise I will improve my writer skills along my improvements with Svelte .

Happy Halloween!

See you next Sunday, during the week you can find me on Twitter.

My Svelte Journey

Alessandro — Sun, 24 Oct 2021 16:31:35 +0000

Beginner to beginner Introduction to Svelte

The goal for this tutorial is to share my learning experience with Svelte, also this is my first post in this platform, roast me but ... be nice!

In November 2020 I decided to change my career and started to learn to code. At first I was decided to prepare the exams for:
CCNA 200-301, but then I realized that I wanted to learn web development, so I started with the basics: HTML, CSS, JavaScript and so many tools that are needed for the job!

After these first 11 months it's time for the JS frameworks!
I decided to start with Svelte because I think it's gonna be implemented in vaste scale in the next years, and so many people are talking about it right now!

One of these people is Mike from @htmleverything.
Probably you know him from the podcast: HTML All The Things.
Mike is very enthusiastic about Svelte, and I have to confess that I have chosen this framework following his words.

This post it's mostly a follow up of Mike's course, so all the credits goes to him, for me this is just another way to keep learning by writing and "teaching" others.

For my first post I will cover just the setup and first step, more weekly updates will follow my study.

Svelte it's simple to use and allows us create and build apps very fast.

Svelte is not a library or a framework, it is a compiler.

This means that your code is not shipped in combination with packages to a browser, but it gets compiled to something else, this something is shipped to the browser.

Because all code gets compiled, the total size decreases, but the performance increases.

Besides, it allows you to break away from writing everything inside a JavaScript function, and have its optimized format.

The Setup step by step

The only tool required it's Node.js installed in your machine and your code editor of choice

Setting up the project directory using Vite
npm init vite@latest

In the Svelte project: npm install and npm run dev

After that we will stop the server with control + c

Next thing installing Tailwindcss npx svelte-add@latest tailwindcss
This will add some dependencies to our project folder

Again we will npm -i and after that npm run dev to restart the server

Importing DaisyUI (component library) with: npm i daisyui and we will paste in the plugins of the tailwind.config.cjs file require('daisyui'), and save

Delete all the CSS, HTML and Scripts already present in the file and the folder: "lib".

That's it to set up the project, let's now dive in the components format and how to use it,

Components

Svelte it's a single file components architecture.

Script, Html , Style .

<script>
 JavaScript goes here
 </script>


HTML  goes here


<style>
styles goes here
</style>

The script block contains the JavaScript that we are gonna use to run a component instance.

All the variables declared (or imported) are visible and linkable to the markup section.

The code we write in the components it can be shared between multiple instances.
To made reactive statement (to access their value), we prefix with a: $

let count = 0
$: doubled = count * 2;

Anytime the value of count change, the doubledvalue change as well, the dollar sign make reactive the component.

That's it for my first post about Svelte, and my first blog post ever.

I will try to keep this as an opportunity to learn and write constantly every week or so depending on my progress on this framework.

Next week i will write about: Conditional Rendering.