Giles  Goodwin

Giles Goodwin

1599503400

Setting up a full static Nuxt site

When I start a project these days I usually choose Nuxt for it. Why? Because I can do all the things I do with plain Vue.js in less time, thanks to its conventions and the amazing Nuxt modules.

Some people think because of these conventions you lose flexibility. That’s far from the truth: I’ve been using Nuxt for the last 2 years and I haven’t found a case where I can’t do what I wanted to do.

I’ve been using it even in Sprinter, one of the biggest Spanish sports E-Commerce. I spoke about the challenges we faced in this talk on Vue Day 2019.

But what I love the most about Nuxt is that you can produce 3 types of applications mostly with the same code:

  • SSR (Server Side Rendered): they’re rendered on the server for every request. Sprinter works like that.
  • SPA (Single Page Application): client-only javascript based apps. Nowadays, they’re quite well-known.
  • Static Generated: a.k.a. Jam Stack. Similar to SSR, but the html is rendered at compile time, so they don’t need a server while also being SEO friendly.

VueDose is built as a static generated site, for different reasons:

  • SEO friendly
  • Very fast: HTML is already rendered
  • Saving on resources: it doesn’t need a server, so you’re saving money and the planet

Since Nuxt 2.13, we can create full static websites. In other words: you can generate a pure HTML + CSS + JavaScript site. All the Ajax calls to any API’s are made at compile time, and then stored in json files locally.

What does that mean? Easy: huge performance boost.

But hey that’s too much introduction, right? Let’s start building NarutoDose!

The Stack

Nuxt.js

I think I showed enough love to Nuxt, right? Ok fine let’s show Nuxt love once more 💚💚💚

Storyblok (vs Nuxt Content Module)

Nuxt’s recent release, @nuxt/content: an amazing module for creating your contents under a content/ folder by default. Your contents can be in Markdown, Yaml, JSON and other formats and it exposes an API where you can query those contents. Honestly, this was the missing part in the Nuxt ecosystem for indie tech bloggers.

You might think, couldn’t you create VueDose with @nuxt/content? Yeah, I definitely could. But I didn’t.

Why? Because, even though they both have things in common such as:

  • A flexible API to query contents, including full-text search
  • Ability to schedule content
  • Ability to use rich text format, such Markdown

There are definitely different:

  • @nuxt/content: it acts as a git-based CMS, meaning that people need to be familiar with git. That’s ok for most tech blog cases, just something to be aware of.
  • Storyblok: it’s much more than that. Although easy to use, it’s a fully cloud-based CMS product that has more features for working with content such as, being able to define a schema, relationships and even a visual editor. It can be extended with plugins, although by default you also have roles, on-the-fly image resizing service, assets managements, and more. It can be managed by a non-dev user.

Since I wanted to leverage the power of Storyblok on VueDose, that was an easy decision to make. No worries, soon you’ll know how to do it too 😉.

#nuxt

What is GEEK

Buddha Community

Setting up a full static Nuxt site
Tyrique  Littel

Tyrique Littel

1604008800

Static Code Analysis: What It Is? How to Use It?

Static code analysis refers to the technique of approximating the runtime behavior of a program. In other words, it is the process of predicting the output of a program without actually executing it.

Lately, however, the term “Static Code Analysis” is more commonly used to refer to one of the applications of this technique rather than the technique itself — program comprehension — understanding the program and detecting issues in it (anything from syntax errors to type mismatches, performance hogs likely bugs, security loopholes, etc.). This is the usage we’d be referring to throughout this post.

“The refinement of techniques for the prompt discovery of error serves as well as any other as a hallmark of what we mean by science.”

  • J. Robert Oppenheimer

Outline

We cover a lot of ground in this post. The aim is to build an understanding of static code analysis and to equip you with the basic theory, and the right tools so that you can write analyzers on your own.

We start our journey with laying down the essential parts of the pipeline which a compiler follows to understand what a piece of code does. We learn where to tap points in this pipeline to plug in our analyzers and extract meaningful information. In the latter half, we get our feet wet, and write four such static analyzers, completely from scratch, in Python.

Note that although the ideas here are discussed in light of Python, static code analyzers across all programming languages are carved out along similar lines. We chose Python because of the availability of an easy to use ast module, and wide adoption of the language itself.

How does it all work?

Before a computer can finally “understand” and execute a piece of code, it goes through a series of complicated transformations:

static analysis workflow

As you can see in the diagram (go ahead, zoom it!), the static analyzers feed on the output of these stages. To be able to better understand the static analysis techniques, let’s look at each of these steps in some more detail:

Scanning

The first thing that a compiler does when trying to understand a piece of code is to break it down into smaller chunks, also known as tokens. Tokens are akin to what words are in a language.

A token might consist of either a single character, like (, or literals (like integers, strings, e.g., 7Bob, etc.), or reserved keywords of that language (e.g, def in Python). Characters which do not contribute towards the semantics of a program, like trailing whitespace, comments, etc. are often discarded by the scanner.

Python provides the tokenize module in its standard library to let you play around with tokens:

Python

1

import io

2

import tokenize

3

4

code = b"color = input('Enter your favourite color: ')"

5

6

for token in tokenize.tokenize(io.BytesIO(code).readline):

7

    print(token)

Python

1

TokenInfo(type=62 (ENCODING),  string='utf-8')

2

TokenInfo(type=1  (NAME),      string='color')

3

TokenInfo(type=54 (OP),        string='=')

4

TokenInfo(type=1  (NAME),      string='input')

5

TokenInfo(type=54 (OP),        string='(')

6

TokenInfo(type=3  (STRING),    string="'Enter your favourite color: '")

7

TokenInfo(type=54 (OP),        string=')')

8

TokenInfo(type=4  (NEWLINE),   string='')

9

TokenInfo(type=0  (ENDMARKER), string='')

(Note that for the sake of readability, I’ve omitted a few columns from the result above — metadata like starting index, ending index, a copy of the line on which a token occurs, etc.)

#code quality #code review #static analysis #static code analysis #code analysis #static analysis tools #code review tips #static code analyzer #static code analysis tool #static analyzer

Ahebwe  Oscar

Ahebwe Oscar

1623192840

Does My Site Work?

EPISODE SUMMARY

On this episode, we will discuss how you can verify that your site works and continues to work. We’re digging into automated testing and how to write tests for your Django apps.

Full show notes are available at https://www.mattlayman.com/django-riffs/13.

EPISODE NOTES

Full show notes are available at https://www.mattlayman.com/django-riffs/13.

#does my site work? #your site is #episode summary #episode notes #the site. #my site work

I am Developer

1597475640

Laravel 7 Full Text Search MySQL

Here, I will show you how to create full text search in laravel app. You just follow the below easy steps and create full text search with mysql db in laravel.

Laravel 7 Full Text Search Mysql

Let’s start laravel full-text search implementation in laravel 7, 6 versions:

  1. Step 1: Install Laravel New App
  2. Step 2: Configuration DB .evn file
  3. Step 3: Run Migration
  4. Step 4: Install Full Text Search Package
  5. Step 5: Add Fake Records in DB
  6. Step 6: Add Routes,
  7. Step 7: Create Controller
  8. Step 8: Create Blade View
  9. Step 9: Start Development Server

https://www.tutsmake.com/laravel-full-text-search-tutorial/

#laravel full text search mysql #laravel full text search query #mysql full text search in laravel #full text search in laravel 6 #full text search in laravel 7 #using full text search in laravel

Vincent Lab

Vincent Lab

1605177550

Building a Static Website with Hugo

#hugo #static #site #generator #markup #static site generator

Giles  Goodwin

Giles Goodwin

1599503400

Setting up a full static Nuxt site

When I start a project these days I usually choose Nuxt for it. Why? Because I can do all the things I do with plain Vue.js in less time, thanks to its conventions and the amazing Nuxt modules.

Some people think because of these conventions you lose flexibility. That’s far from the truth: I’ve been using Nuxt for the last 2 years and I haven’t found a case where I can’t do what I wanted to do.

I’ve been using it even in Sprinter, one of the biggest Spanish sports E-Commerce. I spoke about the challenges we faced in this talk on Vue Day 2019.

But what I love the most about Nuxt is that you can produce 3 types of applications mostly with the same code:

  • SSR (Server Side Rendered): they’re rendered on the server for every request. Sprinter works like that.
  • SPA (Single Page Application): client-only javascript based apps. Nowadays, they’re quite well-known.
  • Static Generated: a.k.a. Jam Stack. Similar to SSR, but the html is rendered at compile time, so they don’t need a server while also being SEO friendly.

VueDose is built as a static generated site, for different reasons:

  • SEO friendly
  • Very fast: HTML is already rendered
  • Saving on resources: it doesn’t need a server, so you’re saving money and the planet

Since Nuxt 2.13, we can create full static websites. In other words: you can generate a pure HTML + CSS + JavaScript site. All the Ajax calls to any API’s are made at compile time, and then stored in json files locally.

What does that mean? Easy: huge performance boost.

But hey that’s too much introduction, right? Let’s start building NarutoDose!

The Stack

Nuxt.js

I think I showed enough love to Nuxt, right? Ok fine let’s show Nuxt love once more 💚💚💚

Storyblok (vs Nuxt Content Module)

Nuxt’s recent release, @nuxt/content: an amazing module for creating your contents under a content/ folder by default. Your contents can be in Markdown, Yaml, JSON and other formats and it exposes an API where you can query those contents. Honestly, this was the missing part in the Nuxt ecosystem for indie tech bloggers.

You might think, couldn’t you create VueDose with @nuxt/content? Yeah, I definitely could. But I didn’t.

Why? Because, even though they both have things in common such as:

  • A flexible API to query contents, including full-text search
  • Ability to schedule content
  • Ability to use rich text format, such Markdown

There are definitely different:

  • @nuxt/content: it acts as a git-based CMS, meaning that people need to be familiar with git. That’s ok for most tech blog cases, just something to be aware of.
  • Storyblok: it’s much more than that. Although easy to use, it’s a fully cloud-based CMS product that has more features for working with content such as, being able to define a schema, relationships and even a visual editor. It can be extended with plugins, although by default you also have roles, on-the-fly image resizing service, assets managements, and more. It can be managed by a non-dev user.

Since I wanted to leverage the power of Storyblok on VueDose, that was an easy decision to make. No worries, soon you’ll know how to do it too 😉.

#nuxt