Skip to content

Commit 997eb7a

Browse files
authored
Better mobile experience (#20)
* feat: make mobile look decent * feat: completed better responsive
1 parent 8137e57 commit 997eb7a

File tree

5 files changed

+361
-143
lines changed

5 files changed

+361
-143
lines changed

src/.DS_Store

0 Bytes
Binary file not shown.

src/_includes/layout.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ eleventyComputed:
199199
{% endif %}
200200
</head>
201201
<body>
202-
<nav class="navbar is-fixed-top has-shadow" role="navigation" aria-label="main navigation">
202+
<nav id="navbar" class="navbar is-fixed-top has-shadow" role="navigation" aria-label="main navigation">
203203
<div class="container">
204204
<div class="navbar-brand">
205205
<div class="navbar-item">

src/index.html.njk

Lines changed: 106 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ og_type:
2020
<div class="columns is-vcentered is-gapless">
2121
<div class="column pr-4">
2222
<h1 class="title is-1">
23-
<em>Node.js Design Patterns</em>: the ultimate guide to becoming a Node.js expert</h1>
23+
Node.js Design Patterns: the ultimate guide to becoming a Node.js expert</h1>
2424
<h2 class="subtitle is-4 mt-1">The <strong>top-tier book</strong> for Node.js that will guide you from A to Z through the design and implementation of production-grade <strong>Node.js applications</strong> with <strong>tested patterns</strong> and <strong>techniques</strong>.</h2>
2525
<div class="buttons">
2626
<a class="button is-primary" href="https://nodejsdp.link/buy" {{ track("click_buy_print") }}>Buy Print edition</a>
@@ -135,7 +135,7 @@ og_type:
135135
<div class="bg-green">
136136
<section id="complete-description" class="section bg-white is-medium">
137137
<div class="container is-max-desktop">
138-
<div class="container bg-green px-6 py-6 bd-all-small" style="max-width: 800px;">
138+
<div id="complete-description-features" class="container bg-green bd-all-small" style="max-width: 800px;">
139139
<h2 class="title underline-bright is-2 has-text-centered mb-6">
140140
<span>More than just Design Patterns: a book with Everything you need to know about Node.js</span>
141141
</h2>
@@ -153,83 +153,85 @@ og_type:
153153
</div>
154154
</div>
155155

156-
<h2 class="title is-2 underline has-text-centered mt-6">
157-
<span>What you will find in the book:</span>
158-
</h2>
156+
<div id="chapters-container">
157+
<h2 class="title is-2 underline has-text-centered mt-6">
158+
<span>What you will find in the book:</span>
159+
</h2>
159160

160-
<div id="chapters" class="columns is-centered">
161-
<div class="column is-6">
162-
163-
<ol>
164-
<li>
165-
<h3 class="title is-4">The Node.js Platform</h3>
166-
<p>Learn about the Node.js philosophy, the reactor patterns and the differences between JavaScript on the browser and Node.js on the server.</p>
167-
</li>
168-
169-
<li>
170-
<h3 class="title is-4">The Module System</h3>
171-
<p>Learn how to leverage the powerful Node.js module system and discover the main differences between CommonJS and ESM.</p>
172-
</li>
173-
174-
<li>
175-
<h3 class="title is-4">Callbacks and Events</h3>
176-
<p>Discover the callback pattern, how it works and the conventions used in Node.js. Learn how to avoid pitfalls and when to take advantage of the observer pattern using Node.js built-in event emitter.</p>
177-
</li>
178-
179-
<li>
180-
<h3 class="title is-4">Asynchronous Control Flow Patterns with Callbacks</h3>
181-
<p>Lean how to avoid callback hell and explore common asynchronous patterns such as sequential execution, sequential iteration, parallel execution and limited parallel execution.</p>
182-
</li>
183-
184-
<li>
185-
<h3 class="title is-4">Asynchronous Control Flow Patterns with Promises and Async/Await</h3>
186-
<p>Find out how promises work and how to use them effectively to implement various asynchronous control flow patterns. Explore the modern async/await syntax, the main tool today for dealing with asynchronous code in Node.js</p>
187-
</li>
188-
189-
<li>
190-
<h3 class="title is-4">Coding with Streams</h3>
191-
<p>Understand why streams are so important in Node.js. Learn how to use standard streams and how to create custom ones. Explore various streaming patterns and learn how to build powerful streaming pipelines.</p>
192-
</li>
193-
194-
<li>
195-
<h3 class="title is-4">Creational Design Patterns</h3>
196-
<p>Learn about the most famous creational design patterns in Node.js: the Factory pattern, the Revealing Constructor pattern, the Builder pattern. Finally, explore the Singleton pattern and the Dependency Injection pattern.</p>
197-
</li>
198-
199-
<li>
200-
<h3 class="title is-4">Structural Design Patterns</h3>
201-
<p>Discover how to implement and use the Proxy, the Decorator and the Adapter pattern in Node.js.</p>
202-
</li>
203-
204-
<li>
205-
<h3 class="title is-4">Behavioural Design Patterns</h3>
206-
<p>Learn how to implement and leverage some of the most well known behavioural design patterns in the context of Node.js: the Strategy pattern, the State pattern, the Template pattern, the Iterator pattern, the Middleware pattern, and the Command pattern.</p>
207-
<p>
208-
<a href="#sample-chapter">
209-
<span class="tag is-primary">Free Chapter!</span></a>
210-
</p>
211-
</li>
212-
213-
<li>
214-
<h3 class="title is-4">Universal JavaScript</h3>
215-
<p>Explore the fundamentals of JavaScript cross-platform development and learn how to share code between the browser and Node.js. Learn how to leverage React.js to build a complete universal JavaScript application.</p>
216-
</li>
217-
218-
<li>
219-
<h3 class="title is-4">Advanced Recipes</h3>
220-
<p>Discover well-known recipes to deal with some more advanced Node.js intricacies such as dealing with asynchronously initialized components, performing asynchronous request batching and caching, canceling asynchronous operations and running CPU-bound tasks.</p>
221-
</li>
222-
223-
<li>
224-
<h3 class="title is-4">Scalability and Architectural Patterns</h3>
225-
<p>Master the art of Node.js scalability by learning about the "Scale Cube", discover how to run multiple instances of the same application and how to use load balancers and service registers. Learn how to use containers and containers orchestration platforms such as Kubernetes. Finally, find out how to design and build microservices architectures.</p>
226-
</li>
227-
228-
<li>
229-
<h3 class="title is-4">Messaging and Integration Patterns</h3>
230-
<p>Learn how to integrate complex distributed Node.js applications using the most popular messaging systems. Learn how to implement the most common messaging patterns on top of ZeroMQ, RabbitMQ and Redis Streams.</p>
231-
</li>
232-
</ol>
161+
<div id="chapters" class="columns is-centered">
162+
<div class="column is-6">
163+
164+
<ol>
165+
<li>
166+
<h3 class="title is-4">The Node.js Platform</h3>
167+
<p>Learn about the Node.js philosophy, the reactor patterns and the differences between JavaScript on the browser and Node.js on the server.</p>
168+
</li>
169+
170+
<li>
171+
<h3 class="title is-4">The Module System</h3>
172+
<p>Learn how to leverage the powerful Node.js module system and discover the main differences between CommonJS and ESM.</p>
173+
</li>
174+
175+
<li>
176+
<h3 class="title is-4">Callbacks and Events</h3>
177+
<p>Discover the callback pattern, how it works and the conventions used in Node.js. Learn how to avoid pitfalls and when to take advantage of the observer pattern using Node.js built-in event emitter.</p>
178+
</li>
179+
180+
<li>
181+
<h3 class="title is-4">Asynchronous Control Flow Patterns with Callbacks</h3>
182+
<p>Lean how to avoid callback hell and explore common asynchronous patterns such as sequential execution, sequential iteration, parallel execution and limited parallel execution.</p>
183+
</li>
184+
185+
<li>
186+
<h3 class="title is-4">Asynchronous Control Flow Patterns with Promises and Async/Await</h3>
187+
<p>Find out how promises work and how to use them effectively to implement various asynchronous control flow patterns. Explore the modern async/await syntax, the main tool today for dealing with asynchronous code in Node.js</p>
188+
</li>
189+
190+
<li>
191+
<h3 class="title is-4">Coding with Streams</h3>
192+
<p>Understand why streams are so important in Node.js. Learn how to use standard streams and how to create custom ones. Explore various streaming patterns and learn how to build powerful streaming pipelines.</p>
193+
</li>
194+
195+
<li>
196+
<h3 class="title is-4">Creational Design Patterns</h3>
197+
<p>Learn about the most famous creational design patterns in Node.js: the Factory pattern, the Revealing Constructor pattern, the Builder pattern. Finally, explore the Singleton pattern and the Dependency Injection pattern.</p>
198+
</li>
199+
200+
<li>
201+
<h3 class="title is-4">Structural Design Patterns</h3>
202+
<p>Discover how to implement and use the Proxy, the Decorator and the Adapter pattern in Node.js.</p>
203+
</li>
204+
205+
<li>
206+
<h3 class="title is-4">Behavioural Design Patterns</h3>
207+
<p>Learn how to implement and leverage some of the most well known behavioural design patterns in the context of Node.js: the Strategy pattern, the State pattern, the Template pattern, the Iterator pattern, the Middleware pattern, and the Command pattern.</p>
208+
<p>
209+
<a href="#sample-chapter">
210+
<span class="tag is-primary">Free Chapter!</span></a>
211+
</p>
212+
</li>
213+
214+
<li>
215+
<h3 class="title is-4">Universal JavaScript</h3>
216+
<p>Explore the fundamentals of JavaScript cross-platform development and learn how to share code between the browser and Node.js. Learn how to leverage React.js to build a complete universal JavaScript application.</p>
217+
</li>
218+
219+
<li>
220+
<h3 class="title is-4">Advanced Recipes</h3>
221+
<p>Discover well-known recipes to deal with some more advanced Node.js intricacies such as dealing with asynchronously initialized components, performing asynchronous request batching and caching, canceling asynchronous operations and running CPU-bound tasks.</p>
222+
</li>
223+
224+
<li>
225+
<h3 class="title is-4">Scalability and Architectural Patterns</h3>
226+
<p>Master the art of Node.js scalability by learning about the "Scale Cube", discover how to run multiple instances of the same application and how to use load balancers and service registers. Learn how to use containers and containers orchestration platforms such as Kubernetes. Finally, find out how to design and build microservices architectures.</p>
227+
</li>
228+
229+
<li>
230+
<h3 class="title is-4">Messaging and Integration Patterns</h3>
231+
<p>Learn how to integrate complex distributed Node.js applications using the most popular messaging systems. Learn how to implement the most common messaging patterns on top of ZeroMQ, RabbitMQ and Redis Streams.</p>
232+
</li>
233+
</ol>
234+
</div>
233235
</div>
234236
</div>
235237

@@ -402,7 +404,7 @@ og_type:
402404
<div class="bg-green">
403405
<section id="who-is-it-for" class="section bg-white bd-rd is-medium">
404406
<div class="container is-max-desktop">
405-
<div class="container bg-green px-6 py-6 bd-all-small" style="max-width: 800px;">
407+
<div id="who-is-it-for-main" class="container bg-green bd-all-small" style="max-width: 800px;">
406408
<h2 class="title underline-bright is-2 has-text-centered mb-6">
407409
<span>Who is <em>Node.js Design Patterns</em> for?</span>
408410
</h2>
@@ -423,37 +425,39 @@ og_type:
423425
</div>
424426
</div>
425427

426-
<h2 class="title is-2 underline has-text-centered mt-6">
427-
<span>Why shouldn&apos;t you Miss this book?</span>
428-
</h2>
428+
<div id="who-is-it-for-why">
429+
<h2 class="title is-2 underline has-text-centered mt-6">
430+
<span>Why shouldn&apos;t you Miss this book?</span>
431+
</h2>
429432

430-
<div class="container is-max-desktop">
431-
<div class="columns is-centered">
432-
<div class="column is-6">
433-
<div class="container">
434-
<p>
435-
<strong>Much more than just a textbook!</strong>
436-
</p>
433+
<div class="container is-max-desktop">
434+
<div class="columns is-centered">
435+
<div class="column is-6">
436+
<div class="container">
437+
<p>
438+
<strong>Much more than just a textbook!</strong>
439+
</p>
437440

438-
<p>
439-
<em>Node.js Design Patterns</em> is a <strong>specific manual</strong> covering Node.js topics from A to Z.
441+
<p>
442+
<em>Node.js Design Patterns</em> is a <strong>specific manual</strong> covering Node.js topics from A to Z.
440443
</p>
441-
<p>You will have the opportunity of <strong>applying what you are learning</strong> with lots of exercises.</p>
442-
<p>It is much more practical than a regular manual, just to make sure you <strong>understand actual market needs</strong>.</p>
443-
<p>You will also have the possibility of <strong>connecting with</strong> an entire <strong>developers community on GitHub</strong> and the authors.</p>
444+
<p>You will have the opportunity of <strong>applying what you are learning</strong> with lots of exercises.</p>
445+
<p>It is much more practical than a regular manual, just to make sure you <strong>understand actual market needs</strong>.</p>
446+
<p>You will also have the possibility of <strong>connecting with</strong> an entire <strong>developers community on GitHub</strong> and the authors.</p>
447+
</div>
444448
</div>
445-
</div>
446-
<div class="column is-6">
447-
<div>
448-
{% responsiveImage './img/node-js-design-patterns-open-book-with-reactor-patterns-diagrams.png', 'Node.js Design Patterns. open book showing some of the diagrams about the reactor pattern' %}
449+
<div class="column is-6">
450+
<div>
451+
{% responsiveImage './img/node-js-design-patterns-open-book-with-reactor-patterns-diagrams.png', 'Node.js Design Patterns. open book showing some of the diagrams about the reactor pattern' %}
452+
</div>
449453
</div>
450454
</div>
451455
</div>
452-
</div>
453456

454-
<h2 class="subtitle is-4 has-text-centered mt-6">
455-
<span>Are you ready to take your Node.js knowledge to the <strong>next level</strong>?</span>
456-
</h2>
457+
<h2 class="subtitle is-4 has-text-centered mt-6">
458+
<span>Are you ready to take your Node.js knowledge to the <strong>next level</strong>?</span>
459+
</h2>
460+
</div>
457461

458462
<div class="mt-6">
459463
<div class="buttons is-justify-content-center">

src/js/navbar.js

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,49 @@
11
export default function navbar () {
2-
// Get all "navbar-burger" elements
3-
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
2+
const html = document.getElementsByTagName('html')[0]
3+
const navbar = document.getElementById('navbar')
4+
const htmlStickyClasses = ['has-navbar-fixed-top']
5+
const navbarStickyClasses = ['is-fixed-top', 'has-shadow']
46

5-
// Check if there are any navbar burgers
6-
if ($navbarBurgers.length > 0) {
7-
// Add a click event on each of them
8-
$navbarBurgers.forEach(el => {
9-
el.addEventListener('click', () => {
10-
// Get the target from the "data-target" attribute
11-
const target = el.dataset.target
12-
const $target = document.getElementById(target)
7+
let lastScrollY = 0
8+
let state = {
9+
stickyBarEnabled: true,
10+
stickyBarVisible: true
11+
}
12+
13+
function updateState (stateChanges) {
14+
const newState = { ...state, ...stateChanges }
15+
if (JSON.stringify(newState) !== JSON.stringify(state)) {
16+
state = newState
17+
update()
18+
}
19+
}
1320

14-
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
15-
el.classList.toggle('is-active')
16-
$target.classList.toggle('is-active')
17-
})
18-
})
21+
function update () {
22+
if (state.stickyBarEnabled && state.stickyBarVisible) {
23+
for (const className of htmlStickyClasses) {
24+
html.classList.add(className)
25+
}
26+
for (const className of navbarStickyClasses) {
27+
navbar.classList.add(className)
28+
}
29+
} else {
30+
for (const className of htmlStickyClasses) {
31+
html.classList.remove(className)
32+
}
33+
for (const className of navbarStickyClasses) {
34+
navbar.classList.remove(className)
35+
}
36+
}
1937
}
38+
39+
const mobileMq = window.matchMedia('screen and (max-width: 768px)')
40+
mobileMq.addEventListener('change', (e) => {
41+
updateState({ stickyBarEnabled: e.matches })
42+
})
43+
44+
window.addEventListener('scroll', (e) => {
45+
const isScrollingUp = window.scrollY < lastScrollY
46+
updateState({ stickyBarVisible: isScrollingUp })
47+
lastScrollY = window.scrollY
48+
})
2049
}

0 commit comments

Comments
 (0)