Ben's Full Stack Entrepreneur Blog

What does Svelte look like? Basic Svelte Code Examples

Benjamin Papadakis — Tue, 07 Dec 2021 23:18:23 GMT

I created this post for future reference, with my own examples as I was following along some basic Svelte tutorials that can be found here ( https://svelte.dev/tutorial/ )

Svelt script for first letter uppercase/capital

<!-- App.svelte -->
<script>
let name = 'hashnode';

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
</script>

<h1>Hello {capitalizeFirstLetter(name)}!</h1>

Dynamic attributes example with a random image

<!-- App.svelte -->
<script>
    let src = 'https://picsum.photos/200/200';
    let alt = 'Some random image';
</script>
<h1>Image 1</h1>
<img alt={alt} src={src}>
<h1>Image 2</h1>
<img {alt} {src}>

Adding CSS to a component

<!-- App.svelte -->
<style>
    span {
        color: blue;
        font-family: sans-serif;
    }
</style>

<h1>Hi <span>Hashnode</span>!</h1>

Nested components with scoped styles

<!-- App.svelte -->
<script>
    import Nested from './Nested.svelte';
</script>

<style>
    span {
        color: blue;
        font-family: sans-serif;
    }
</style>

<h1>Hi <span>Hashnode</span>!</h1>
<Nested/>

<!-- Nested.svelte -->
<style>
    span {
        color: green;
    }
</style>
<h2>Hello fellow <span>reader</span>!</h2>

Nested components with global styles

<!-- App.svelte -->
<script>
    import Nested from './Nested.svelte';
</script>

<style>
    :global(span) {
        color: blue;
        font-family: sans-serif;
    }
</style>

<h1>Hi <span>Hashnode</span>!</h1>
<Nested/>

<!-- Nested.svelte -->
<h2>Hello fellow <span>reader</span>!</h2>

HTML tags / Remember to sanitize them b4 displaying them

<!-- App.svelte -->
<script>
    let string = `Withount html tag <strong>HTML CONTENT!!!</strong>`;
    let string2 = `With html tag <strong>HTML CONTENT!!!</strong>`;
</script>

<p>{string}</p>
<p>{@html string2}</p> <!-- this still needs sanitization -->

Time and space complexity

Benjamin Papadakis — Sat, 04 Dec 2021 10:36:43 GMT

Assume we have 2 different sets of code written differently but solve the same problem and run like this:

{ Code 1 }
# after execution:
runtime: 3 seconds
memory allocated: 20 GB

{ Code 2 }
# after execution:
runtime: 40 seconds
memory allocated: 1 GB

Which do you think is the better code?

What is a way of measuring which code is better?

On the one hand, for the human senses and logic, readability could be a determining factor. Meaning how easily do you understand what the code does just by looking at it.

On the other hand, it can also be scored on "how much time it needs to run until it's finished". However, because the time it needs to run is relative to the hardware of the computer, we will have to go an extra step and take out the time factor and think in terms of operations, instead of time. So although we call this complexity of operations time complexity it has more to do with the computational complexity. So let's try explaining this again.

"Time complexity" refers to the computational complexity of an algorithm's execution time. Assuming that each operation takes a set amount of time, time complexity can be determined by counting how many basic operations the algorithm performs. As a result, the algorithm's execution time and the number of basic operations it performs are assumed to be proportional. (Hopefully, you didn't get lost in the last sentence.)

Another way of measuring code is by space complexity. Space complexity is the amount of memory space needed to run the code. In other words, when an algorithm completes running, it is the amount of memory it had to take up to solve the computational problem.

From the two examples above it depends on what we measure.

Code 1 runs much much faster but needs more memory. So when talking about time complexity this one is better.

Code 2 needs much more time but required a lot less memory. So when talking about space complexity this one is better.

{ Code 1 }
# after execution:
runtime: 3 seconds
memory allocated: 20 GB

{ Code 2 }
# after execution:
runtime: 40 seconds
memory allocated: 1 GB

Hello Javascript with Google Dev Tools. How to run and learn Javascript Code using Google Dev Tools.

Benjamin Papadakis — Sat, 04 Dec 2021 09:25:21 GMT

Download and install the Google Chrome browser if you don't already have it installed
Open the dev tools with F12 or by following the picture below

For better control open the dev tools in a separate window

Then you can fullscreen it and navigate to the sources menu

Then go to snippets

Click "New snippet" and name it whatever you wish. I'll name it "Hello Javascript"
Type in the following code:

function basicFunction(first, second, border, link) {    
    return border + first + link + second + border;
}

let var1 = 'Hello'
let var2 = 'Javascript'
let sides = '!!'
let between = ' '

let result = basicFunction(first=var1, second=var2, border=sides, link=between);

console.log(result)

Click the run icon/button

Notice the output in the console

!!Hello Javascript!!

What a website for a business really is and why it is critical to choose a designer who knows about conversion rates

Benjamin Papadakis — Sat, 27 Nov 2021 20:34:12 GMT

A company's success or failure may be determined by the ability of a website to effectively communicate its message, encourage customers to do certain activities, and promote its products or services through various marketing channels. If a company doesn't have the correct website, it might go under, but if it does, it can see a big rise in sales and profitability.

For this reason, companies can fail when they hire someone to create their website on a budget. They might choose someone with a competitive price but will overlook their lack of knowledge on this topic. Sure they will be able to deliver a website but it will not necessarily be a website that can lead to a high conversion rate.

Websites aren’t just headings, images, and buttons. Neither are they meant to be eye-candy. Websites need to communicate the right message to the right audience and guide the user to what action they must take next to get what they need from the business it is representing.

It is up to the designer of making their client understand the importance of the right website for profitable conversion rates. They need to educate their clients on various aspects in that manner and help them choose a designer who understands this. This also allows the designer to separate themselves from most freelancers who do just website building without taking into account conversion rates.

Tips on how to learn Python by yourself

Benjamin Papadakis — Sat, 27 Nov 2021 11:47:13 GMT

Learn python by finding a tutorial series in a form that fits your learning style and stick to it. It can be a video course, a book, or something in between. Apply what you are being taught and mix it up while you do so with examples of your own. To profit from your journey make sure to apply the following tips.

Practice coding daily

When it comes to mastering a new programming language, maintaining a level of consistency is critical. The best way to learn to code is to make it a daily habit. Having a daily coding habit can help you build muscle memory, which has a significant impact on programming. Follow along with tutorials, either video, or text and type it all out on your own (instead of copying and pasting). From experience, I can tell you that the best thing you can do is have a project of your own and practice solving it every day.

Give emphasis on Python fundamentals

You must address the essentials of the subject. Working through complicated tutorials, projects, or challenges will be difficult if you don't comprehend the fundamental concepts and terminology used. Some of the important ones follow.

Variables and variable types
Classes and objects
Operators
Lists, dictionaries, and sets
Conditions
Loops
Functions
String operations
String formatting
List comprehensions

Google it!

One of the easiest methods to solve problems when working on Python exercises, examples, and projects is to learn from other Python developers. Run a search on the internet using terms related to your mistake. StackOverFlow, Stack Exchange, and Quora are just a handful of the prominent community-based forums where you may get answers to common questions about programming.

Join a Python group on Reddit, Facebook, or any other network you might be using. If you can't find the answer on the results of Google then you can always post in one of these groups. There are many developers who will gladly help you out with your code and will happily explain to you anything you don't understand.

Python shell or print()

The interactive Python shell is a great way to learn about fundamental Python data structures (such as lists or dictionaries) for the first time or to troubleshoot an application. Another way of understanding your code better is by using print all over your code.

Solve bugs and understand them

Encountering a problem in your code is something we have to address. When you begin building sophisticated programs (let's call them that), you will encounter flaws in your code at some point, and the code will either create errors or not execute the way you want it to. These are called "bugs". It is not only normal, it is part of the daily routine for every programmer. So don't let bugs get the better of you. Instead, take pleasure in these situations to learn why the code isn't running as it should and even revisit some of the fundamentals of python.

Practice on paper and create notes

Studies show that writing down your thoughts is a good method for retaining information over the long term. If you're interested in working as a full-time software developer, you'll want to practice writing code on a sheet of paper. Writing down your ideas by hand might help you organize your thoughts before switching to a computer. Also, summarizing what you've learned can be essential. This can take the form of a cheat sheet, which will help you in the future tremendously. Ideally, I'd suggest you keep notes in your hashnode blog. You'll always have access from everywhere, and other people will benefit from your notes as well. Don't forget that you can always benefit from notes and cheat sheets made by others if you search for them.

Educate others

Learning something is best done through teaching it. In the case of Python, or any other programming language really, this is very beneficial. Writing blog entries describing new ideas, making videos outlining what you've learned, or just the act of preparing tutorials by yourself are all excellent options for this. Heck, you might even write a book while you're at it! The most important part of teaching is that it helps you strengthen and identify any gaps in your knowledge.

What is visual hierarchy and why is it important in web design?

Benjamin Papadakis — Fri, 26 Nov 2021 05:26:54 GMT

Visual hierarchy is the order of importance we perceive of the elements of a particular scene.

In web design, it is important because when applied correctly we can guide the eye of the user to what we want them to notice first in our website.

Large headings

strong letters Are all some examples of how to catch the attention of the user.

Just remember not to overdo it. Because if you do, the user won't know where to look first, and they would rather leave your site than try to figure out what is what.

So, emphasize what you really have to! Start with what the site is all about and then emphasize the call to action. I might provide better examples in a future post. For now, I'll give it my best just by using text.

E.g.

Cybersecyrity consulting for small to medium businesses

Blah blah blah. Blah blah.

> Schedule meeting now <

The best way to learn how to program. From idea to design, from design to tutorial, from tutorial to development.

Benjamin Papadakis — Wed, 10 Nov 2021 14:22:18 GMT

I am convinced that a very effective way to learn how to program is getting a quick introduction from a few tutorials and by following along with just doing what you are being shown. Then, as soon as you can, start your own project . Work on it parallel to your learning.

In the past I've tried taking up so many programming languages, so many times. In the end I would get too bored after too many tutorials and I'd just abandon it.

The past year however my approach was different. First I had an idea, then I would design it on paper or I would wire-frame it and then I would search on how to do that. I tried hiring someone from Fiverr but my budget wasn't enough so it didn't really lead where I wanted. Still, it was very beneficial for me because I had to create wire-frames for the then hired developer. This created a deadline for me so I had to do a lot of brainstorming and designing and researching in a very short time. In the end I had a better understanding of what I have to do.

When you have a real project in mind during your learning path, it motivates you to learn the necessary technologies to realize that idea. I had to understand how databases work, what the back end and what the front end is. Etc. etc. There are countless courses and videos online that can help you reach your goal. Also do not underestimate books. They have been a tremendous help as well.

Three courses I would recommend are the ones below, if you want to get started with programming. (I won't post them as affiliate links because I don't want you to believe that I have a monetary incentive with giving away this information.)

[ Pro-tip on getting courses on Udemy. Open a new private browser window there will be a sale going on. You can also try this with different browsers and see if there is a better price with some other browser. ]

If you notice I never completed them. Why? Because in my world courses aren't meant to be finished, they are meant to guide you in the right direction. Once I felt that I knew enough I moved on to what I thought I should learn next that will bring me closer to my goal.

Then I kind of stumbled across the Codemy courses, https://codemy.com/ . I was lured into buying a lifetime subscription through his YouTube videos. You can find a coupon code somewhere in his videos description. In the end it was like 25 or 40 $. I don't remember the exact amount. Again I never really finished a course.

After these courses I was lead to Django. In particular I liked the crash course of just Django which is free ( https://learn.justdjango.com/ ).

Last week I paid $69 on an text course that shows you how to combine Nuxt with Djano ( https://djangowaves.com/django_vuejs_course/ ). After the first few chapters I decided to put it on hold because I realized I need to fill some gaps. Thus, I continued with something more fundamental, that is Vue js.

Again, always while I was doing the courses, I was practicing on my own projects. Yes, I do follow along. But then I stop, sit back, think if I already know enough to start working on my project.

With Django I made my personal study app. Now with Vue js I want to create an improved version of the same study app. I might even publish it one day if it becomes good enough.

Sometimes I'm thinking maybe I shouldn't have taken all these shortcuts. Maybe I should be more focused on some specific courses-tutorials until I finish them. But I'll forget them anyways, if I don't use the knowledge acquired. Unfortunately, I don't have the time luxury as well. In the end if you don't create anything why bother at all?

Go ahead and search on YouTube "tutorial hell". You'll find some interesting videos you might like. I liked the one of Joshua Fluke which you can find here https://www.youtube.com/watch?v=-GB9qKbmGko

Install Vue CLI, start a Vue Project and add Vuetify

Benjamin Papadakis — Mon, 08 Nov 2021 19:34:49 GMT

Download and install Node js

Install vue with the following command through the terminal using the command:

npm install -g @vue/cli

Start a Vue Project

Make sure you are in the folder where you want to create the project and run in the terminal:

vue create projectname

Select your prefered preset

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)  
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

Move to the created project directory

cd projectname

To add Vuetify run

vue add vuetify

Start the test server

cd processqueue
npm run serve

How to clone a Node js repository and install the required dependencies and start the project

Benjamin Papadakis — Sun, 07 Nov 2021 21:17:13 GMT

Have git and node js installed

Clone the git repo with the following command using the terminal. [ Example git link: https://github.com/username/directory.git ]

git clone https://github.com/username/directory.git

Go into the the directory

cd directory

Then run

npm install

Finally to start the project

npm run serve

Which programming language I chose for rapid prototype development? A tribute to the Django Web Framework

Benjamin Papadakis — Sun, 07 Nov 2021 15:14:40 GMT

A while ago I took it upon myself to create my own study app. It should run on my laptop, manipulate and format text (setting text to bold, underlining, etc.), with clipboard features (that are copy & paste) and image manipulation within the text (copying and pasting images). All this so I could create nicely formatted notes in combination with reviewable questions and answers.

Why did I want to create my own study app?

I tried so many existing study apps. Anki, RemNote and many others. Unfortunately they never did exactly what I wanted them to do. Often the notes would be limited to the platform and I could not back them up in a way I wanted. I could not manipulate the whole way the notes are represented if I didn't like it. RemNote was the closest thing to what I was seeking. However, the way you review your questions was too limited for my taste and I didn't like the question-answer format. Also, it was very important for me to be able to print my notes, if need be.

Why I chose Python

At some point I took up python for 2 main reasons

among other things it is a science oriented language i.e. it will be useful for me if I want to do something with data collection, statistics, artificial intelligence
it is very freaking easy to learn

Trying out different Python extensions

Once I started consuming the Python language, I took it upon myself to create a sort-of flashcard app using a package for Python called "tkinter" (packages are "extensions" for a language, meaning they are pre-programmed code shared by other people so other programmers can reuse their code). With the tkinter package, a programmer can create a program that has a visible user interface (see image below). So I was able to create a window with buttons and text boxes for the user, so they can interact with the program in an intuitive way. It was a good learning experience but tkinter had a lot of limitations. For one, image manipulation in text is very difficult to implement and you need to code everything by hand. At that time I chose the app name "Ugly Note Generator", which was true for the most part. It looked like this:

After realizing the limitations of tkinter I did some more digging and started giving the "Kivy" framework a shot. It is an open source, MIT licensed, cross-platform framework for Python. Again it allowed me to create an interface for the user. It was similarly painful to code in this framework, and thus, I came across the Django framework.

Django to the rescue

If what I felt for Django when I stumbled across it wasn't love at the first sight, I really don't know what is. I'll quote them right from their website:

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

It follows a "batteries included" philosophy. Thus, many things that I would have to code manually, come with Django out-of-the-box. A login system, database integration (for storing, retrieving and updating data), etc. etc. The best part being that it is a web framework. Anything I create using Django can be extended to the web at some point. Not only that, but the visual interface for the user is a combination of HTML, CSS and Javascript. This triad is not too difficult to master and one can create beautiful interfaces almost effortlessly (see images below).

In the end, using Python with Django, I managed to create a satisfying study app which I now often use to do some "serious studying". I import the slides of a lecture and then I create review questions for each slide along with any other comment I see fit. When the time is right, I can revise the studied material through the review questions and I can mark how well I know their answers.

I am grateful to the Django community and I am almost sure that without their framework I wouldn't have a working prototype by now.

Let's end this article with some screenshots of the said prototype (note that almost all of my notes are in Greek).

Notebook section

Chapters of a notebook

Viewing notes in focused mode

Creating new review questions example

Reviewing the questions. Color-coding represents confidence level

How to start a new Vue project

Benjamin Papadakis — Sat, 06 Nov 2021 23:01:51 GMT

Install Node js
Install Vue js with npm install vue in terminal
Run in terminal the following command to start a new project
```
vue create projectname
```
instead of projectname use whatever you want

Then select whichever option suits you

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)  
Default ([Vue 2] babel, eslint)         
> Default (Vue 3) ([Vue 3] babel, eslint) 
Manually select features

Create a virtual environment with Python's venv on Windows

Benjamin Papadakis — Fri, 05 Nov 2021 18:25:14 GMT

Have python installed / install python

Create virtual environment In windows run from console (cmd)
```
python -m venv venv
```
Activate virtual environment
```
venv\Scripts\activate
```
Then Install packages, e.g. Django
```
pip install django
```