Forem: Daniel Diaz

My Learning list for 2023: Plan and Resources 📑

Daniel Diaz — Sun, 22 Jan 2023 04:59:57 +0000

Hi, this post was originally posted at DaniDiazTech.com

It's January 21st, 2023. The AI apocalypse has just started, and the
transition to a robot-dominated society is upcoming. We've to get prepared.

Jokes aside, the only way to not be replaced by a bot now, is to keep
learning, be as creative as possible, and attempt to be a good and healthy human being.

Here's all the stuff I'll do my best to learn this year.

1. Hardcore Problem Solving 📚

I've struggled to level up my rating on Codeforces.
But as some friends in my university's CP group advised me since I started,
the key thing is to learn rather than to grind some insignificant rating.

This year, I'll solve all the core problems available on CSES. I'm halfway
through the dynamic programming section. This involves learning graph algorithms, range queries (mainly segment tree problems),

I've found some really cool resources on CP:

Competitive Programmer's handbook by Antii Laaksonen (also creator of the CSES problem set).
Andres Mejia (for Spanish speakers), Colin Galen, and Errichto YouTube channels.
The USACO guide is the best CP roadmap I've found.
Mind-blowing book Competitive Programming 3 by Steven Halim (paid book). In my opinion, much harder than the handbook.

The whole idea of this madness is to classify and perform well in the Latin ICPC Latin America contest.

2. Calculus and Linear Algebra 🧮

Really? Calculus in the 21st century?

Yeah! Aside from the fact that I must master (differential, integral, and vector) calculus to thrive in my computer engineering degree,
I think calculus is one of the most creative things you can learn.

From an engineering perspective, calculus and linear algebra help us to solve many problems and it's the foundation of machine learning,
which is something I've been recently interested in.

I also believe it can be helpful when solving competitive programming problems. Not particularly applying an integration method,
but in being fast in math reasoning, and intuition.

For now, I'll go with the only way of learning I've found effective: Doing loads of exercises and
continuously learning from the mistakes I make. However, I know for a fact that math is also about demonstrations,
and theoretically understanding hard concepts.

I'll happily read Calculus: Early Transcendentals by James Stewart. I bought it a while ago
and only made it through a couple of chapters. Also, learning Numpy or SciPy would be a cool way to improve both,
my theoretical and practical knowledge of linear algebra.

3. Astro Framework 🚀

I built my entire site with Astro — and some React components.
I loved the whole development process, and they have one of the best documentation I've ever seen.
On top of that, server-side rendering improves the performance in absurd ways, just see the
Lighthouse score of my site.

I am very excited about this framework. As of the time of this writing,
The Astro devs have just announced the Astro 2.0 beta release!

4. FastAPI and React ⚡

FastAPI has recently surpassed Django in monthly downloads. I know this is not an
accurate stat to measure the popularity of a framework, but I will give FastAPI a try.

Because FastAPI is only useful when building APIs (shocking, right?),
my UI framework of choice is React. I think React is going nowhere.

These two will be my main technologies of choice when building
web applications for this year.

There are already some good tutorials combining FastAPI and React:

SPA with FastAPI and React on testdriven.io.
freeCodeCamp's courses Microservices with FastAPI (the author uses both React and FastAPI), FastAPI Course for Beginners, and Event-Driven Architecture with React and FastAPI.
The FastAPI's documentation is pretty good (thanks for everything tiangolo).

I know, this isn't a complete stack, but I'll figure out things as I
build projects — which I think it's the best way to learn.

Wrapping up 🧐

I have only 344 days to learn all the stuff above, so
I only included the core knowledge, that I want to
learn badly.

Do you have any set of skills you want
to learn this year? Share it in the comments below!

Or visit my site!

How to Create an Astro Search component 🔍🤔

Daniel Diaz — Fri, 13 Jan 2023 00:33:06 +0000

Implementing search functionality on a full-stack application is hard. But doing it on a static site might seem impossible. After all, you don't have
a database to query, right?

Fortunately, the Astro web framework has an API, where you can fetch the markdown or MDX files you need. After fetching all the data, we'll able to search
for a specific query provided by our users.

Here is a demo of what we're going to build.

Let's build an Astro search component by using React and fuse.js.

Note:
The source code for this project is available on this GitHub
repository.

Creating an Astro Blog Project

Let's kick things off by creating an Astro project. I built an in-depth guide on how to start an Astro project
if you have any questions about this process.

I'll be using the recommended starting template by Astro.

npm create astro@latest
✔ Where would you like to create your new project? … Astro-search-component
✔ How would you like to setup your new project? › a few best practices (recommended)
...

I added the MDX Astro integration, to be able to use both .md and .mdx file extensions, but if you only use plain markdown files this is not necessary. Run the following
at the root of your project.

npx astro add mdx

If you said yes to every option, the CLI tool modified automatically modified your
Astro config file.

Modify the src/pages/index.astro file to look like the following.
This page should be available under localhost:3000.

---
import Layout from '../layouts/Layout.astro';
const allPosts = await Astro.glob('../posts/*.{md,mdx}');
const posts = allPosts.filter((post) => !post.frontmatter.draft && post.frontmatter.slug);
---

<Layout title="MyBlog">
    <h1>Welcome to my Blog</h1>
</Layout>

The Layout component is provided by the starter template of Astro. If you don't have it, create one under the src/layouts/Layout.astro filename, or just wrap the content inside
a normal HTML structure.

For now, don't worry about the styles. We'll be applying Tailwind CSS
later in the tutorial.

After this, create an Astro page to display blog posts dynamically.

Create a file named src/pages/[slug].astro. The squared brackets mean that to display the page we must pass a parameter called slug to the URL. In this case,
the page URL of any posts would be localhost:3000/[slug]/

---
import Layout from '../layouts/Layout.astro';

export async function getStaticPaths() {
    const allPosts = await Astro.glob('../posts/*{md,mdx}');
    const posts = allPosts.filter((post) => !post.frontmatter.draft && post.frontmatter.slug);

    return posts.map((post) => ({
        params: {
            slug: post.frontmatter.slug,
        },
        props: { post },
    }));
}

const { post } = Astro.props;
---

<Layout title={post.frontmatter.title}>
    <h2>{post.frontmatter.title}</h2>
    <p>{post.frontmatter.description}</p>
    <post.Content />
</Layout>

Note how we use the getStaticPaths() function to dynamically create the paths of our posts.

The parameter is a slug field that we must manually specify. You can automate it by applying a slugify
function to the posts' filenames, but this is outside the scope of the tutorial.

Now, let's create some posts with different titles and descriptions inside the src/posts/ directory (you have to create this folder).

The source code of the project up to this point, including the dummy posts are available on this GitHub branch.

Create the Astro Search Component

First, we're going to create an Astro file src/components/SearchBar.astro that fetches all the posts and sends them as a prop to the React search component, which we'll later create in the same components folder.

It's like creating a client, that uses an API, and then creating the API itself.

---
import Search from './Search';
const allPosts = await Astro.glob('../posts/*.{md,mdx}');
const posts = allPosts.filter((post) => !post.frontmatter.draft && post.frontmatter.slug);
---

<Search client:load searchList={posts} />

We filter the posts so they are not drafts, and they have a defined slug. Then we pass this post list to
the React component we're going to create next.

As you can see, it's a pretty simple client, which means all the logic relies on the React component.

Building a React Search component

Before doing any code, let's add the dependencies to our project.

First, add the React integration from @astrojs/react,
and the fuzzy search library fuse.js, which we'll use to search through the markdown files.

You can read more about fuzzy search or more formally approximate string
matching in this article.

On the root of the project run:

npx astro add react
npm i --save fuse.js

Now, create a .jsx file named Search.jsx inside the components folder, which will contain a React function component.

At the top of this file, import Fuse, the fuse.js API, and the useState() hook, which allows us
to track the state (an object that contains data about a component) of our search input.

import Fuse from 'fuse.js';
import { useState } from 'react';

Set the options for the Fuse object with a dictionary.

// Configs fuse.js
// https://fusejs.io/api/options.html
const options = {
    keys: ['frontmatter.title', 'frontmatter.description', 'frontmatter.slug'],
    includeMatches: true,
    minMatchCharLength: 2,
    threshold: 0.5,
};

Now let's create our Search function component. It'll take a search list as a prop.

function Search({ searchList }) {
    // Following code
}
export default Search;

Inside this function, use the useState() hook, with an
empty initial value, to track
the state of a variable query (the input of the user).

const [query, setQuery] = useState('');

Create a Fuse object, with the initial search list, and the
options we defined above.

const fuse = new Fuse(searchList, options);

Now, define the posts we're going to display in the search bar, by using the
search() method of the Fuse object.

// Set a limit to the posts: 5
const posts = fuse
    .search(query)
    .map((result) => result.item)
    .slice(0, 5);

This search method returns a list of the results according to the query. Each result,
has an item object, containing the data of the item found, and refIndex. Because we
only want to get the data from the item, we transform the result object to get only the item.

The slice() function returns only the first 5 results — the most precise results.
You can change it according to your needs.

Now, create a handler function handleOnSearch to change the value of the query according to the
input from the user.

function handleOnSearch({ target = {} }) {
    const { value } = target;
    setQuery(value);
}

We'll pass this function to the input HTML tag.

You can learn more about handling forms in the official React Docs.

Finally, return a label, and an input text field with
the query as value, and handleOnSearch as the handler of the onChange event.

return (
    <>
        <label>Search</label>
        <input type="text" value={query} onChange={handleOnSearch} placeholder="Search posts" />
        {query.length > 1 && (
            <p>
                Found {posts.length} {posts.length === 1 ? 'result' : 'results'} for '{query}'
            </p>
        )}
        <ul>
            {posts &&
                posts.map((post) => (
                    <li>
                        <a href={`/${post.frontmatter.slug}`}>{post.frontmatter.title}</a>
                        {post.frontmatter.description}
                    </li>
                ))}
        </ul>
    </>
);

The src/components/Search.jsx file should look like this.

import Fuse from 'fuse.js';
import { useState } from 'react';

// Configs fuse.js
// https://fusejs.io/api/options.html
const options = {
    keys: ['frontmatter.title', 'frontmatter.description', 'frontmatter.slug'],
    includeMatches: true,
    minMatchCharLength: 2,
    threshold: 0.5,
};

function Search({ searchList }) {
    // User's input
    const [query, setQuery] = useState('');

    const fuse = new Fuse(searchList, options);

    // Set a limit to the posts: 5
    const posts = fuse
        .search(query)
        .map((result) => result.item)
        .slice(0, 5);

    function handleOnSearch({ target = {} }) {
        const { value } = target;
        setQuery(value);
    }

    return (
        <>
            <label>Search</label>
            <input type="text" value={query} onChange={handleOnSearch} placeholder="Search posts" />
            {query.length > 1 && (
                <p>
                    Found {posts.length} {posts.length === 1 ? 'result' : 'results'} for '{query}'
                </p>
            )}
            <ul>
                {posts &&
                    posts.map((post) => (
                        <li>
                            <a href={`/${post.frontmatter.slug}`}>{post.frontmatter.title}</a>
                            {post.frontmatter.description}
                        </li>
                    ))}
            </ul>
        </>
    );
}

export default Search;

Congrats, now you have a fully functional search bar on your site!

Demo

Here is a demo of the component we have up to this point.

The above component gets global styles from my site, thus, the dark mode still applies.

If you want to see what the whole project looks like now,
check out this GitHub branch.

Apply Tailwind CSS styles

Let's finish this project by adding some Tailwind (my favorite CSS framework) styles to the search bar component.

To do this, install the Astro Tailwind integration,
and the typography plugin to modify the styles in markdown rendered pages, like the posts.

npx astro add tailwind
npm i --save @tailwindcss/typography

To the generated tailwind.config.cjs file in the root of your project, add the following, inside the plugins list.

// /tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {},
    },
    plugins: [require('@tailwindcss/typography')],
};

Here is the src/pages/index.astro file.

<Layout title="MyBlog">
    <div class="py-10 lg:py-16">
        <h1
            class="text-5xl lg:text-7xl uppercase font-bold bg-clip-text text-transparent bg-gradient-to-tr from-blue-500 to-green-500 text-center"
        >
            Welcome to my Blog
        </h1>
    </div>
    <div class="max-w-3xl mx-auto">
        <SearchBar />
    </div>
</Layout>

Now, to stylize the search bar we must add a className attribute to the tags
inside the return statement.

I'll also use a search icon from Iconify, one of the largest collections of open-source icons.

// src/components/Search.jsx -> Search
return (
    <div>
        <label htmlFor="search" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">
            Search
        </label>
        <div className="relative">
            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="icon icon-tabler icon-tabler-search"
                    width={24}
                    height={24}
                    viewBox="0 0 24 24"
                    strokeWidth="2"
                    stroke="currentColor"
                    fill="none"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <circle cx={10} cy={10} r={7}></circle>
                    <line x1={21} y1={21} x2={15} y2={15}></line>
                </svg>
            </div>
            <input
                type="text"
                id="search"
                value={query}
                onChange={handleOnSearch}
                className="block w-full p-4 pl-10 text-sm 
                                text-gray-900 
                               border border-gray-300
                               rounded-lg bg-gray-50

                               focus:outline-none
                               focus:ring-blue-500
                               focus:border-blue-500"
                placeholder="Search for anything..."
            />
        </div>

        {query.length > 1 && (
            <div className="my-4">
                Found {posts.length} {posts.length === 1 ? 'result' : 'results'} for '{query}'
            </div>
        )}

        <ul className="list-none">
            {posts &&
                posts.map((post) => (
                    <li className="py-2">
                        <a
                            className="text-lg text-blue-700 hover:text-blue-900 hover:underline underline-offset-2"
                            href={`/${post.frontmatter.slug}`}
                        >
                            {post.frontmatter.title}
                        </a>
                        <p className="text-sm text-gray-800">{post.frontmatter.description}</p>
                    </li>
                ))}
        </ul>
    </div>
);

This is how the index page should look like.

Finally, modify the src/pages/[slug].astro file, to make the articles look prettier.

<Layout title={post.frontmatter.title}>
    <div class="pb-12 mx-auto max-w-3xl prose prose-md prose-headings:font-bold prose-a:text-blue-600">
        <h2 class="text-center text-5xl pt-12 pb-3">{post.frontmatter.title}</h2>
        <p class="text-center text-lg text-gray-600 pb-4">{post.frontmatter.description}</p>
        <post.Content />
    </div>
</Layout>

The prose class allows us to add Tailwind styles to HTML content we don't control — like HTML rendered from markdown files.

Now, when you visit an article, you'll have the following page.

Summary

In this tutorial, you learned how to create an Astro Search
component with React, and fuse.js.

You used the Astro API to fetch all the published posts, passed them
as a search list to a function React component, and created a fuse.js
object to search posts the users type in the input field.

Finally, you installed the Tailwind integration, which allowed you to stylize your site without writing custom CSS.

If you have any feedback on this tutorial, please let me know!

How to Create an Astro JS Project - Quick Start Guide

Daniel Diaz — Sun, 08 Jan 2023 06:53:26 +0000

Hi! This post was originally published at DaniDiazTech.com

The Astro framework premise is very simple: Build a fast website, with whatever framework you know.
Since its 1.0 release, we had interesting features,
such as image optimization, and MDX support (the format I'm writing this article with).

It brings back the simplicity of the old web, and the ability to integrate with powerful
frameworks such as React, Svelte, Vue, and other front-end tools.

Let's see how we can quickly start a new Astro project!

Install NPM and Node.JS

To start creating websites with Astro, you'll need some kind of command line interpreter.
On Windows, you can search for CMD or Powershell. On macOS, and Linux search for "Terminal", or use the shortcut

Ctrl + Alt + T (available in most Linux distros).

Then you'll need to install Node.js, a JavaScript runtime.
However, I prefer to use the Node Version Manager or NVM, to be
able to manage different node environments between projects.

NVM is a macOS and Linux project. To use it on Windows, you'll have to use NVM for
windows.

Also, some commands exposed in this tutorial might not available on Windows,
but, you should be able to perform the same actions with a file manager.

You can install, and verify the version of NMV like this:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

nvm --version
// 0.39.2

Astro requires version 14.18.0, 16.12.0, or higher. So let's install the latest
Node version to be sure we won't run into any trouble.

nvm install node
nvm use node

With Node installed, now we can move to create an Astro project.

Create Astro Project with Setup Wizard

Astro's made it pretty easy to create a project from scratch. Use the astro@latest directive, and it'll
guide you to a simple setup wizard. It'll install the latest Astro version.

npm create astro@latest

I like to start with a template with a "few best practices", and also install the npm dependencies right away.
You can initialize a GitHub repo for your project if needed.

astro   v1.9.1 Launch sequence initiated.

✔ Where would you like to create your new project? … myproject
✔ How would you like to setup your new project? › a few best practices (recommended)
          ■■▶ Copying project files...(node:571016) ...
(Use `node --trace-warnings ...` to show where the warning was created)
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Relaxed
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./myproject
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut!
╰─────╯

Now, enter the project folder, and start the development server.

npm run dev

Go to localhost:3000. You'll be able to see something like the following.

We're able to run the command npm run dev because in the package.json file, the
Astro setup wizard created the "scripts" dictionary, offering shortcuts like npm run dev, instead of having to
type npm run astro dev.

// package.json
{
  ...
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^1.9.0"
  }
}

Now, we're going to see how to set up an Astro project manually.

Create Astro Project Manually

Although is much easier to set up an Astro app with the create CLI tool,
here's how you can do it on your own.

Create, or move to the folder you want to start the project at, and install the Astro package.

mkdir astroproject/
cd astroproject/
npm install astro

Now, you should have access to the package.json file. Add the "scripts" dictionary we saw in the previous section.
Don't forget to also set the name, description, and private attributes. You should have something like the following.

// package.json
{
    "name": "First Astro Project",
    "description": "My awesome Astro project!",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview",
        "astro": "astro"
    },
    "dependencies": {
        "astro": "^1.9.1"
    }
}

Create Astro-required files

We'll later see the structure of an Astro app in detail. But for now, create the following files.

First of all, you need an index or home page. As we're going to see, all your indexed pages
(pages that follow the http://hostname/path/ pattern once deployed) must be located at the
/src/pages/ folder.

Being in the root directory of your project, run:

mkdir -p src/pages/
cd src/pages/
touch index.astro

Now, edit the index.astro file with common contents of an HTML page.

// src/pages/index.astro // Frontmatter.

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My site</title>
    </head>
    <body>
        <h1>Hello there, this is my site!</h1>
    </body>
</html>

Now, at the root of your project define the astro.config.mjs. It is an EcmaScript module
that defines the settings of our Astro app.

cd ../../
// Root of your project
touch astro.config.mjs

Export the defineConfig function from the astro/config module with your custom settings.

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
    // Here is you configure your app
});

Finally, create a /public folder at the root of your project.

This will help you manage your static assets such as images and favicons.
These files won't be modified, or optimized by Astro, and are available
to markdown, Astro, and JavaScript files.

mkdir public/
// Copy already created favicon
cp somedir/favicon.ico  ./public/

Running the dev environment should give you something like the following.

npm run dev

Astro Project Structure: Best Practices

A common file structure to develop an Astro app is the following.

.
├── astro.config.mjs
├── package.json
├── public/
│   ├── favicon.ico
│   ├── favicon.svg
│   ├── _headers
│   ├── logo.png
│   └── robots.txt
├── README.md
├── src/
│   ├── assets/
│   │   ├── images/
│   │   └── styles/
│   │       └── base.css
│   ├── components/
│   │   ├── core/
│   │   └── widgets/
│   ├── layouts/
│   ├── pages/
│   │   ├── 404.astro
│   │   ├── index.astro
│   │   ├── projects.astro
│   │   ├── rss.xml.js
│   │   ├── [dynamic pages]/
│   └── utils
├── tsconfig.json

Let's break down each one of these files and folders:

astro.config.mjs: Where your Astro site configuration live. Here you specify your build, and server options, as well as Markdown plugins, and other integrations.
package.json: Defines dependencies, and scripts of your project.
public: Here you store all the static assets you want not to be modified by Astro when building the site. You usually store images used in markdown files and logos.
src/: The heart of your actual project.
src/assets/: Is common to store the images, CSS, and JS files used in your file in this directory.
src/components/: Here you store your components, made by Astro or UI framework files, such as React, Vue, or Svelte.
src/layouts/: You can use this folder to store layouts for other pages, or markdown files.
src/pages/: Where the pages (Astro, and markdown files) live. The path of every file will be visible as /path in the built site.
src/utils/: You can locate different utilities, such as a fetchingPosts function.

You can see the structure of different open-source Astro sites,
for example the source code of the Astro documentation on GitHub.

You might as well visit the showcase page of Astro sites.
Some of these sites are open-source, so you can peek around to see how they've been built.

Add frameworks to an Astro Project

You can integrate almost any modern UI framework with Astro.

For example, we're going to add the popular Tailwind CSS framework and create a header component.

Integrating Tailwind and Astro

Astro has an integration ready to use for Tailwind, so it's pretty easy to get started.

npx astro add tailwind

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭────────────────────────────────────────────────────╮
 │ npm install @astrojs/tailwind tailwindcss@^3.0.24  │
 ╰────────────────────────────────────────────────────╯

✔ Continue? … yes
⠸ Installing dependencies...
✔ Installing dependencies...

  Astro will generate a minimal ./tailwind.config.cjs file.

✔ Continue? … yes

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ // https://astro.build/config                 │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [tailwind()]                  │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes

   success  Added the following integration to your project:
  - @astrojs/tailwind

Now you should have a tailwind.config.cjs file, where your Tailwind configurations live.
After this command, all the Tailwind classes will be available on every Astro (and in other framework files) page.

Let's create a navbar component.

Creating a Tailwind Navbar Component

Create a folder src/components/ (if you don't have one already) and a file Navbar.astro inside.

In this file, use the following code.

{/* src/components/Navbar.astro */}
<nav
    class="flex flex-col text-center sm:flex-row sm:text-left sm:justify-between py-6 px-6 shadow-lg sm:items-baseline w-full"
>
    <div class="mb-2 sm:mb-0">
        <a href="/" class="text-2xl no-underline text-gray-900 hover:text-blue-900 capitalize">My Astro Site!</a>
    </div>
    <div>
        <a href="#" class="text-lg text-gray-900 hover:text-blue-900 ml-2">Blog</a>
        <a href="#" class="text-lg no-underline text-grey-darkest hover:text-blue-900 ml-2">About</a>
        <a href="#" class="text-lg no-underline text-grey-darkest hover:text-blue-900 ml-2">Projects</a>
    </div>
</nav>

This is a simple navbar, that wraps the links to the middle when the display hits the small or sm breakpoint (640px).
Of course, the links won't work because we haven't created any other pages.

To use it in your index.astro page, import the Navbar at the top of the file inside the frontmatter (---).

---
import Navbar from '../components/Navbar.astro';

// Other imports
---

After importing it, now you're able to use it on your page.

{/* src/pages/index.astro */}
<Layout title="Welcome to Astro.">
    {/* Imported navbar */}
    <Navbar />
    <main>
        {/* Main content */}
    </main>
</Layout>

Your site should look like this.

Summary

This tutorial provided a step-by-step guide for setting up an Astro project,
as well as some best practices to keep in mind when building Astro sites.
With a solid foundation in place, you can begin building and expanding your Astro projects with confidence.

In addition, we saw how to add integrations and create an Astro component using Tailwind.

Any comments, or doubts? Let me know in the comment section!

The Dev.to writing tips ✍🏽🚀

Daniel Diaz — Sun, 09 May 2021 14:47:45 +0000

Photo by Karolina Grabowska from Pexels.

Hi there, awesome people on the internet.

Today I want to make a compilation of the best writing tips according to Dev.to writers.

I start on the comment section. 😉

6 Python Tips & Tricks that no One Teaches 🚀🐍

Daniel Diaz — Mon, 26 Apr 2021 12:46:00 +0000

Python is currently the most used programming language in the world, and the unique reason is that Python developers are happy building software with it.

Its easy syntax, an extensive amount of libraries, and fast learning curve have gained the hearth of both beginners and experienced developers.

So today I'll share 6 of the best Python tricks that are not usually taught. 😃

All the examples are on this Github repo, available after subscribing, so be sure to take a look at them.

--> Access and Download the source code of this article here

🎉 Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:

👍 React to this post
✉️ Subscribe to our newsletter <-- Very important

Select a random element from a sequence

The random package from the standard library has a lot of useful functions. But random.choice(seq) is a particularly useful one.

It allows you to pick a random element from an indexable sequence, for example, lists, tuples, or even strings

import random as r
my_list = [1, 2, 3, "go"]
print(r.choice(my_list))

# Random item

Practical example

A book picker function that receives a sequence of books gets a random choice, removes the item from the list, and returns the choice as a string

# We import only the function we need
from random import choice

def book_picker(books):
    book_choice = choice(books)
    books.remove(book_choice)    
    return f"You picked {book_choice}"

books = ["Harry potter", "Don Quixote", "Learn Python by Daniel Diaz", "Dracula"]

print(book_picker(books)) # Random choice

print(books) # Remaining books

Limitations and Exceptions

If you try to use random.choice(seq) in a non-indexable sequence, for example, dictionaries, sets, and numeric types, Python will raise an Error.

# With Dictionary
import random as r
scores = {"Jhon": 4, "Ben": 3, "Diana": 5}

print(r.choice(my_scores)) # Key error

Also if the sequence is empty Python will raise an IndexError.

# With an empty sequence
import random as r
empty_list = []

print(r.choice(empty_list)) # Index error

Unpacking elements with `*`

Sometimes we need to print the elements of an iterable separated by a space, and the most common solution I've seen is

my_list = [1, 2, 3, 5, 7]

for i in my_list:
   print(i, end=" ") # 1 2 3 5 7

Although this solves the problem, the code isn't that pythonic. There is a simpler solution using the unpacking operator "*"

my_list = [1, 2, 3, 5, 7]

print(*mylist) # 1 2 3 5 7

As you can see the unpack operator is always set at the left of an iterable, and it tells Python:

Assign each element from this iterable to the desired tuple or list

Remember that an iterable is any sequence we can iterate over with a for loop. If you want to check if a data type is iterable, use the iter() function.


print(iter("This is a string")) # Str Iterable object

print(iter(["this", "is", "a", "list"])) # List iterable object

print(iter(1))
# Raises an error
# Integers can't be iterated

Using unpacking with variables

Probably after you know the power of the unpacking operator, you would like to use it to store data in variables. So let's see how to do it


string = "Let's learn Python"

# We want to assign the unpacked result in var1
var1 = [*string]

print(var1)
# ['L', 'e', 't', "'", 's', ' ', 'l', 'e', 'a', 'r', 'n', ' ', 'P', 'y', 't', 'h', 'o', 'n']

The [*iterable] part may look confusing so let me explain it.

When we unpack an iterable python needs some data structure to store each element of that iterable, therefore we are creating a list ([]) outside the * operator.

If we try to get the type of a variable resulting from the * operator we get

another_str = "The * operator"

# Using a list outside the unpacking
var2 = [*another_str]

print(type(var2)) # List

# Using a tuple
# Tuples ends with a comma
var3 = (*another_str,)

print(type(var3)) # Tuple

Of course, if you try to unpack without a list or tuple outside, you'll get a SyntaxError

bad_variable = *"Bad String"
# Syntax error

Unpacking has much more uses, and I could do an exclusive article about it. 😀

Using `set` to optimize operations

According to the python documentation, the set(iterable) class creates a set object from an iterable.

As some of you may know a set is an unordered data structure, (therefore non-indexable) and one of its characteristics is that doesn't allow duplicated items.

Practical example

Function that removes duplicates, and returns a sorted list.

def eliminate_duplicates(lst):
    """
    Returns a sorted list, without duplicates
    """ 
    new_list = list(set(lst)) 

    new_list.sort()    

    return new_list

list1 = [25, 12, 11, 4, 12, 12, 25]

print(eliminate_duplicates(list1))

View attrs and methods of a class without exiting the editor

The dir() function returns the attributes and methods of a class. We can use this useful trick to list all the definitions inside a class type.

-> $ python 
string = "A string"

print(dir(string))

# ['__add__', .....,'upper', 'zfill']

For example, if we were looking for a string method that will convert our string into uppercase, and we are just too lazy to open the browser, we just run the dir function with a string as an argument and search for the right method

Practical example

The best approach we can get from dir is when using 3rd party packages, we can get all the info we need from a class without exiting the terminal

-> $ python


from django.views import View

print(dir(View))

# ['__class__', '__delattr__', .... 'setup']

Slices Operations

A slice is nothing but a way of accessing certain parts of a sequence. In python, slices allow us to do multiple tricks.

Reversing sequences

# Reversing lists
lst = ["Fun", "is", "Programming"]

lst = lst[::-1]

print(lst) # ['Programming', 'is', 'Fun']

# Reversing strings

string = "Dog running on the park"

string = string[::-1]

print(string) # krap eht no gninnur goD

Practical example

Function that returns a sequence until the given index

def cutoff(seq, index):
    if not len(seq) > index:
        return "Sorry the index is bigger than the sequence"

    return seq[:index]

long_string = "This is a long description of a blog post about Python and technology"

print(cutoff(long_string, 15))
# This is a long 

print(cutoff(long_string, 70))
# Sorry the index is bigger than the sequence

Call a debugger in 10 letters

The function breakpoint is available from python 3.6+. This will call a session of pdb.set_trace().

It may sound like a pure convenience (And maybe it does) but for me is a really short and elegant way of calling a debugger

Example

n_odds = 0

for i in range(1, 14, 2):
    # Check for the value of i in each iteration
    breakpoint()
    # Bad condition
    if i % 2 == 0:
        n_odds += 1

print(n_odds)

Conclusion

In this tutorial, you learned:

To choose a random element from a sequence
To unpack elements with * operator
The ability of sets to deleting duplicates efficiently
How to search for methods and variables without exiting the code editor
The diverse uses of python slices
How to call a debugger with the function breakpoint

Please consider supporting me on Ko-fi. You would help me to continue building these tutorials!.

If you have any feedback please, let me know in the comments!

5 CSS Tricks & Tips That You Should Know 🚀 + Giveaway

Garvit Motwani for World In Dev ・ Apr 20 '21

#css #webdev #html #beginners

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani for World In Dev ・ Apr 6 '21

#javascript #webdev #html #es6

🤔 What really makes you a software developer?

Daniel Diaz — Sun, 18 Apr 2021 02:54:13 +0000

Why this question? 😃

Lastly, I'm trying to enhance my personal brand, and as a result of that, I've also had to describe myself.

I had the temptation of present myself as a software developer, but some doubts seized me.

What is in fact a software developer?

What makes you one?

How much time or experience do you need to be considered a software developer? 🤔

I'd like the incredible community of DEV to answer these questions and share knowledge, and opinions in the comments below 😌.

Migrating from Lastpass to Bitwarden. I'm changing password manager 🙅

Daniel Diaz — Tue, 13 Apr 2021 02:38:11 +0000

Before reading

Full Disclaimer

I'm not being benefited by any means by writing this article. I just wanted to share my experience, using different kind of tools. All is based in my opinion after reviewing these password managers and shouldn't be taken as a suggestion to use one product or another.

As a developer I'm worried about the tools I use everyday and I took this space as a way of sharing my thoughts on it.

If you have some opinion about this post please let me know in the comment section.

So without further delay, let's get into the article.

Lastpass is totally fine

Lastpass is a great product, that's all. If you have a paid subscription I think you won't have any problems with it.

The problem comes when you analyze the free version of it. Recently Lastpass has changed the way you can use it's free version. Now you can only access your data either by Desktop or by the mobile app.

So this weekend I decided to migrate from Lastpass. I researched a lot about the bests password managers avaiable and I had two requirements:

It must be a full featured password manager:
- 2FA, Auto fill forms, web extensions, mobile app
It must have a very good free plan

Finally I get with a PM (Password manager), that filled out these requirements, Bitwarden

Advantages of Bitwarden

It's open source. Nothing is more free as in freedom
It has a extremely good ecosystem:
- Web extensions in all modern browsers
- Mobile app
- Desktop app
- Even CLI tools
An easy way to import all kind of data
End to end encryption
0 data breaches until now
Personal and Business plans

So if you want to migrate your passwords, follow the following steps.

Migration process

First you'll need to create a personal account in Bitwarden. But currently the home page of Bitwarden don't show the create personal account button that clear.

So you'll need to scroll down up to the bottom and take a look at Bitwarden's pricing section.

As you may notice all the options are guided to create an organization account, therefore if you want to create a personal account you must click in the personal plans tab.

After that, the personal plans menu will be shown, and now you can create a free account by clicking the create a free account button.

Don't worry the paid plans are totally optional, and probably you'll get more of what you need with a free account.

Next you will be redirected to a signup page:

Advice: Create a fully memorable, long and secure master password. Since it's a master password you won't have any option to recover it.

Example of a good MP: MykeyBOARD-is#brokenSINCE2020

As you may notice it contains a lot of characters and numbers, but it's fully memorable, and there is a high probability of not forget it.

Now that you've signed up, you have to login with the credentials. Then you'll be redirected to your brand new Bitwarden vault.

Don't forget to verify your email.

Exporting and Importing all of your passwords

At this point, you must login into your Last pass account and enter into your vault.

Exporting

After that go to Advanced options>Manage your vault> Export

Click on that button and re enter your Lastpass master password.

After that, all of your passwords will be stored in .csv file in your local computer.

WARNING: All of the data that is stored in that .csv file will be just plain text. That means that your passwords won't be encrypted. So right after you import your passwords to Bitwarden (Or any password Manager), you must delete the password file.

Importing

This time I'll do it in the online vault, but you can do it with the app, or extension too.

Go to your Bitwarden Vault
Click on the tools link
Click on the import data option
Select the Lastpass csv format
Select the last pass .csv file you downloaded
Click in import data

Now your Bitwarden's vault should have all of your passwords imported from Last pass.

If you have any errors importing the best option is to read the bitwarden Documentation

Installing the browser extension

Choose and Install Web extension

Installing the mobile App

Choose and Install Mobile app

Enabling Auto fill in Bitwarden

To enable the Autofill as the Last pass app does, go to Settings>Auto-fill> and check the Auto-fill service label.

Enable Bio metrics

If you want to unlock Bitwarden with your bio metrics, go to Settings>Security>Unlock with biometrics.

Deleting Last Pass account?

After importing my passwords and testing out Bitwarden, and it's features definitely I won't need Last pass again.

So what reasons do I have to leave my Lastpass account with all of my passwords out there?

If you think you won't need your Lastpass account again I recommend you to delete it. Or at least resetting it, to don't store any sensitive data in an inactive account.

Conclusion

Bitwarden by it self looks, from my perspective, a simple to use and more intuitive product, and it has everything you would expect from a good password manager.

These facts, combined with the restriction-less of using both, mobile and desktop, the options we get from Bitwarden (CLI, extension, Desktop/Mobile app) and the product being open source, were what made me change from last past to bitwarden.

👨‍💻Best VsCode extensions for Python Developers🐍

Daniel Diaz — Mon, 12 Apr 2021 04:04:38 +0000

Why do you need good tools for create software? 🤔

Short answer

Really you don't, in fact you only need something to write code, and something for run it.

So what's the reason to spend time searching for the best tools?

Although you don't need anything extraordinary to build awesome applications, the tools that you use everyday help you to make it faster and with less errors. As a result you create better software in less time.

Currently one of the most used code editors is VScode, offered by Microsoft. I know that some of you are afraid of Microsoft as company, but lastly it has been one of the best organizations that are supporting the software developing environment. From Github, to Azure and as I mentioned the best code editor in the earth.

Best extensions in Vscode for Python apps.

Note: For install extensions run the command palette with Ctrl + p and paste the installation command. If you can't (For any reason), just search the extension name in the
extensions tab.

Python

The must have extension: ms-python

It has a lot of features like Intellisense, Formatting, debugging, snippets, etc ...

Also it installs for you the jupyter notebook extension!

Installation:

ext install ms-python.python

Python snippets

This extension give you a lot of abbreviations to avoid writing by yourself the same thing many times.Python snippets

Installation:

ext install frhtylcn.pythonsnippets

Python Docstrings

Documentation is important, and this extension allows you to create beautiful docstrings for you functions/classes: docstring generator

Installation:

ext install njpwerner.autodocstring

Python indent

Fix Python indentation each time you press Enter: Python indent

Installation:

ext install KevinRose.vsc-python-indent

Python testing

If you are creating large applications, you'll need tests for ensure that the code works properly. This extension allows you to run your tests directly from the VScode UI: Python test explorer

Installation:

ext install LittleFoxTeam.vscode-python-test-adapter

Real time Python Runner

Writing small applications requires rapid output checking. With this extension you can see the output of a python a file changing in real time: AREPL for python

Installation:

ext install almenPython frameworks extensionson.arepl

General purpose extensions

These extensions help you to create code effortlessly.

Indent Rainbow

This extension colorizes the indentation of your python file. It results really useful when the code has a lot of nested levels. Indent rainbow

Installation:

ext install oderwat.indent-rainbow

Better comments

This extension help you to create better comments, by highlighting special parts like TODO's, paramaters and queries. Better comments

Installation:

ext install aaron-bond.better-comments

Git lens

Working with Git? This extension give you super powers working with Git. Git lens

Installation:

ext install eamodio.gitlens

Extensions for Python frameworks

Django template language

The django extension allows you to create clean and well highlighted DTL templates. Django

Extension tip: This extension only works if you modify your settings file and add this json keys:

# SETTINGS_FOLDER/User/settings.json

"files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html",
    "**/templates/**/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},

Installation:

ext install batisteo.vscode-django

Django snippets

Curated snippets for develop Django apps.Django snippets

Installation:

ext install bibhasdn.django-snippets

Extra

Beautify your workspace

You should make beautiful, the space you use many hours a day.

So let's take a look and what you can do:

Installing icons

Install the Vscode icons and you'll access to a bunch of file extensions icons.

Here is my preferred theme:

Cherry

Take a look at My blog,
to get access to more awesome articles like this one.
Please consider supporting me on Ko-fi you help me a lot to
continue building these tutorials!.

Any extension I left out of this list?, please let me know in the comments!

🚀🐧 What's your current OS and why do you use it?

Daniel Diaz — Wed, 07 Apr 2021 23:09:42 +0000

Show off your Operative system set up

I've been learning programming for over a year. But I've always been interested about the best tools available to achieve my objectives, and one of the most important is the OS.

Yeah, that thing that is processing all the tasks of our music players 🎵 and code editors 👨‍💻 the whole day.

My current OS

At this moment (April, 2021), I'm using a Linux based operative system called Manjaro.

For me it's almost perfect, because I can do whatever I want with the look and feeling of it, I can Install window managers like Qtile or Awesome, and I'm able to install practically any open source software available, due to the Arch User repositories.

And the best of all! I can use it in a low resources machine 😊.

Some screenshots of my desktop

Unfortunately this weekend I must to get rid of Manjaro in order to install Windows, because of school. (Some software is only available for windows 😓)

However I still able of install other Linux distribution alongside windows later 😁.

So my question is:

What operative system are you using and why?

Do you have any advantage for using it?

What is the most common software you use in your operative system, and does it retain you from changing?

What is the best part of it 🤔?

Lastly feel free to share your desktop screenshots, show off how beautiful is your daily driver 🖥️.

📂 Merge common words of two files in Python, practice file handling

Daniel Diaz — Sun, 21 Mar 2021 23:15:25 +0000

Hi there 😁

In this tutorial you will learn to select words from files, compare them and merge the common words in a new file.

You will practice 🔁

File handling in Python
Sets in Python
Using function to re use code
Some basics command line instruction

Let's start 🐍

Code: Remember that all the code shown during these tutorials will be pushed to github.

Developer-road / merge-common-words

Program to merge the common words of two files into another ones

merge-common-words

Program to merge the common words of two files into another ones

View on GitHub

First of all create a Python file, I'll use a long and descriptive file name merge.py 😆

Let's create that file with the terminal:

Note: if you are using windows, none of these commands will run, so just do all the things with a graphical interface, like a file manager of your code editor. If you are using Mac 🍎, or Linux 🐧 stay relaxed, and learn the terminal as best as you can.

Remember that Python is mainly a CLI programming language, so you will be using a lot the terminal, so my advice is to use the terminal whenever you can 😀

touch merge.py

The touch command will create an empty file merge.py, in the directory you are in.

Now I'm going to call a graphical editor, from the terminal 😱, in this case I'll use vscode.

code ./

Remember that in UNIX (don't be scared, it refers to Unix based OS, like Linux and Mac), ./ the dot refers to the current directory.

Now that I have Vscode set up and going let's start with the code.

Open a file in Python

First of all , we will use some text files in this tutorial, you can download them easily on github, by cloning the repository or just following the links below.

text_one.txt
text_two.txt

In Python you open a file with the function, open which takes as parameter the path of the file.

Make sure you've downloaded the text files, and type in the merge.py file the following code.

file1 = open("text_one.txt)

This will create a variable file1, which is a file object, with the mode of "read" (by default).

If you try to print that variable you will get something like this:


print(file1)

# Result
# <_io.TextIOWrapper name='text_one.txt' mode='r' encoding='UTF-8'>

That's because that variable is just a file object of the text file named, "text_one.txt"

But be carefully if the file doesn't exist, you will get an error 😱.

file1 = open("text_oness.txt")

# FileNotFoundError: [Errno 2] No such file or directory: 'text_oness.txt'

So each time we're working with files, we should use some defensive programming, to avoid the error in case the file doesn't exist

try:
    file1 = open("text_oness.txt")
except FileNotFoundError:
    print("Sorry that file doesn't exist")
    exit()

We're using the exit() function because if the file doesn't exist we won't have the variable to work with, so in that case we will terminate the execution.

If you want to get the content of a file in Python, you would use the {file_object}.read() function, that as it name says read for us the content of that file.

print(file1.read())

# Results
# Why should you learn to write programs?

# Writing programs (or programming) is a very creative 
# and rewarding activity. MORE TEXT .....

Now that you know how to open files, and read them you should be able to create that comparison functionality.

First make sure we are able to open the two files.

try:
    file1 = open("text_one.txt")
    file2 = open("text_two.txt")
except FileNotFoundError:
    print("Sorry that file doesn't exist")
    exit()

Now we will use the content of the files and the power of sets to get all the words of each file.

Sets in Python

A set in Python, is an unordered data structure, with a really special characteristic (Among others), it doesn't allow repeated elements 🤫.

We will use them, to be able to get the words, without repeating.

Creating a set in Python

To create a set in Python we will use the set() function.

empty_set = set()

A set VS a list:

mylist = list("122333")
myset = set("122333")

print(mylist)
print(myset)

# List:
# ['1', '2', '2', '3', '3', '3']

# Set
# {'3', '2', '1'}

As you see the list printed all the elements in order, but the set only printed the elements that were not repeated, and unordered.

Getting the words of a file

We are going to iterate through the words of the file with a for loop, and add them in a set for each file.

file1_words = set()

file2_words = set()


for word in file1.read().split():
    file1_words.add(word.lower())

for word in file2.read().split():
    file2_words.add(word.lower())

print(file1_words)
print(file2_words)

Maybe the above code is a little bit confusing, but let's take a quick look on it.

First we initialize, two sets, one for the first file, the another for the second file.

Then we iterate with a for loop, each word of the file by calling file1.read().split().

In that part we use the method read(), that gives us the content of the file as a string, and then we use the string method split(), which gives us a list of the words in the file by splitting the string within each space.

So basically we are iterating over:

for word in list_of_words_of_the_file:
    code...

Then we get the word, we make it lowercase to avoid word repeating, and add it to the file1_words set. Remember that in a set there can't be repeated elements, if a word is already in the set, then it won't be added.

We do the same thing for both files.

Running that piece of code, returns two sets with all the words of both files.

Challengue

But there is a problem and I challenge you 🔥 to solve it.
There are some words that have special punctuation, for example (on and on, and your task is to figure out how to replace all the punctuation characters, so there won't be repeated words, but with special punctuation.

Reach me out on Twitter, or Instagram, if you achieve it.

Using sets to intersect common words

We are looking for common words in the sets we just created, and for that we will use Intersection.

Yeah that word may look scary since probably you've seen it in math, but don't worry. Intersection are just the common parts of two sets.

Intersecting elements could be tedious 🙄, since with most data structures you would have to iterate through the variables that contain the elements, compare them select those that are repeated and append them in a new variable.

But with sets in Python, we have a special function that does all of that for us, {set1}.intersection({set2})

common_words = file1_words.intersection(file2_words)

print(common_words)

There it is, now we can access the common words of the two files, in an one liner.

Writing files in Python

Writing files in Python, is not that hard. We open a file in write mode by using open("file/path", mode = "w").

This allow us to write to an existing file or in the case the file didn't exist, it creates a new one with the determinate file path.

So let's open our merge file.

merge_file = open("merge.txt", mode = "w")

# code_here ....

merge_file.close()

Remember that every time we open a file in write mode, we must close it, after making the desired operations.

Now we're going to write all the common words to the new merge.txt file.

merge_file = open("merge.txt", mode = "w")

for word in common_words:
   word = word + ", "
   merge_file.write(word)

merge_file.close()

We need to append a comma string at the end of each word, so we can differentiate the words in the file.

If you run this code, you will get the desired result.

try:
    file1 = open("text_one.txt")
    file2 = open("text_two.txt")
except FileNotFoundError:
    print("Sorry that file doesn't exist")
    exit()


file1_words = set()

file2_words = set()


for word in file1.read().split():

    file1_words.add(word.lower())

for word in file2.read().split():

    file2_words.add(word.lower())


common_words = file1_words.intersection(file2_words)

merge_file = open("merge.txt", mode="w")

for word in common_words:
    word = word + ", "
    merge_file.write(word)

merge_file.close()

If you check the new "merge.txt" file, you will see all the common words between the file text_one.txt and text_two.txt

Congratulations 🎉, you just created a merge algorithm, and in base of a merge algorithm (Much more complex for sure), is how git works, to compare code files.

But wait a minute, this code is clunky and there are many parts where we repeated the same process.

So let's use the power of functions, to make our code reusable and more escalable code.

First let's make a function to open a file, and handling exceptions. That function will take 2 arguments, the first will be the file path, and the second an optional argument with the open mode of the file.

# Python function that handle exception while opening files

def open_file(file_path, open_mode="r"):

    try:
        file_handler = open(file_path, mode=open_mode)

    except FileNotFoundError:
        print(f"Sorry the file {file_path} doesn't exist")
        exit()

    except ValueError:
        print(f"Sorry the file {file_path} can't be opened with mode {open_mode}")
        exit()

    return file_handler

Then a function that let us catch the words of a file.

def get_file_words(file_path):

    file_words = set()

    read_file = open_file(file_path)

    for word in read_file.read().split():

        file_words.add(word.lower())
    return file_words

Here as you may notice, we take as parameter the path of the file we're going to get the words from, and get the file handler through the open_file() function, we just created.

Lastly let's create a function merge, which will make the operations of getting and intersecting the common words, and writing those words in a file.

def merge(*filenames, merge_file="merge.txt"):

    list_of_file_words = []

    for filename in filenames:

        file_words = get_file_words(filename)
        list_of_file_words.append(file_words)

    common_words = set.intersection(*list_of_file_words)

    merge_write_file = open_file(merge_file, "w")

    for word in common_words:

        word = word + ", "

        merge_write_file.write(word)

    merge_write_file.close()

Here we use the power of *args in python functions, that allow us to pass multiple filenames to the function if we want to merge more than two.

You can notice that I used a for loop to iterate over the *filename argument. That's because we can receive any number of filenames now, and thus our merge algorithm is more powerful now.

Compacting our code in a main() function

As a best practice in python, you can use a main() function, that will call and perform any operation your script does.

def main():

    file1 = "text_one.txt"

    file2 = "text_two.txt"

    merge(file1, file2, merge_file = "main_merge.txt")

This main function calls the merge function and pass as parameters the file1 and file2 variables. Also we specified the merge_file parameter which tells the merge function which file it has to write in.

But as you may noticed we haven't call any function yet, so let's call the main function.

if __name__ == "__main__":
    main()

The __name__ variable deserves another blog post, but basically here you're telling to python:

Hey dude 🥸, if this is the python file you're executing from terminal, run the main() function.

So the final code of this cool algorithm is this:

def open_file(file_path, open_mode="r"):

    try:
        file_handler = open(file_path, mode=open_mode)

    except FileNotFoundError:
        print(f"Sorry the file {file_path} doesn't exist")
        exit()

    except ValueError:
        print(f"Sorry the file {file_path} can't be opened with mode {open_mode}")
        exit()

    return file_handler            


def get_file_words(file_path):

    file_words = set()

    read_file = open_file(file_path)

    for word in read_file.read().split():

        file_words.add(word.lower())

    return file_words

def merge(*filenames, merge_file="merge.txt"):

    list_of_file_words = []

    for filename in filenames:

        file_words = get_file_words(filename)
        list_of_file_words.append(file_words)

    common_words = set.intersection(*list_of_file_words)

    merge_write_file = open_file(merge_file, "w")

    for word in common_words:

        word = word + ", "

        merge_write_file.write(word)

    merge_write_file.close()



def main():

    file1 = "text_one.txt"

    file2 = "text_two.txt"

    merge(file1, file2, merge_file="merge_main.txt")


if __name__ == "__main__":
    main()

Conclusions:

In this tutorial you practiced:

File handling in Python
Sets and lists in Python
Iteration with for loops
Function definition and usage
Python main function best practices

If you found any error in this tutorial don't hesitate in contact me, or make a pull request in the Github repo

Follow me in My blog,
to get more awesome tutorials like this one.
Please consider supporting me on Ko-fi you help me a lot to
continue building this tutorials!.

🤖 🐍 Create your first Django app: Hello world app

Daniel Diaz — Mon, 08 Mar 2021 02:29:12 +0000

First of all! 😀

Take a good look at this article, that will give you a quick grasp of what is Django, and why you should use it!

What is Django, and why you should use it 🐍

Daniel Diaz for Developer Road ・ Mar 1 '21

#django #python #webdev #beginners

What you will learn 📖

Continuing with this article, here you will learn:

Install Django, (and it's dependencies)
Take a quick look at the Django Project structure.
The basics of the MVT pattern
Use the Django Template Language

Source code 💻

The source code of this tutorial is available in this Github repository:

Developer-road / django-hello-world

A simple Django hello world app

django-hello-world

A begginers hello world guide to the django web framework.

Install requirements:

python3 -venv .venv

source .venv/bin/activate


pip install -r requirements.txt

View on GitHub

Installation 🐍

First of all, you have to install Python, which is one of the most loved languages in the world, and Django is built with it!

Check out the python downloads page

And install the Python 3 version for your operative system: Windows, Mac or Linux

Reminder: Most of Linux distributions, comes with Python Preinstalled so you don't have to worry about install it.

Terminal

Now it's time to use the terminal, or Command line interface 😨 . I know it can be scaring to use the terminal for the first time, but it is an essential skill, that I think every developer should have.

Depending in your operating system, you have different terminal emulators installed, so let's take a look of each terminal for Different OS.

Windows

In windows you have to preinstalled options, CMD and Powershell. Both are terrible 😂, but you can get the job done with them.

Note: In windows the file structure is different from UNIX based (Mac OS and Linux), so usually I recommend to install Git bash, that lets you to run the same commands I'll be using in this tutorial, but I let it up to you.

Mac OS and Linux

In these operative systems, you have built in terminals and you can search it directly in your programs search bar.

In my case 😀

Also if you find too complex to use your system terminal, just use integrated terminals from different code editors

For example Vs Code

Verifying Python Installation

Now that you know to open up your terminal, let's check if we have Python installed

python --version

If I run this command I get:

Which means that the Python version. I have installed in my system is Python 3.8.6.

Also check for pip

pip stands for PIP install packages. It is a Python package manager, that will allow us to install different useful packages, included Django 😆

To check if pip installed, we use

pip --version

As you see, I have pip 20.3.3 installed

Installing Django

Before we can install Django, we should set up a virtual environment, to do that, we run

python -m .venv

This will create a Virtual environment with the name of .venv.

If you want to know more about virtual environments, just take a look on this post.

🧠 Tutorial: Understand Virtual environments in Python ✅

Daniel Diaz for Developer Road ・ Feb 27 '21

#python #virtualenv #tutorial #programming

Now activate that virtual environment 😀

source .venv/bin/activate

You can easily install Django, with a simple pip command

pip install django

You will see something like this in your terminal

Lastly confirm your django installation

╰(.venv)─λ pip freeze                                                                                  0 (0.003s) < 21:15:55
asgiref==3.3.1
Django==3.1.7
pytz==2021.1
sqlparse==0.4.1

As you see I installed Django 3.1.7, which is the latest version of Django, in this moment.

Advice: I always recommend to use the latest django version, since it has the more patches and security fixes.

But if you are already working with a team, or for a company with an older Django version, you should continue using it.

Anyways the Django project team, had been doing an amazing job, because no matter if you learn the Django 3.x version, 2.x or even 1.x (Don't use it please 😆), most of the core functionality still the same.

Creating a project

To create a project in django, you will use the following command

django-admin startproject helloworld

This will create a folder name helloworld, and inside that folder, there will be another folder named hellowold, and a Python file manage.py

╰(.venv)─λ tree                                                                                        .
├── helloworld
│   ├── helloworld
│   │   ├── asgi.py
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py

I know this file structure could be confuse 😕, so I'll explain it in detail.

Django double folder structure

As you may notice, when you create a project in Django, there will be two folders named the same, but these two have differences.

The root folder /helloworld is just like a container, it doesn't matter for django, and it is only there for organization purposes.

You can rename it with whatever you want.

In the other hand there is the inside folder /helloworld/helloworld. It is a Python package since it has a __init__.py.

We will use it to configure our Django project, and to import everything from other apps. (Later we'll see what is an app 😉).

Inside the helloworld package, we can found another important files:

__init__.py, indicates that the project folder must be considered as a package
settings.py, used to configure our app.
urls.py, lets you add or remove url patterns
wsgi.py & asgi.py, configure your deploy server

Finally the manage.py file, is a command line utility that let us interact with the Django framework.

Running a development server.

To run a local server, run the following command

python manage.py runserver

You can specify a port for the server. So this time I'll use the port 8080, as an demonstration.

python manage.py runserver 8080

Note: You will see warning about migrations, but don't worry you will not manage them in this tutorial.

After running that command, go to your browser and type:

# Or the port you used in the runserver command
localhost:8080

After doing that, you should get a page like this, that confirms the installation

Ok, you got it. You installed your first Django project 🦄

Now let's go with the interesting part 😁

Using the MVT pattern

Before continue, I want to tell you about the MVT pattern or Model, View, Template. I know that it sounds confusing, but please don't turn off your brain 🧠, and don't give up 👏.

First of all, why Django uses this pattern? 💭

Django uses this pattern, because it allows the developer, to skip the tedious part of creating a custom controller.

Now, let's get into the different parts of this design pattern:

Model: Holds all of the logical structure of your database. It manages all of the operations, in the database, like creating, updating and deleting.

Due to the models, we as Django Developers mustn't learn SQL 💽 (although it would be a good plus).

View: As a quick definition, a view receives a request, and return a response. Usually the view receives a HTTP response, like GET, and return a html file, or a Json file, or nearly everything.

That return of html files, is called *Template *.

Template: Is what is shown to the user, if everything results Ok with his/her request. It acts as a presentation layer, and you can write them with html, css, javascript, and a special language: The Django template language.

These templates, are designed to "Don't repeat yourself", since Django uses a special language DTL, to build them.

Creating the hello world app

Since this is a beginners guide, we will only use, Urls, Views and templates 😉.

Creating an app

Before continuing, we're going to create a django app.

django-admin startapp myapp

Our app is called myapp, and it contains several files and a strange folder named migrations 😮.

Let's take a look at the structure of our app.

. myapp/
├── admin.py
├── apps.py
├── __init__.py
├── migrations
│   └── __init__.py
├── models.py
├── tests.py
└── views.py

1 directory, 7 files

admin.py : Here we can register our models in the admin page (We will see it in next articles)
tests.py : This file is where we make our unit tests.
models.py : Where we create our models, and where we interact with our database
apps.py : Configuration of our app. I've never touch it 😅
views.py : All of our business logic lives here. This file contains the views that will render our templates.
/migrations : Here is where migrations live. I'll create a post about it, but as a quick concept a migration is a recording of the changes of our models.

Differences app and a Project

Do you remember that we already created a project, called helloworld ?.

Well now we just created an app, and here are the differences.

Project	App
Collections of apps, for a website	Web application that does something
Can contain multiple apps	Can be in multiple projects
Ex: A Blog website	Ex: A comments app that can be in many projects, like Disqus

Until now, we haven't touched any code, so let's get into it.

Hands on 🙌

Installing our app:

We just created an app, so let's install it in the settings.py file

# helloworld/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Custom apps
    'myapp',
]

After installed our new app, we can get into url patterns.
Go to the urls.py file, in our project folder and modify the following things.

from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),

    # The url path of our new app
    path('', include('myapp.urls')),
]

Here we imported the function include, that as the name suggests include the url patterns of external apps 😀.

Then we created another path, with the destination of '', that means that when a user hits the url, without any other pattern, we call the urls of the app myapp

As you may noticed, we are calling the urls as a Python package, so myapp.urls means:

Go to the myapp package
Extract the url patterns of the urls.py file.

But you would say me: Daniel! are you crazy 🤯, that file hasn't been created.

And yeah, you are right. So we need to create it manually.

You can create it from your code editor, or from your terminal

cd myapp/

touch urls.py

After creating that file, we are going to made the fun stuff! 😝

Creating our first view:

Let's edit our views.py file.


from django.http import HttpResponse

# Create your views here.


def helloworldview(request):

    response = "Hello world, this is my first Django app! :)"


    return HttpResponse(response)

Here we imported the HttpResponse class and we passed a variable response, with a value of: "Hello world .."

Ok cool, but next we have to create an url for that view, let's go to the myapp/urls.py file.

from django.urls import path

from .views import helloworldview

urlpatterns = [
    path("", helloworld),
]

As in the urls.py of the project folder, we imported path, and created url patterns for our app. Also we used a new concept, we passed a view to our path function.

All of the stuff we just do, means that each time that we hit localhost:8000, we request the url pattern of "".

That url will call our view function named helloworldview, that takes our request, and returns a HttpResponse, with the content of "Hello world".

Not that hard to understand, right 😅?

Now run the server, and watch your first app working!

python manage.py runserver

# See it on localhost:8000

Using Django templates

The last part of this tutorial will be about, Templates in Django 😀

First of all a Django template, is a html document, that uses the Django template language, to incorporate data and logic on our front end.

Your first template in Django

Before using templates, we need to create a folder in our app to be able to use it.

So let's create one:

cd myapp/

mkdir templates

You just created a directory, named templates. That tells Django to search for templates in that folder.

Create a file, named index.html, that will be our first template.

touch index.html

Now, paste the following html, in the template.

<h1>Hello world, this is my first template</h1>

<p>This is a cool html paragraph!</p>

After that we are going to modify the helloworldview, in order to render our template

from django.shortcuts import render

def helloworldview(request):

    template = "index.html"

    context = {}    

    return render(request, template, context)

Here, we used the function render, that takes as parameters, the user request, the name of the template, in this case index.html, and the context, that we will see how to use it later.

After that minor changes, you'll see something like this.

Using the DTL

Now we will see the basics of Django template language.

Create a file base.html, inside the templates folder.

touch base.html

There we will paste the basic structure of a html Document.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Django Hello world</title>
    </head>

    <body>
        {% block body %}


        {% endblock body %}


    </body>

</html>

But with a little change we are using DTL tags. Those are of the shape {% tag %}. The tag we used in this case, is:

{% block [name of the block] %}


{% endblock [name of the block] %}

That tags, allow us to put html code, in block codes, as we are going to see now.

Template inheritance 😁

Now modify, the index.html file.

{% extends 'base.html' %}

{% block body %}
<h1>Hello world, this is my first template</h1>

<p>This is a cool html paragraph!</p>


{% endblock body %}

Here we just do a strange thing! 🤯, we used template inheritance, and DTL blocks.

You call, the inheritance with the tag {% extends "name of template" %}

And with the block tag you replace the content inside the block

{% block [name of block] %}
... Replaced content

{% endblock [name of block] %}

If we look at the source page of our page, we get something like this.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Django Hello world</title>
    </head>

    <body>

<h1>Hello world, this is my first template</h1>

<p>This is a cool html paragraph!</p>



    </body>

</html>

Context variables and for loops

We are going to pass context variables from our views. so let's modify the view

def helloworldview(request):

    template = "index.html"

    people = ["daniel", "nicolas", "tom", "henry"]

    context = {"people": people}    

    return render(request, template, context)

We are passing, a context dictionary to our template. Our key "people" is a list of strings.

Now we are going to make a for loop, to iterate through that list 😁.

{% extends 'base.html' %}

{% block body %}
<h1>Hello world, this is my first template</h1>

<p>This is a cool html paragraph!</p>


{% for person in people %}
    <p>{{person}}</p>
{% endfor %}


{% endblock body %}

As you may notice, the for loops in DTL are exactly the same as they are in Python.

And variables, in DTL are represented with {{ name_variable }}

If we check our server, we'll get something like
this. 🤯

Amazing, it isn't ?

Conclusion:

In this tutorial, you learned the basics of django.

From creating function based views, to building url patterns and using the Django template language 😃.

Any questions or doubts ? Let me know in the comments

Follow me in My blog,
to get more awesome tutorials like this one.
Please consider supporting me on Ko-fi you help me a lot to
continue building this tutorials!.

🐘 Set up A PostgreSql Database in Django

Daniel Diaz — Fri, 05 Mar 2021 01:44:36 +0000

Quick advice:

If you want a post that covers the deploy of a Django app, entirely go to this one

🎯 Tutorial: Deploying a Django app on Heroku

Daniel Diaz for Developer Road ・ Feb 18 '21

#heroku #deploy #devops #django

Creating an app on heroku

Before you create a free app on heroku you must create an account, here.

Once you have created your account, you will have a dashboard like this one.

To create an app click in New, and you will see a dropdown, with the option of Create new app.

Choose that, select a name and click on create app.

Now that you've created a new app, click in "Overview", and select configure addons.

Now search for heroku postgres and select it.

Modifying your settings file

Now you are almost ready to deploy to heroku, but first let's modify your settings, to be ready to be deployed.

Install django_heroku and python decouple

pip install gunicorn django-heroku python-decouple

I'll be only explaining the database set up, for other instructions, just read this tutorial

Using dj_database_url

dj_database_url is a package that comes bundled, with django_heroku.

It's function dj_database_url.config(), receives as a parameter the url config of a database, and transform that in the needed keys to get access to it.

Modifying:

# Import this packages previously dowloaded

import django_heroku
import dj_database_url
from decouple import config

# Go down until you find database stuff

# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases


# Commment out the sqlite database setup

# DATABASES = {
#     'default': {
#         'ENGINE': 'django.db.backends.sqlite3',
#         'NAME': BASE_DIR / 'db.sqlite3',
#     }
# }

# These lines make all the magic
DATABASES = {
    'default': dj_database_url.config(
        default=config('DATABASE_URL')
    )
}

Create a Procfile

Run this in the root directory of the app

touch Procfile

Open the file and copy the following line:

web: gunicorn (Your app).wsgi

This tells Heroku, that it must run a web process, with gunicorn as HTTP server and with a wsgi file located in (Your app). Remember to change (Your app) with the name of your project.

Freezing requirements.txt

To freeze a file with the requirements of your application, just run

pip freeze > requirements.txt

Heroku will search for that file, so don't forget to run that command.

Managing the deploy with Github

Deploys with Github are way easier than with the Heroku CLI tool, so don't forget to create a repository on Github with the app you are trying to deploy.

Push the changes you've made with

git add -A
git commit -m "Database Settings ready"
git push origin

Now in the heroku website, go to the Deploy tab and click in Connect with github.

You will be redirected, to Github in order to authorize access to your repos.

Now connect the repo you want to deploy

And finally in Manual deploy, click on Deploy branch.

Wait for it, if you get errors ....

Well just read the Heroku docs , or comment below your problems.

Thanks for your time hopefully this tutorial will be useful for you 🤗.

Follow me in My blog,
to get more awesome tutorials like this one.
Please consider supporting me on Ko-fi you help me a lot to
continue building this tutorials!.

Forem: Daniel Diaz

My Learning list for 2023: Plan and Resources 📑

1. Hardcore Problem Solving 📚

2. Calculus and Linear Algebra 🧮

3. Astro Framework 🚀

4. FastAPI and React ⚡

Wrapping up 🧐

How to Create an Astro Search component 🔍🤔

Creating an Astro Blog Project

Create the Astro Search Component

Building a React Search component

Demo

Apply Tailwind CSS styles

Summary

How to Create an Astro JS Project - Quick Start Guide

Install NPM and Node.JS

Create Astro Project with Setup Wizard

Create Astro Project Manually

Create Astro-required files

Astro Project Structure: Best Practices

Add frameworks to an Astro Project

Integrating Tailwind and Astro

Creating a Tailwind Navbar Component

Summary

The Dev.to writing tips ✍🏽🚀

6 Python Tips & Tricks that no One Teaches 🚀🐍

🎉 Giveaway ⚡

Select a random element from a sequence

Practical example

Limitations and Exceptions

Unpacking elements with *

Using unpacking with variables

Using set to optimize operations

Practical example

View attrs and methods of a class without exiting the editor

Practical example

Slices Operations

Reversing sequences

Practical example

Call a debugger in 10 letters

Example

Conclusion

5 CSS Tricks & Tips That You Should Know 🚀 + Giveaway

Garvit Motwani for World In Dev ・ Apr 20 '21

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani for World In Dev ・ Apr 6 '21

🤔 What really makes you a software developer?

Why this question? 😃

What is in fact a software developer?

Migrating from Lastpass to Bitwarden. I'm changing password manager 🙅

Before reading

Full Disclaimer

Lastpass is totally fine

Advantages of Bitwarden

Migration process

Exporting and Importing all of your passwords

Exporting

Importing

Installing the browser extension

Installing the mobile App

Enabling Auto fill in Bitwarden

Enable Bio metrics

Deleting Last Pass account?

Conclusion

👨‍💻Best VsCode extensions for Python Developers🐍

Why do you need good tools for create software? 🤔

Short answer

So what's the reason to spend time searching for the best tools?

Best extensions in Vscode for Python apps.

Python

Python snippets

Python Docstrings

Python indent

Python testing

Real time Python Runner

General purpose extensions

Indent Rainbow

Better comments

Git lens

Extensions for Python frameworks

Unpacking elements with `*`

Using `set` to optimize operations