Modern Static Site with GatsbyJS

Nov 26, 20183 likes1,043 views

GatsbyJS is a site generator that allows you to build modern, fast and secure apps and websites using React, GraphQL, and other tools. It focuses on developer experience with batteries included and features like hot reloading. Popular sites using Gatsby include reactjs.org, airbnb.io, and figma.com. Gatsby gets data from various sources and delivers sites via services like S3, Netlify, and GitHub Pages. Developers can install Gatsby globally, generate a new Gatsby site, and develop locally while previewing changes in real time.

GatsbyJS
Build modern, fast, secure apps with React and friends.

Request
Response (HTML, CSS, JS)
Client
Server
Database

Where is the problem?
Cheap hosting?
The platform?
Slow language?
Bottleneck in database?
What about security?  
example.com/wp-admin ?

!!---
layout: base
!!---
{% include header.html type="post" %}
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<article role="main" class="blog-post">
{{ content }}
!</article>
<ul class="pager blog-pager">
{% if page.previous.url %}
<li class="previous">
<a href="{{ page.previous.url | prepend: site.baseurl | replace: '!//', '/' }}"
data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">← Previous Post!</a>
!</li>
{% endif %}
{% if page.next.url %}
<li class="next">
<a href="{{ page.next.url | prepend: site.baseurl | replace: '!//', '/' }}"
data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post →!</a>
!</li>
{% endif %}
!</ul>
{% if page.comments %}
<div class="disqus-comments">
{% include disqus.html %}
!</div>
{% include fb-comment.html %}
{% endif %}
!</div>
!</div>
!</div>

Buildmodern
apps and websites with
blazing fastbeautifulsecure
ReactGraphQLWebpackPostCSSetc.

Batteries IncludedHot ReloadingFeel very natural to React DevEntire React ecosystem via npm

Bonus: Single-page ApplicationProgressive Web Apps

Get data fromMarkdownContentfulWordpressREST APISpreadSheetAnywhere.

Write app better withReactReduxWebpackGraphQLESLintPrettier.

Deliver via Amazon S3NetlifyGitHub PagesSurge.shNow.shAerobaticMany more.

“Talk is cheap show me the code” — Linus Torvalds

$ gatsby new gatsby-site
$ cd gatsby-site
$ gatsby develop
$ open http:!//localhost:8000/

├── .cache
├── public
├── src
│   ├── components
│   │   ├── header.js
│   │   ├── layout.css
│   │   └── layout.js
│   ├── images
│   │   └── gatsby-icon.png
│   ├── pages
│   │   ├── 01-first-blog
│   │   ├── 404.js
│   │   ├── index.js
│   │   ├── page-2.js
│   │   └── page-3.js
│   └── templates
│   └── post.js
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
└── yarn.lock

Bonus Step: Make changes, automatic redeploy

Summary
Gatsby is site generator with latest technology.
Build website fast, secure, SPA and PWA ready.
Easy deployment

github.com/rizafahmi
slideshare.net/rizafahmi
twitter.com/rizafahmi22
facebook.com/rizafahmi
riza@hacktiv8.com
ceritanyadeveloper.com

This document introduces Gatsby.js, a static site generator built with React, Webpack, and GraphQL. It discusses static site generators and their benefits like fast load times, simplicity, and reliability. Gatsby allows building lightning fast websites, especially for content that doesn't change frequently, like blogs, business sites, and ecommerce sites. The document explains key concepts behind Gatsby like React, Webpack, and GraphQL and demonstrates Gatsby by reviewing the author's blog built with it. While Gatsby is still early, its benefits include optimized loading, best practices out of the box, and flexibility of a React application.

Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana

React JS - A quick introduction tutorialMohammed Fazuluddin

This document provides an overview and introduction to React JS. It discusses that React JS is a JavaScript library developed by Facebook for building user interfaces and reusable UI components. It encourages creation of reusable components that present data that changes over time. The document also covers React JS features, architecture, components, best practices, pros and cons, and provides useful links for examples and environment setup.

Intro to ReactEric Westfall

React is a library for building user interfaces using components. It uses a virtual DOM for rendering components, which are pieces of UI defined as classes or functions. Components receive data via props and local state, and can be nested to build complex UIs. The component lifecycle includes mounting, updating, and unmounting phases. Data flows unidirectionally down the component tree. React has a vibrant ecosystem and community for continued learning.

Jsp presentationSher Singh Bardhan

Web Development In 2018Traversy Media

We are about to start a new year and I have put together a guide for current and aspiring web developers to follow to get an idea of what it takes to be a full stack developer. From basic tools to html/css, JavaScript, UI frameworks like Bootstrap, server side technologies like Node.js, Python and PHP, frameworks like Laravel, Django and Ruby on Rails. I tried to include the most used technologies and give you the options to choose from with some of my own opinion and input.

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!

This Edureka "Node.js tutorial" will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial: 1) Client Server Architecture 2) Limitations of Multi-Threaded Model 3) What is Node.js? 4) Features of Node.js 5) Node.js Installation 6) Blocking Vs. Non – Blocking I/O 7) Creating Node.js Program 8) Node.js Modules 9) Demo – Grocery List Web Application using Node.js

An introduction to React.jsEmanuele DelBono

This document provides an introduction to React.js, including: - React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change. - The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way. - Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.

React new features and intro to HooksSoluto

The document discusses React hooks and how they can be used to manage state and other features in function components without writing classes. It provides examples of how common lifecycle methods and state management in classes can be re-written using hooks like useState, useEffect, and useContext. Specifically, it walks through converting a chat component that subscribes to new messages and manages local state from a class to a function component using these React hooks.

Measuring Web Performance Dave Olsen

Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.” This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.

Hibernate Presentationguest11106b

React workshopImran Sayed

Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_ Day 1 : Introduction to React, Babel and Webpack Prerequisites of starting the workshop ( Basic understanding of Node & Express ) What is Virtual DOM? What is React and why should we use it? Install and set up React: a-Using create-react-app b-From scratch using Babel and Webpack. We will use Webpack Dev Server. Day 2 : React Basic Concepts Types of Components: Class-based and Functional based Components Use of JSX Parent, Child, and Nested Components Difference between State and Props Create and Handle Routes Component Lifecycle Methods Create a form and handling form inputs Use of arrow functions and Spread Operator Day 3: Advanced Concepts in React Use of Refs What are Higher Order Components( HOC )? How to use HOC Understanding Context in React

React Js SimplifiedSunil Yadav

WEB DEVELOPMENT USING REACT JSMuthuKumaran Singaravelu

OpenAPI and gRPC Side by-SideTim Burks

Spend some time working with OpenAPI and gRPC and you’ll notice that these two technologies have a lot in common. Both are open source efforts, both describe APIs, and both promise better experiences for API producers and consumers. So why do we need both? If we do, what value does each provide? What can each project learn from the other? We’ll bring the two together for a side-by-side comparison and pose answers to these and other questions about two API methodologies that will do much to influence the future of networked APIs.

Spring WebfluxCarlos E. Salazar

This document discusses reactive programming and Spring Webflux. It begins with an introduction to reactive programming and why it is needed for applications with high user expectations. It then covers reactive streams and the Reactive Manifesto. It introduces Project Reactor and compares it to RxJava. It discusses how Spring Webflux allows for non-blocking reactive REST APIs. It concludes with an overview of a demo and next steps including support for SQL, web sockets, and MongoDB.

Reactjs Neha Sharma

Introduction To Single Page ApplicationKMS Technology

This document provides an introduction to single page applications (SPAs). It begins with an overview of traditional websites, which have multiple pages and server-based rendering. The evolution section discusses how modern browsers, JavaScript, and HTML5 have enabled a more app-like user experience with SPAs. SPAs are defined as web apps that load a single HTML page and use AJAX and JavaScript for fluid interactions without page reloads. Benefits include faster loading and improved user experience. Challenges of SPAs include search engine optimization, initial slow loading, and maintaining browser history. The document concludes with a question and answer section.

ReactJS presentationThanh Tuong

Nouveautés de java 8Florian Beaufumé

React 중운 박

The document describes React, a JavaScript library for building user interfaces. It introduces some key concepts of React including components, props, state, and the virtual DOM. Components are the building blocks of React apps and can be composed together. Props provide immutable data to components, while state provides mutable data. The virtual DOM allows React to efficiently update the real DOM by only changing what needs to be changed. Data flows unidirectionally in React from parent to child components via props, and state updates within a component are handled via setState().

React workshop presentationBojan Golubović

Introduction to React JS for beginners | Namespace ITnamespaceit

React is a JavaScript library for building user interfaces using reusable components. It is used to create single page applications that dynamically update the current page with new data from the server. React uses a component-based approach and one-way data binding to build interfaces simply and allow for easy testing. Key concepts in React include components, props, state, lifecycles, hooks, JSX, and the virtual DOM. Major companies using React include Facebook, Netflix, Instagram, and WhatsApp.

Introduction to React JS for beginners Varun Raj

- React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes. - Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements. - Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes. - The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.

Introduction to Node.jsVikash Singh

Basics of React Hooks.pptx.pdfKnoldus Inc.

Introduction to SwaggerKnoldus Inc.

NEXT.JSBinumon Joseph

Gatsby (Code.Talks) 2019Stefan Adolf

It's lean, it's crazily fast and it's packed with features: Gatsby is a game changing static PWA generator. This talk starts with a short intro into the consolidated GraphQL content interface and how Gatsby builds pages. We’re then digging into custom content plugins that allow you to connect nearly any data source, explain Gatsby's page generation process and how editors can use MDX to embed dynamic components into their content. We conclude with a build time performance demo that renders and updates a huge amount of pages at once.

Web app and morefaming su

This document discusses various techniques for making web applications work offline and with unreliable network connections, including: - The application cache manifest which allows specifying cached resources to work offline - Issues with the current manifest specification and potential enhancements - The window.applicationCache API for caching resources and monitoring cache status - Detecting online/offline status using the navigator.onLine property In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.

More Related Content

What's hot (20)

React new features and intro to HooksSoluto

Measuring Web Performance Dave Olsen

Hibernate Presentationguest11106b

React workshopImran Sayed

React Js SimplifiedSunil Yadav

WEB DEVELOPMENT USING REACT JSMuthuKumaran Singaravelu

OpenAPI and gRPC Side by-SideTim Burks

Spring WebfluxCarlos E. Salazar

Reactjs Neha Sharma

Introduction To Single Page ApplicationKMS Technology

ReactJS presentationThanh Tuong

Nouveautés de java 8Florian Beaufumé

React 중운 박

React workshop presentationBojan Golubović

Introduction to React JS for beginners | Namespace ITnamespaceit

Introduction to React JS for beginners Varun Raj

Introduction to Node.jsVikash Singh

Basics of React Hooks.pptx.pdfKnoldus Inc.

Introduction to SwaggerKnoldus Inc.

NEXT.JSBinumon Joseph

React new features and intro to HooksSoluto

Measuring Web Performance Dave Olsen

Hibernate Presentationguest11106b

React workshopImran Sayed

React Js SimplifiedSunil Yadav

WEB DEVELOPMENT USING REACT JSMuthuKumaran Singaravelu

OpenAPI and gRPC Side by-SideTim Burks

Spring WebfluxCarlos E. Salazar

Reactjs Neha Sharma

Introduction To Single Page ApplicationKMS Technology

ReactJS presentationThanh Tuong

Nouveautés de java 8Florian Beaufumé

React 중운 박

React workshop presentationBojan Golubović

Introduction to React JS for beginners | Namespace ITnamespaceit

Introduction to React JS for beginners Varun Raj

Introduction to Node.jsVikash Singh

Basics of React Hooks.pptx.pdfKnoldus Inc.

Introduction to SwaggerKnoldus Inc.

NEXT.JSBinumon Joseph

Similar to Modern Static Site with GatsbyJS (20)

Gatsby (Code.Talks) 2019Stefan Adolf

Web app and morefaming su

Web Apps and moreYan Shi

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI

This document provides an overview of HTML5 technologies including HTML5 markup, microdata/RDFa, WebFonts, Canvas, MediaQueries, performance optimizations like SPDY and HTTP 2.0. It discusses specifications from the W3C and implementations by companies. Tools for testing responsive design, fonts and browser compatibility are also mentioned. The document is written in Japanese and references the author's blog for code samples.

Cape Cod Web Technology Meetup - 2Asher Martin

The Future Is The CloudGatsbyjs

Build Fast WordPress Site With GatsbyImran Sayed

As developers or users, we all are concerned about our site's performance. ⚡ We sometimes have to face fierce battles ⚔️ to get our sites, just a few milliseconds faster  Gatsby, a modern blazing-fast static site generator for React.js, is gaining popularity ❤️ because of its performance, developer experience, and ecosystem. It follows Google's PRPL architectural pattern to boost your website's performance. http://bit.ly/2M14Jks Building your WordPress website with Gatsby is super simple. Let's learn how to build a WordPress website with gatsby i

Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYCJesus Manuel Olivas

This document discusses embracing a headless CMS approach using Drupal and GatsbyJS. It begins by describing the traditional monolithic CMS model and some of its challenges around performance, reliability, security, and hosting. It then introduces static site generators and the JAMstack as an alternative approach that addresses these challenges. It provides examples of headless CMS options like Contentful and NetlifyCMS that can be used with Gatsby. Finally, it demonstrates a specific setup using Drupal as a headless CMS with an export plugin and Gatsby starter theme to build sites in a decoupled way.

Pinkoi Mobile Webmikeleeme

This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.

The Enterprise Dilemma: Native vs. WebMotorola Mobility - MOTODEV

MOTODEV Technology Evangelist, Suzanne Alexandra covers the many factors involved in choosing to develop an Android or web app that will meet enterprise requirements. She provides tips and best practices, and reviews sample apps on each platform. Topics include: -Key business and technology advantages of each approach -Examples of apps built on each platform -Browser support of HTML5 features -The hybrid app approach Twitter hashtag: #nativevsweb Got questions about this event tweet @motodev or post them on community.developer.motorola.com

Always on! Or not?Carsten Sandtner

Compact Web - Remind "web compression" -Tomokazu Kiyohara

The document discusses techniques for compacting web content, known as web compression. It focuses on compressing image files, text files like HTML and CSS, and improving transport of compressed files using server-side techniques. Specific tools are recommended for optimizing different file types as well as Apache and Nginx server configurations for enabling compression of content. The goal is to improve response times for smart phones by reducing data usage through compression without changing the underlying content.

Building assets on the fly with Node.jsAcquisio

(C)NodeJSJackson Tian

NodeJS is an open-source and cross-platform JavaScript runtime environment that allows JavaScript to be used for server-side scripting. The document discusses what NodeJS is, why it was created, how to use it, who uses it, and its use in China (CNodeJS). Key points are that NodeJS is used for building scalable network applications using non-blocking I/O and the JavaScript language, and that it has seen significant adoption in China from companies like Taobao and Sina for building web servers and real-time applications.

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

Everything is Awesome - Cutting the Corners off the WebJames Rakich

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologiesgeorge.james

Ajax presents a new way of developing web applications that is more event-driven like typical client-server GUI applications. While Ajax uses technologies like JavaScript, XML, and CSS to asynchronously update parts of a page without reloading, the role of backends like Caché is reduced to basic data storage and retrieval. However, Caché remains well-suited for large, high-performance enterprise applications as they grow beyond what technologies like MySQL can easily support. Frameworks like EWD that define applications independently of technologies allow easier migration between backends like MySQL and Caché as applications scale.

Meetup PerformanceJustin Cataldo

1. Meetup discussed optimizing the performance of their event details page by externalizing scripts, moving scripts to the bottom of the page, reducing requests, lazy loading scripts, and using event delegation. 2. These changes reduced the page load time by 27% from 6.321 seconds to 4.643 seconds and reduced javascript requests by 50%. 3. Meetup also optimized static content serving by versioning, compressing, caching resources and using a CDN to improve performance further.

Meetup PerformanceGreg Whalin

GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf

This document discusses progressive enhancement and how to build progressive user interfaces with Grails. It provides examples of using Grails features like request.xhr and withFormat to vary output for AJAX requests. It also covers techniques like separating markup and behavior, reading and enhancing markup with JavaScript, form enhancements, and test-driven progressive enhancement using Modernizr and yepnope.

Gatsby (Code.Talks) 2019Stefan Adolf

Web app and morefaming su

Web Apps and moreYan Shi

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI

Cape Cod Web Technology Meetup - 2Asher Martin

The Future Is The CloudGatsbyjs

Build Fast WordPress Site With GatsbyImran Sayed

Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYCJesus Manuel Olivas

Pinkoi Mobile Webmikeleeme

The Enterprise Dilemma: Native vs. WebMotorola Mobility - MOTODEV

Always on! Or not?Carsten Sandtner

Compact Web - Remind "web compression" -Tomokazu Kiyohara

Building assets on the fly with Node.jsAcquisio

(C)NodeJSJackson Tian

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

Everything is Awesome - Cutting the Corners off the WebJames Rakich

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologiesgeorge.james

Meetup PerformanceJustin Cataldo

Meetup PerformanceGreg Whalin

GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf

More from Riza Fahmi (20)

Membangun Aplikasi Web dengan Elixir dan PhoenixRiza Fahmi

Berbagai Pilihan Karir DeveloperRiza Fahmi

Web dan Progressive Web Apps di 2020Riza Fahmi

Remote Working/LearningRiza Fahmi

Remote working provides opportunities for flexible work arrangements but also presents challenges. It requires strong self-management and communication skills. Preparing for remote work involves treating yourself as the manager by setting goals and priorities. Communication is key, both synchronous and asynchronous. Remote workers must also find ways to maintain a healthy work-life balance and avoid isolation through community engagement and physical activity. Overall, remote work allows accessing new opportunities if one adapts to its requirements for independence and communication.

How to learn programmingRiza Fahmi

This document provides tips for how to learn programming. It emphasizes that programming is difficult but not impossible, and encourages finding problems to solve. It recommends finding your learning style, improving foundational skills, narrowing your focus, getting excited, and just coding. It also suggests getting help from others, being persistent, and developing a passion for programming in order to succeed.

Rapid App Development with AWS AmplifyRiza Fahmi

AWS Amplify is a development platform that allows developers to build secure and scalable mobile and web applications quickly. It provides tools and services for continuous integration, hosting, functions, authentication, real-time data stores, serverless APIs, analytics, push notifications and more. Developers can get started by installing the Amplify CLI, initializing a project, and then adding features like authentication, storage, analytics and more through commands. The document demonstrates setting up and building a meetup app with features like user authentication and a serverless API in under 15 minutes using Amplify.

Menguak Misteri Module BundlerRiza Fahmi

Beberapa Web API MenarikRiza Fahmi

MVP development from software developer perspectiveRiza Fahmi

The document discusses what a minimum viable product (MVP) is and why and how to build one. It defines an MVP as the simplest version of a product that allows customers to be tested with minimum effort. Building an MVP focuses development on the core idea, allows for early testing and feedback, takes less time and resources. The document provides tips for building an MVP such as building less features, fixing budgets/time while flexing scope, releasing something daily, and breaking work into small tasks. Examples of successful MVPs from companies like Facebook, Dropbox, Amazon are also included.

Ekosistem JavaScript di IndonesiaRiza Fahmi

Perkenalan ReasonMLRiza Fahmi

How I Generate IdeaRiza Fahmi

The document provides steps to generate business ideas: 1. Find profitable ideas by identifying problems faced by yourself, friends, family or copying existing ideas. Validate ideas by talking to potential customers and ask them to pay or provide their email. 2. Build the idea with minimal execution and focus on scaling down. Find partners to help build the idea or learn skills yourself if needed. Make time for the business by shortening breaks or reducing sleep. 3. The key is to just get started by focusing on building less initially and validating customers as soon as possible. Execution is important for turning ideas into profits.

Strategi Presentasi Untuk Developer Workshop SlideRiza Fahmi

Selain ngoding, skill komunikasi juga merupakan hal cukup penting yang sebaiknya dipunyai oleh developer. Salah satu bentuknya adalah berbicara didepan publik. Apakah itu didepan atasan rekan satu tim, meetup, client, conference ataupun didepan investor. Dengan kemampuan ini, kita akan menjadi seorang developer yang berbeda. Selain bisa menyelesaikan masalah dengan kode kita juga bisa mengkomunikasikannya. Itu adalah nilai tambah yang sangat besar dan banyak dicari. Dan cara presentasi kita, sebagai developer tentu berbeda dengan orang marketing misalnya atau business man. Karena itu kita juga butuh strategi presentasi khusus. Dan di workshop ini, kita akan mempelajari dan mempraktekkan beberapa strategi tersebut.

Lesson Learned from Prolific DevelopersRiza Fahmi

Dokumen tersebut berisi nasihat dan pandangan dari beberapa insinyur perangkat lunak dan praktisi teknologi tentang mengapa mereka memilih karier sebagai pengembang perangkat lunak, tips untuk pengembang pemula, dan pahlawan-pahlawan mereka sebagai inspirasi. Beberapa poin kunci yang diangkat antara lain pentingnya memperkuat dasar-dasar pemrograman, terus belajar dari komunitas, dan berkontribusi ke proyek

Clean Code JavaScriptRiza Fahmi

This document discusses best practices for writing clean JavaScript code that is readable, reusable, and refactorable. It defines clean code as code that is easy for humans to read, understand, and modify. The document provides guidelines for writing clean code, such as using meaningful variable and function names, separating concerns in functions, avoiding side effects, and using async/await instead of callbacks. It also recommends tools like ESLint for linting, Prettier for formatting, and Husky with lint-staged for enforcing code quality in Git commits.

The Future of AIRiza Fahmi

The document discusses the history and future of artificial intelligence. It provides a timeline of important developments in AI from the 13th century to present day. These developments include early machines created by philosophers, the concept of the programmable computer by Alan Turing in 1936, and recent advances in deep learning. The document then discusses the growth of AI technologies and their increasing impact on various fields like transportation, healthcare, marketing, finance, human resources, and education. It emphasizes the importance of skills like data science and encourages readers to learn about AI and prepare for careers working with emerging technologies.

Chrome Dev Summit 2018 - Personal Take AwaysRiza Fahmi

The document summarizes key takeaways from the Chrome Dev Summit. Day 1 focused on improvements to the V8 JavaScript engine, including a faster garbage collector and better support for modern JavaScript and WebAssembly. Day 2 discussed framework optimizations for performance and the potential of the actor model and Houdini APIs to further improve web application speed. WebAssembly was also covered as a new language that can be compiled to performant web code.

Essentials and Impactful Features of ES6Riza Fahmi

Introduction to ReasonMLRiza Fahmi

ReasonML is a syntax and toolchain that brings OCaml to the web by compiling to JavaScript. It uses BuckleScript to compile Reason code to readable, optimized JS. Reason code looks similar to OCaml but with a modernized syntax that is friendlier for web development. It provides type safety through static typing and type inference while allowing for easy interoperability with JavaScript. The tooling includes package management, bundling, formatting, linting and more. ReasonReact provides a React-like experience for building user interfaces with ReasonML.

Machine learning with py torchRiza Fahmi

Membangun Aplikasi Web dengan Elixir dan PhoenixRiza Fahmi

Berbagai Pilihan Karir DeveloperRiza Fahmi

Web dan Progressive Web Apps di 2020Riza Fahmi

Remote Working/LearningRiza Fahmi

How to learn programmingRiza Fahmi

Rapid App Development with AWS AmplifyRiza Fahmi

Menguak Misteri Module BundlerRiza Fahmi

Beberapa Web API MenarikRiza Fahmi

MVP development from software developer perspectiveRiza Fahmi

Ekosistem JavaScript di IndonesiaRiza Fahmi

Perkenalan ReasonMLRiza Fahmi

How I Generate IdeaRiza Fahmi

Strategi Presentasi Untuk Developer Workshop SlideRiza Fahmi

Lesson Learned from Prolific DevelopersRiza Fahmi

Clean Code JavaScriptRiza Fahmi

The Future of AIRiza Fahmi

Chrome Dev Summit 2018 - Personal Take AwaysRiza Fahmi

Essentials and Impactful Features of ES6Riza Fahmi

Introduction to ReasonMLRiza Fahmi

Machine learning with py torchRiza Fahmi

Recently uploaded (20)

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how: • Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules. • Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance. • Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity. • Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications. • Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market. With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications. Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

Cyber Awareness overview for 2025 month of securityriccardosl1

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-und-verwaltung-von-multiuser-umgebungen/ HCL Nomad Web wird als die nächste Generation des HCL Notes-Clients gefeiert und bietet zahlreiche Vorteile, wie die Beseitigung des Bedarfs an Paketierung, Verteilung und Installation. Nomad Web-Client-Updates werden “automatisch” im Hintergrund installiert, was den administrativen Aufwand im Vergleich zu traditionellen HCL Notes-Clients erheblich reduziert. Allerdings stellt die Fehlerbehebung in Nomad Web im Vergleich zum Notes-Client einzigartige Herausforderungen dar. Begleiten Sie Christoph und Marc, während sie demonstrieren, wie der Fehlerbehebungsprozess in HCL Nomad Web vereinfacht werden kann, um eine reibungslose und effiziente Benutzererfahrung zu gewährleisten. In diesem Webinar werden wir effektive Strategien zur Diagnose und Lösung häufiger Probleme in HCL Nomad Web untersuchen, einschließlich - Zugriff auf die Konsole - Auffinden und Interpretieren von Protokolldateien - Zugriff auf den Datenordner im Cache des Browsers (unter Verwendung von OPFS) - Verständnis der Unterschiede zwischen Einzel- und Mehrbenutzerszenarien - Nutzung der Client Clocking-Funktion

Build Your Own Copilot & Agents For DevsBrian McKeiver

Procurement Insights Cost To Value Guide.pptxJon Hansen

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

TrsLabs - Fintech Product & Business ConsultingTrs Labs

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

Cyber Awareness overview for 2025 month of securityriccardosl1

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

How Can I use the AI Hype in my Business Context?Daniel Lehner

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Build Your Own Copilot & Agents For DevsBrian McKeiver

Procurement Insights Cost To Value Guide.pptxJon Hansen

Modern Static Site with GatsbyJS

1. GatsbyJS Build modern, fast, secure apps with React and friends.

2. @rizafahmi

3. @rizafahmi22

4. Once Upon A Time…

5. There was a thing called a Website

6. Request Response (HTML, CSS, JS) Client Server Database

7. Everything run smoothly until one day…

8. Your content become viral

9. Where is the problem? Cheap hosting? The platform? Slow language? Bottleneck in database? What about security?   example.com/wp-admin ?

10. Here comes Static Site

11. It fast!

12. GIT-able

13. Producing JUST HTML, CSS and JAVASCRIPT

14. No database

15. secure

16. use your favorite editor

17. No need expensive server, even free!

18. No need to scale

19. Options: Jekyll, Hexo, Hugo

20. Build your content in markdown

21. Generate To HTML, CSS and JavaScript

22. Deploy/upload to hosting service

23. BUUUUUTTTTT…

24. It’s old school technology

25. !!--- layout: base !!--- {% include header.html type="post" %} <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <article role="main" class="blog-post"> {{ content }} !</article> <ul class="pager blog-pager"> {% if page.previous.url %} <li class="previous"> <a href="{{ page.previous.url | prepend: site.baseurl | replace: '!//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">← Previous Post!</a> !</li> {% endif %} {% if page.next.url %} <li class="next"> <a href="{{ page.next.url | prepend: site.baseurl | replace: '!//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post →!</a> !</li> {% endif %} !</ul> {% if page.comments %} <div class="disqus-comments"> {% include disqus.html %} !</div> {% include fb-comment.html %} {% endif %} !</div> !</div> !</div>

27. What Gatsby Is

28. Buildmodern apps and websites with blazing fastbeautifulsecure ReactGraphQLWebpackPostCSSetc.

29. Focus on Developer Experience

30. Batteries IncludedHot ReloadingFeel very natural to React DevEntire React ecosystem via npm

31. Bonus: Single-page ApplicationProgressive Web Apps

32. Who Using GatsbY

33. reactjs.org

34. airbnb.io

35. figma.com

36. rizafahmi.com

37. randomscreencast.com

38. pdpcid.netlify.com

39. How Does It Works

40. Get data fromMarkdownContentfulWordpressREST APISpreadSheetAnywhere.

41. Write app better withReactReduxWebpackGraphQLESLintPrettier.

42. Deliver via Amazon S3NetlifyGitHub PagesSurge.shNow.shAerobaticMany more.

44. “Talk is cheap show me the code” — Linus Torvalds

45. $ npm install !--global gatsby-cli

46. $ gatsby new gatsby-site $ cd gatsby-site $ gatsby develop $ open http:!//localhost:8000/

47. ├── .cache ├── public ├── src │ ├── components │ │ ├── header.js │ │ ├── layout.css │ │ └── layout.js │ ├── images │ │ └── gatsby-icon.png │ ├── pages │ │ ├── 01-first-blog │ │ ├── 404.js │ │ ├── index.js │ │ ├── page-2.js │ │ └── page-3.js │ └── templates │ └── post.js ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json └── yarn.lock

48. Lets Create a new page

49. Bonus: Graphql

50. Build Blogging Engine With Gatsby

51. Step 1: Read all markdown files

52. Step 2: Create template for blog post

53. Step 3: Generate Markdown into HTML

54. Deploying Gatsby

55. Step 1: Push to GitHub

56. Step 2: Login to Netlify

57. Step 3: Create New Site

58. Step 4: Deploy

59. Bonus Step: Make changes, automatic redeploy