DEV Community: Naveen Jujaray

Tell me interesting things about flutter.

Naveen Jujaray — Sat, 28 Nov 2020 16:09:12 +0000

I couldn't find best works done in flutter I hope you can share with me.

Adaptive Theme on Flutter

Naveen Jujaray — Tue, 01 Sep 2020 06:16:47 +0000

Easiest way to add support for light and dark theme in your flutter app. It allows to manually set light or dark theme and also lets you define themes based on the system (Works for Android only for now). It also persists the theme modes changes across app restarts.

Installation

add following dependency to your pubspec.yaml

dependencies:

adaptive_theme: ^1.0.0

Usage

You need to wrap your MaterialApp with AdaptiveTheme in order to apply themes

import 'package:adaptive\_theme/adaptive\_theme.dart';

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return AdaptiveTheme(

light: ThemeData(

brightness: Brightness.light,

primarySwatch: Colors.red,

accentColor: Colors.amber,

),

dark: ThemeData(

brightness: Brightness.dark,

primarySwatch: Colors.red,

accentColor: Colors.amber,

),

initial: AdaptiveThemeMode.light,

builder: (theme, darkTheme) => MaterialApp(

title: 'Adaptive Theme Demo',

theme: theme,

darkTheme: darkTheme,

home: MyHomePage(),

),

);

}

}

Changing Theme Mode

Now that you have initialized your app as mentioned above. It’s very easy and straight forward to change your theme modes: light to dark, dark to light or to system default.

// sets theme mode to dark

AdaptiveTheme.of(context).setDark();

// sets theme mode to light

AdaptiveTheme.of(context).setLight();

// sets theme mode to system default

AdaptiveTheme.of(context).setSystem();

Ceveats

Non-Persist theme changes

This is only useful in scenarios where you load your themes dynamically from network in the splash screen or some initial screens of the app. Please note that AdaptiveTheme does not persist the themes, it only persists the theme modes(light/dark/system). Any changes made to the provided themes won’t be persisted and you will have to do the same changes at the time of the initialization if you want them to apply every time app is opened. e.g changing the accent color.

Using SharedPreferences

This package uses sharedpreferences plugin internally to persist theme mode changes. If your app uses sharedpreferences which might be the case all the time, clearing your sharedpreferences at the time of logging out or signing out might clear these preferences too. Be careful not to clear these preferences if you want it to be persisted.

AdaptiveTheme.prefKey

You can use above key to exclude it while clearing the all the preferences.

Or you can call AdaptiveTheme.persist() method after clearing the preferences to make it persistable again as shown below.

final prefs = await SharedPreferences.getInstance();

await pref.clear();

AdaptiveTheme.persist();

for live example of adaptive_theme : click here

for more check this out

I'm building a Flutter OCR app

Naveen Jujaray — Mon, 24 Aug 2020 19:38:19 +0000

I'm building an Voice assisted Optical Character Recognition with Reading out recognised text loudly based on Flutter with firebase_ml_visionplugin.

The problem is I'm unable to read the recognised text loudly. Any ideas would be helpful.

Don't hesitate to open a discussion below.

Suggestion about Mini Project

Naveen Jujaray — Mon, 17 Aug 2020 16:51:18 +0000

I'm searching for Projects based on

Machine Learning
Deep Learning
Neural Network
Python
Java
C/C++ and which ever related to IEEE.

I hope you guys will help me out in the comment section below.
Thanks in advance.

Walls — Ad Free Wallpapers a Flutter App

Naveen Jujaray — Mon, 17 Aug 2020 00:00:00 +0000

Walls — Ad Free Wallpapers a Flutter App

“I’m a noob to Android Development but Flutter made Android Development simple in a way that i had completed this app with no skills in span of 14 Days, if you’re interested in Flutter then you should check what i made.”

Check Walls on Google Play

Introducing — Walls

Walls is a wallpaper service flutter application for Android Devices where the it’s beautiful photos are gifted by World’s Most Generous Community of Photographers and has a responsive UI which makes playful interact with users.

Flutter packages used in Walls

cupertino_icons, flutter_swiper, flutter_custom_clippers, intro_views_flutter, wave, font_awesome_flutter, url_launcher, url_launcher_web, dio, shared_preferences, random_string, image_picker_saver, permission, permission_handler, bottomreveal, charts_flutter, animated_floatactionbuttons, share, intl, flare_flutter, rxdart, rxdart_codemod, flutter_bloc, cached_network_image, wallpaper: package_info, flutter_staggered_grid_view, crop, http, image_gallery_saver, firebase_database, timeago, firebase_core, email_validator, cloud_firestore: firebase_auth, firebase_messaging, flutter_local_notifications, firebase_admob, quick_actions, full_screen_image, launch_review, in_app_purchase

Wallpapers service used in Walls

Walls is using an PexelsAPI as wallpaper service. Pexels is a free stock photo and video website and app that helps designers, bloggers, and everyone who is looking for visuals to find great photos and videos that can be downloaded and used for free. (no strings attached !!).

So Pexels made it clear it can be used by anyone so i used it as wallpaper service. There are more free stock photo websites like Pexels you should check them out.

Any thoughts of Ads ?

At first thought of implementing Ads in Walls which made me think about what i experienced about other wallpaper apps which i used before so, i thought of making Walls as an Open Source & Ad Free for the user.

It’s a disturbance to download or to choose a wallpaper in between of ads. Right ?

“Wallpaper of phone makes an personality of phone and person where ads make your personality delay in choose them.”

How to request for new features?

Users are important for an application whether it may most popular app or least popular. Here comes the feedback feature where you can post the feedback, issues, or request new features.

“As a developer, it matters all the time to update it to you.”

In which countries Walls is available ?

Walls — is published on Google Play and available in countries where Google play services serve which is almost all the countries so it can be suggested to a friend in your foreign country.

In-App-Purchase

The only in app purchase on Walls is to support the developer so, don’t worry about Subscriptions / No-Ads / Pro & others.

Get on Google Play

Check Walls on : It’s All Widgets!

Portfolio with Dark mode

Naveen Jujaray — Mon, 10 Aug 2020 07:24:08 +0000

A clean, beautiful and responsive portfolio template with Dark Mode enabled for Developers!

Source Code -- Live View

Dark-mode

Sections

✔️ Summary and About me

✔️ Skills

✔️ Proficiency

✔️ Achievements 🏆

✔️ Blogs

✔️ Contact me

for more details check this post

Portfolio Template using Flutter

Naveen Jujaray — Fri, 31 Jul 2020 17:13:09 +0000

“A clean, beautiful and responsive portfolio template for Developers !”

If you created something awesome and want to contribute then feel free to open Please don’t hesitate to open an pull request.

Source Code -- Live View

Desktop View

Tablet view

Mobile View

Sections

✔️ Summary and About me

✔️ Skills

✔️ Proficiency

✔️ Achievements 🏆

✔️ Blogs

✔️ Contact me

Getting Started

From your command line, clone and run developerFolio:

In-order to work with this repo you need to have flutter beta installed on your system.

# Clone this repository
$ git clone 

# Go into the repository
$ cd DeveloperFolio

# Get Packages
$ flutter pub get

# Build Web using Flutter
$ flutter build web

# Launch/View
$ flutter run -d chrome

Deployment 📦

When you are done with the setup, you should host your website online. We highly recommend to read through the docs for Firebase Hosting.

# Before you can install the Firebase CLI, you will need to install Node.js on your machine.
$ npm install -g firebase-tools

# Firebase Login
$ firebase login

# Initialize Firebase
$ firebase init

# Deploy to Firebase
$ firebase deploy

For the Future

Dark Mode
Connect with LinkedIn to get Summary, Skills, Education and Experience
Connect with Github to get Customized Pins, Profile Details Personalization Page to edit everything in once place.

For more details check my blog

🧰 50 Developer tools to make your life a little easier

Naveen Jujaray — Fri, 31 Jul 2020 06:30:00 +0000

Fifty (plus) applications, chrome extensions, web apps, and everything in between that will hopefully come in handy at some point in your programming life. I will keep updated as new tools are discovered. Please feel free to add to the comments anything you find.

1. Whatruns

A free browser extension that helps you identify technologies used on any website at the click of a button.

Go to Site Whatruns

2. Sizzy

The browser for developers. Stop wasting time and speed up your development workflow

Go to Site Sizzy

3. Log Rocket

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster

Go to Site Log Rocket

4. Sentry

Sentry’s application monitoring platform helps every developerdiagnose, fix, and optimize the performance of their code.

Go to Site Sentry

5. Can I Use?

“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Go to Site Can I Use

6. Prettier

An opinionated code formatter, Supports many languages,Integrates with most editors,Has few options.

Go to Site Prettier

7. CSS Scan

Goodbye to “Inspect Element” — Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

Go to Site CSS Scan

8. Bundlephobia

Find the cost of adding a npm package to your bundle

Go to Site Bundlephobia

9. Cypress

Fast, easy and reliable testing for anything that runs in a browser.

Go to Site Cypress

10. Unminify

Free tool to unminify (unpack, deobfuscate) JavaScript, CSS, HTML, XML and JSON code, making it readable and pretty.

Go to Site Unminify

11. RegEx 101

Free PCRE-based regular expression debugger with real time explanation, error detection and highlighting.

Go to Site RegEx 101

12. Clear Cache

Clear your cache and browsing data with a single click of a button.

Go to Site Clear Cache

13. Window Resizer

Resize the browser window to emulate various screen resolutions.

Go to Site Window Resizer

14. Wappalyzer

Wappalyzer is a utility that uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more

Go to Site Wappalyzer

15. MDN

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

Go to Site MDN

16. Axe

The Standard in Accessibility Testing. Chosen by Microsoft, Google, development and testing teams everywhere, axe is the World’s leading digital accessibility toolkit.

Go to Site Axe

17. Git Graph

Git Graph extension for Visual Studio Code. View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

Go to Site Git Graph

18. Kontrast - WCAG Contrast Checker

Quickly check and adjust contrast in realtime in your browser to meet WCAG 2.1 requirements.

Go to Site Kontrast

19. Octotree

Browser extension that enhances GitHub code review and exploration.

Go to Site Octotree

20. Postwoman

Web alternative to Postman - Helps you create requests faster, saving precious time on development

Go to Site Postwoman

21. Responsively App

Develop responsive web apps 5x faster! A must-have DevTool for all Front-End developers that will make your job easier.

Go to Site Responsively App

22. FullStory

Deliver exceptional experiences by letting our easy-to-use, intelligent software pinpoint when, where, and how user struggle is affecting your revenue and retention

Go to Site FullStory

23. gitignore.io

Create useful .gitignore files for your project

Go to Site gitignore.io

24. 1Loc

206 Favorite JavaScript Utilities in single line of code! No more!

Go to Site 1Loc

25. Does it mutate?

Go to Site Does it mutate?

26. Keycode

Press any key to get the JavaScript event keycode

Go to Site Keycode

27. Worth It: Modern JS edition

This tool analyzes a page to determine how much less JavaScript is downloaded in modern browsers as a result of it using the module/nomodule pattern.

Go to Site Worth It

28. npmview

A web application to view npm package files.

Go to Site npmview

29. CSS to JS

Transform between CSS, JS Objects and JSX props.

Go to Site CSS to JS

30. All Characters

A simple page that shows all the different characters and their HTML code.

Go to Site All Characters

31. Shape Catcher

This is a tool to help you find Unicode characters. Finding a specific character whose name you don’t know is cumbersome. On shapecatcher.com, all you need to know is the shape of the character!

Go to Site Shape Catcher

32. Mocky

Don’t wait for the backend to be ready, generate custom API responses with Mocky and start working on your application straightaway

Go to Site Mocky

33. Explain Shell

Write down a command-line to see the help text that matches each argument

Go to Site Explain Shell

34. Base64 Image

Convert your images to Base64

Go to Site Base64 Image

35. Open Graph Check

When sharing content on Facebook and other social networks, clickattractivity is really important. An optimized preview tailored to the target group leads to significant improvements in the Click Trough Rate. Opengraphcheck.com will help you do the job best. And the most awesome thing is the Open Graph Check is for free!

Go to Site Open Graph Check

36. Brotli pro

Brotli. Next Level. Compression. Ready?

Go to Site Brotli pro

37. Responsive Breakpoints

Easily generate the optimal responsive image dimensions

Go to Site Responsive Breakpoints

38. Is my host fast yet?

Real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web.

Go to Site Is my host fast yet?

39. Check My Links

Check My Links is a link checker that crawls through your webpage and looks for broken links.

Go to Site Check My Links

40. JSON Web Token

Encode or Decode JWTs

Go to Site JSON Web Token

41. Git Kraken

Legendary Git client for Windows, Mac & Linux. Free for open source

Go to Site Git Kraken

42. BEM Cheat Sheet

When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don’t always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components.

Go to Site BEM Cheat Sheet

43. Can I Email

Go to Site Can I Email

44. CSS Grid Generator

You can set the numbers, and units of your columns and rows, and I’ll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

Go to Site Css Grid Generator

45. Screen size map

A comparison of screen sizes in device-independent pixel

Go to Site Screen size map

46. Who can use?

Who can use this color combination?

Go to Site Who can use?

47. Will it CORS?

Tell this magic CORS machine what you want, and it’ll tell you exactly what to do.

Go to Site CORS

48. extractCSS

Extract CSS from HTML

Go to Site extractCSS

49. Metatags

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

Go to Site Metatags

50. Shieldfy

Automatically identify and fix security issues and vulnerabilities in your code before it hits to production.

Go to Site Shieldfy

51. YAML Checker

YAML Checker provides a quick and easy way to validate YAML. As you type, your YAML will be validated with beautiful syntax highlighting and error information.

Go to Site YAML Checker

52. Polypane

All the tools you need to build amazing responsive, accessible and fast websites and apps in a single standalone browser.

Go to Site Polypane

Flutter for Web

Naveen Jujaray — Mon, 20 Jul 2020 00:30:00 +0000

What is Flutter Web?

A connected Progressive Web Application built with Flutter

Web support for Flutter enables existing mobile-based applications to be packaged as a PWA for reach to a broader variety of devices, or to provide a companion web experience to an existing app.

In addition to mobile apps, Flutter supports the generation of web content rendered using standards-based web technologies: HTML, CSS and JavaScript. With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.

Flutter Solves The Backend & Frontend Problem

Flutter’s reactive framework brushes aside the need to get references to the widgets. On the other hand, it facilitates a single language to structure backend. That’s why Flutter is the best app development framework in the 21st century to be used by Android developers.

How to activate Flutter Web ?

if you want to install flutter check this article.

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

 $ flutter channel beta
 $ flutter upgrade
 $ flutter config --enable-web

Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.

 flutter devices
2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129

Create and run

To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:

 $ flutter create myapp
 $ cd myapp

To serve your app from localhost in Chrome, enter the following from the top of the package:

$ flutter run -d chrome

A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run --release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together.

Add web support to an existing app

To add web support to an existing project, run the following command in a terminal from the root project directory:

$ flutter create .

Hosting

Check out this page to know more about hosting Flutter Web.

The Magic Of Interactive UI With React

Naveen Jujaray — Fri, 17 Jul 2020 00:30:00 +0000

What Is React?

Do you remember how Facebook’s UI or it’s messenger looked a few years back? During that time you had to refresh or reload the entire page for new updates or messages repeatedly. But now it’s no longer required. Today, each time there is a new update or message, a notification will pop up. Clicking on that will then automatically refresh your page and show you the latest updates. So, how exactly does this happen? Well, this is the magic of ReactJS and in this blog, I am going to discuss what is React and why you should go for it.

JavaScript Frameworks

Javascript is a dynamic programming language which is widely used for developing web applications. It is very lightweight and is supported by most of the modern browsers. Moreover, JavaScript supports both object-oriented programming and procedural programming. Thus, it is used for creating web pages with a client-side script to interact with the user and make the web pages dynamic and robust.JavaScript has many frameworks among which we can choose depending on our need. Below diagram shows some popular JavaScript frameworks.

Following are the major advantages provided by the JavaScript Frameworks:

Efficiency: With the use of pre-built patterns and functions, the development of the applications became easy. The projects which used to take months to develop can now be developed in very less time. This increased the efficiency as well as reduced the time and effort involved.
Security: As JavaScript is an open source community, its top frameworks have strong security arrangements. Frameworks are supported by these large communities in which, the members and the users can also act as testers. This increases the chances of detecting any kind of backdoor or bug present in the framework. Thus providing better security at less cost.
Cost Reduction: JavaScript Frameworks are free for public use as they are open source. So, when we develop a web application using these frameworks, the overall cost of the application is much lesser.

Because of all these advantages, JavaScript frameworks are used heavily for developing web-applications. They have already proved their potential over the past few years. Among them, the most popular ones are React and Angular. “Even though React is young, it is giving a neck to neck competition to Angular”.

So, through this blog, we’ll be learning all about ReactJS. But before understanding what is React, you need to understand why we need it in the first place.

Why React?

There were so many JavaScript frameworks available in the market but still React came into the picture. Let’s dive little deeper and find out the reason why ReactJS was needed.

Here, the data is received from various sources like initial data, real-time data and user input data which is passed to the dispatcher. The dispatcher then forwards this data to the store, from where it ultimately comes to the view. Now, the view is the part where you or a user interact with the application. So, whatever you see on the browser as a web page is the view itself.

But, what do you think happens at the back end of the frameworks using this traditional data flow?

Each time new data is added or any data is updated at the back end, the browser reloads the web page and repeats the whole process again. Only after this, we can see the updated data on the view. But this traditional data flow has one major drawback, it uses the DOM (Document Object Model). DOM is an object that is created by the browser each time a web page is loaded which can dynamically add or remove the data at the back end. But each time any modifications were done a new DOM is created for the same page. This repeated creation of DOM results in unnecessary memory wastage and a decrease in applications performance.

Moreover, manipulating DOM was very expensive. Therefore, there was a search for new technology which could save us from this trouble. This is where ReactJS comes to our rescue. With ReactJS, you can divide your entire application into various independent components. ReactJS applications still used the same traditional data flow, but something changed at the back end. Below diagram shows exactly what was going on at the back end.

Now, each time any data is added or updated from the back end, ReactJS uses a new tactic to deal with it. Instead of reloading the entire page, what React does is, it just destroys the old view. Afterward, it renders the view components with updates or new data and then places the new view in place of the old one. As a solution to the memory wastage due to DOM, React introduced Virtual DOM. You might be curious about what is this virtual DOM and how it solves our problem? Don’t worry, I’ll be explaining that later in this blog in detail, but for now, let’s understand what is React.

What Is React?

React is a component-based library which is used to develop interactive UI’s (User Interfaces). It is currently one of the most popular JavaScript front-end libraries which has a strong foundation and a large community supporting it.

NOTE: ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model – View – Controller).

What is Gatsby JS and Why Use It?

Naveen Jujaray — Thu, 16 Jul 2020 00:30:00 +0000

What Is Gatsby JS?

Welcome! In this article we are going to learn about Gatsby JS, what it is and why you would use it.

So let’s start with the question, “What is Gatsby?”

Put most simply, Gatsby is a static site generator.Now what does that mean?

What is a Static Site Generator?

The static site part of this means that what Gatsby will produce for us are static HTML files that we load up on to a server.

Now this works differently than how a lot of websites work where you visit a website and it has to go query a database or do some programming on the server itself in order to serve your web pages.

So Gatsby is going to break that convention and have all of the stuff already pre-configured ahead of time and just serve that up.

It’s important to point out that static sites do not mean not interactive or not dynamic.So, we can load JavaScript into the HTML files that Gatsby serves as well as make API calls do interactions and build incredibly rich and immersive sites even though they are static in their nature of just being HTML files served up without programming server-side languages running.

So that’s the static side of things.

Gatsby is also a generator. This means that Gatsby is actually a tool we run on our computer most commonly, although you can run Gatsby on a server, and it is going to generate content for you.

In the common setup that we’ll practice here we run Gatsby locally on our computer when we’re building a site and then we generate out the final finished product that Gatsby will spit out, which is a Gatsby static site, and again this will include HTML CSS JavaScript images all the stuff that we need for our site to run, Gatsby will generate it for us so we want to think of Gatsby as a tool that will help us build a final product but we’re not just like in queueing and throwing Gatsby into an existing site necessarily.

In order to do all of this generation Gatsby is going to use Node JS. Node will be running in a development environment on your computer itself. However the final sight when you ship a Gatsby sight live because it’s static it will not need Node JS on the server itself.

It’s using node to help generate the files as part of its tooling system but the final result does not require node to run on the server side.

Gatsby JS Uses GraphQL

One of the great things about Gatsby is that it’s going to use the GraphQL querying language to get data from anywhere.

If you’re not familiar with GraphQL, it is an evolution of how to make API calls simpler and more efficient. And it’s a really great tool that you’re probably going to enjoy getting into if you don’t already know it.

The most exciting part of this is that we can get our data into a Gatsby site from anywhere!

We could use markdown files, we can access databases, we could hook into common CMS’s like WordPress and other headless CMS, as well as even just a CSV file.

Because we have node running in our development environment and we have this GraphQL language, we have a huge range of abilities of what we could do to pull data into Gatsby itself.

This is important to remember that Gatsby is not going to handle our data for us rather it will get that data pulled into Gatsby and generate the site from that data.

Gatsby Uses React for Templates

Gatsby also uses React and CSS which hopefully you’re familiar with. React is going to be used for all of the templates and CSS for the styling.

So, GraphQL will pull in our data, React will take care of what the template should look like and the styling is CSS. Then finally everything will be exported out into that final, super fast static Gatsby site.

Gatsby Has a Rich Plugin Ecosystem

I also want to mention that Gatsby is built with a plugin architecture and this is a great system.

Because what we’re serving up is a static site how we go about interacting with JavaScript and other things can get a little complicated. So it’s really nice that we could pull this complex code out into plugins and we could rely on a huge ecosystem of other plug-in authors to do some of the heavy lifting with common things for us.

This plugin architecture is a huge part of Gatsby and what makes it so popular and powerful.

“What is Gatsby?” Review

So just to briefly review, Gatsby is a static site generator that uses GraphQL to get data, React for templating and it’s got a plugin architecture.

So that is “What is Gatsby?”

Why Use Gatsby?

Now let’s talk about “Why Use Gatsby?”

In one simple sentence, you use Gatsby for its speed security and improved developer experience.

Arguably one of the biggest gains that you get with Gatsby, because it is generating a static site, is going to be the speed.

It is going to be way faster than many of the alternatives, even compared to cached sites using WordPress and things like that because that static site is really hard to beat in terms of its speed and performance.

Also because of the static nature and just shipping HTML files this is going to be inherently more secure.

There isn’t a live database to hack or access. There is not user data that is going to be stored on the server with the Gatsby site. So even if somebody were to be able to hack the server itself they’re still only going to get access to HTML files and will be able to do far less damage than they could if they were getting access to for example a WordPress site or had access to the user data or purchasers credit card information and all that kind of stuff.

So we’re gonna have huge security gains when we work with Gatsby.

Finally, the third major gain with Gatsby is improved developer experience.

I’m really glad that this is something important in the developer community today. It can be really draining and annoying for developers to work with antiquated stacks.

One of the nice things about working with Gatsby is that you have a modern development environment. The tooling is simple and robust. The languages are modern and clean. Overall it’s a really great environment to be working in. That extends also into the community of other developers.

If you are a developer this should be super clear to you and exciting. If you’re not a developer and learning about Gatsby at a high level, remember that this is something you really need to value in your projects: the developers overall experience.

Gatsby JS is Open Source with a Paid Team

The last thing to remember about all of this is that Gatsby has a solid team open-source community and great documentation.

Gatsby is an open-source project which has some great wins in terms of its ability to grow and people contribute to it. Also it’s free! That’s no small thing.

However, unlike some open-source communities, Gatsby also has a team of professional, paid people that are there to help the open-source project grow and flourish.

This is a great thing if you’re considering investing in a technology that might not have the long term support you probably don’t have to worry about that with Gatsby.

Gatsby Values Documentation

Additionally, there is great documentation and that is really helpful when working with a tool to know that you’ll be supported in the documentation. The Gatsby team seems to take that seriously and do a great job with it.

A Quick Review of Gatsby JS

So, all that said let’s just do a quick review here of everything that we’ve learned:

Gatsby is a static site generator
Under the hood it uses Node, GraphQL and React
Its primary benefits are speed security and developer experience
Gatsby has a stable and growing community of developers and plug-in authors

Create your own blog easily with Gatsby

Naveen Jujaray — Tue, 14 Jul 2020 06:53:00 +0000

Gatsby is a Static site generator. (There are so many kinds of generator like Jekyll(Ruby), Hexo(Node.js), Hugo(Go), etc.) Gatsby support PWA(Progressive Web App), Hot reloading, SSR(Server Side Rendering).

You can see more detailed in this link.

Install Gatsby CLI and Gatsby Starter

$ npm i -g gatsby-cli
$ gatsby new <<BLOG_NAME>> https://github.com/wonism/gatsby-advanced-blog
$ cd <<BLOG_NAME>>
$ npm run dev

Basic structure of project

The project has the following structure.

src/
├── components
│ ├── ... # Many of shared sections
│ └── layout.jsx # general layout for page
├── constants
├── containers # to connect states to react component
├── html.jsx # page template for page
├── pages # pages of your web site
│ ├── 404.jsx
│ └── index.js
├── postComponents # react application that will be added in page
│ └── ...
├── resources # asset files
│ └── images
├── store # to use redux
│ ├── ...
│ └── index.js
├── templates # template for creating page with file system
│ └── ...
└── utils # utilities
    └── ...

Create a post

$ mkdir src/pages/<<DIRECTORY_NAME>>
$ touch src/pages/<<DIRECTORY_NAME>>/index.md

These markdown files are referred by the gatsby-source-filesystem and converted to HTML files by gatsby-transformer-remark.

These are called at build time. You can check this createPages in gatsby-node.js.

Caution

There is a .sample.md file in «PROJECT_ROOT»/src/pages.If you delete this file, you can not get category, image, etc. in frontmatter of GraphQL query.

The .sample.md file serves as the dummy data and creates custom frontmatter fields.

The basic components of a markdown file

---
path: "/hello-world/"
category: "Sample"
tags: ["tag", "should", "be", "array"]
title: "Hello, World!"
date: "2018-08-15T00:00:00.000Z"
summary: "You can create your own blog with Gatsby!"
---

Content of this page

path is a required attribute to create a page. It must be unique.
category allows you to create category pages and access to pages like /categories/<<CATEGORY_NAME>>/<<PAGE_NUMBER>>.
tags allows you to create tag pages and access to pages like /tags/<<TAG_NAME>>/<<PAGE_NUMBER>>.
As you can see the name oof property. title is the title of the page, and summary is a summary of the page.
date is the date the post was created, and posts are sorted based on it.

(You can more detailed information about the formatting in gray-matter.)

Those will be called by query in src/templates/Post.jsx. and you can run the query directly on http://localhost:8000/___graphql

Add image into post

images: ["(<<src/resources/>>)PATH_TO/IMAGE"]

Use an absolute path including http:// or https://. or use a relative path relative to src/resources.( On line 145 ofcomponents/Post/index.jsx , the image is imported via IF CONDITION ? «image» : ‘«src/resources/${image}»‘ )

Add react application into post

---
path: "/inject-app/"
category: "Sample"
tags: ["tag", "must", "be", "array"]
title: "Injecting React application"
date: "2018-08-15T00:00:00.000Z"
summary: "You can inject react application into post"
components: [{
  rootId: 'sample-component', # <div id="sample-component"></div> must be in contents
  fileName: 'sample', # this will render src/postComponents/sample/index.jsx
}]
---

1. ...

<div id="sample-component"></div>

2. ...

Put an object in the array. Object has to include the path to the file of the react application that is to be added and the ID of the tag to be rendered.

Then, in the middle of the article, add the tag with this ID where you want to insert the react application.

Add tweet into post

---
path: "/inject-tweet/"
category: "Sample"
tags: ["tag", "must", "be", "array"]
title: "Injecting Tweet"
date: "2018-08-15T00:00:00.000Z"
summary: "You can inject tweet into post"
tweets: [{
  rootId: 'sample-tweet', # <div id="sample-tweet"></div> must be in contents
  userId: 'twitter', # twitter user id
  tweetId: '977557540199456775', # tweet id
}]
---

1. ...

<div id="sample-tweet"></div>

2. ...

Put an object in the array. Object has to include the tweet’s ID and the author or the tweet and the ID of the tag to be rendered.

You can use it as you added the react application.

Add codes into post

If you write the three back quote before and after the codes that you want to highlight, It will be highlighted by gatsby-remark-prismjs.

Add portfolios

$ mkdir src/resources/<<DIRECTORY_NAME>>
$ touch src/resources/<<DIRECTORY_NAME>>/index.md

---
type: "portfolio"
title: "Gatsby Advanced Blog"
date: "2018-08-15T00:00:00.000Z"
path: "/portfolios/portfolio-1/"
images: [
  "test-1/1.png",
  "test-1/2.png",
]
---

# Gatsby Advanced Blog

## What I did
- Develop Gatsby Advanced Blog

## Libraries / Tools
- ReactJS
- Redux
- Redux saga
- ...

[Go to Web Site →](https://github.com/wonism/gatsby-advanced-blog)

path is a required attribute to create a page. It must be unique.
type is a value that allows you to specify the format of the page, in this case it should be portfolio.
title is the title of the portfolio.
images are the images you want to attach to the portfolio and have the same value as the post’s. Images are rendered in the order they were added to the array.
Portfolios are sorted based on the data. Give a bigger value to the portfolio to show first.

Portfolios will be shown one the portfolio page. and if there are more than 4, they will be shown on the home page.

(You can see it in src/components/Home and modify how it is rendered.)

Add resume

---
type: "resume"
title: "Resume"
date: "2000-01-01T00:00:00.000Z"
path: "/resume/"
---

## Experience
- Engineer at OOO ∙ 2000. 01 ~ Present
  - Develop something
  - Maintain something

## Education
- B.S. in Computer Science Engineering at OOO
  - 2000. 01 ~ 2000. 01

## Projects
- Gatsby Advanced Blog (https://github.com/wonism/gatsby-advanced-blog) ∙ 2000. 01 ~ Present
  - Integrate Redux
    - Use Redux, Redux Saga, Reselect...

## Skills
- JavaScript
  - ES2015+
  - ReactJS
  - Lodash
- CSS
  - SASS
  - Less

path is a required attribute to create a page. It must be unique.
type is a value that allows you to specify the format of the page, in this case it should be portfolio. ## Other features
On the right side of the GNB, you can search posts by title, summary, tag, category, etc. of the post.
When you add codes in markdown, a button will be created automatically. If user clicks the button, user can copy the codes. ## Deployment

You can build the application with npm run build.Then you can distribute it where you want. You can see this article on this link.