You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Besides that, you can test your site on various devices on the same network.
12
12
13
-
If comes with the boilerplate by default. When you run:
13
+
It's part of the Eightshift Development Kit by default. When you run:
14
14
15
15
```bash
16
16
npm start
@@ -34,7 +34,7 @@ Using the IP address, you can open it on any device (mobile phone or tablet) tha
34
34
35
35
## Using SSL for local development
36
36
37
-
By default BrowserSync does not work with https urls but if you use HTTPS in your local environment you can simply provide additional key to the Webpack config to make it work.
37
+
By default, BrowserSync does not work with HTTPS URLs. If you use HTTPS in your local environment you can simply provide an additional key in the Webpack config to make it work.
When writing all our JavaScript code we like to make it as fast and optimized as possible and there is no better way of doing that other than utilizing one powerful tool from Webpack called [dynamic imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports).
8
+
As JavaScript code runs on the visitor's device, it's crucial that it's as fast and optimized as possible. A powerful tool from Webpack called [dynamic imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports) helps with that.
9
9
10
-
This method provides us the ability to write all our JavaScript code but load them in the DOM only when it is used, basically, this is what all JavaScript libraries use out of the box.
10
+
Dynamic imports provide us the ability to load our JavaScript code only when it's used.
11
11
12
-
By writing all our JavaScript code like this we can:
13
-
* optimize loading time.
14
-
* reduce the size of finished bundled JavaScript code.
15
-
* have websites that are fast and this can positively impact your Seo rating.
12
+
By writing all JavaScript code using dynamic imports, we can reap significant benefits:
13
+
* optimize loading time
14
+
* reduce the size of finished bundled JavaScript code
15
+
* have websites that are fast, which can positively impact your SEO rating
16
16
17
17
## How does it work?
18
18
19
-
In a nutshell, you load all your code using JavaScript promises and Webpack splits all these promises into separate file chinks. Once the condition to resolve the promise is set (generally we check if the selector is present in the DOM), Webpack automatically injects your chunk in the DOM and loads it up. This is why you will see in your public folder a bunch of smaller files called (`0.js`, `1.js`, `2.js`, etc).
19
+
In a nutshell, you load all your code using JavaScript promises. Webpack splits all these promises into separate file chunks. Once the condition to resolve the promise is set (generally, if a selector is present in the DOM), Webpack automatically injects your chunk in the DOM and loads it up. This is why you will see a bunch of smaller files (`0.js`, `1.js`, `2.js`, etc) in your public folder instead of a single large file.
20
20
21
21
You don't need to think about this. Webpack just does it for you.
22
22
23
23
## Example
24
24
25
-
For example, let's make a carousel. We like to write all our JavaScript code in classes so we will provide an example for that but you can use this with functions as well.
25
+
For example, let's make a carousel. An Eightshift convention is to write JavaScript code using classes, so we'll provide an example for that. However, you can use this approach with functions as well.
26
26
27
-
**We have to files:**
27
+
**We have two files:**
28
28
***index.js** - the main entry point for your JavaScript feature.
29
29
***className.js** - class with your JavaScript features that you can reuse.
30
30
31
31
32
32
### index.js
33
33
34
-
This is a version where you have multiple instances of this feature on one page. If you are creating a feature for your block/component you will use the following example.
34
+
This is a version where you have multiple instances of a feature on one page. If you are creating a feature for your block/component, you'll use something along these lines.
Copy file name to clipboardExpand all lines: website/docs/basics/fonts.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,5 +8,5 @@ title: Fonts
8
8
Fonts can be added to your project in multiple ways, depending on your project's needs. In general, if you can use fonts from an external source like Google Fonts, use that approach because the fonts are loaded smartly. On the other hand, if you have fonts that are added to your project, below are the steps to follow to make them available in the project.
9
9
10
10
* Put your font files in this folder: `assets/fonts`.
11
-
* Import each file in the `assets/fonts/index.js` so that the Webpack knows how to process these files in its build process.
11
+
* Import each file in the `assets/fonts/index.js` so that Webpack knows how to process these files in its build process.
12
12
* In your project, load the font family using font-face [method](/eightshift-docs/sass). We recommend that you create a new file `assets/styles/parts/utils/_defaults.scss` and put everything in that file.
Eightshift Frontend Libs contains a collection of useful SCSS mixins, functions and helpers you can use in projects.
8
9
9
-
For years, we have collected a list of useful SASS mixins, functions, and other stuff you can use in a project. At one point, we felt stupid for copy/pasting code across multiple projects, so we created Eightshift Frontend Libs. This library allows you to use whatever we offer without all that unnecessary clutter.
10
+
For years, we have collected a list of them. At one point, we felt it was stupid to copy-paste code across multiple projects, so we created Eightshift Frontend Libs. This allows you to use whatever we offer without all that unnecessary clutter.
10
11
11
12
Check out our documentation and import what you need from Eightshift Frontend Libs.
12
13
13
14
**Visit [SassDocs](/eightshift-docs/sass) for more details.**
14
15
15
16
## How to use it
16
17
17
-
Sass mixing, functions, and helpers are located in Eightshift Frontend Libs. Therefore, if you are using our Webpack build, you are all set. You can use it by importing it into your project like this:
18
+
SCSS mixins, functions, and helpers are located in Eightshift Frontend Libs. Therefore, if you are using our Webpack build, you are all set. You can use it by importing it into your project like this:
But if you used our `wp boilerplate setup_theme` command, you are all set. Eightshift Frontend Libs are injected in the `_shared.scss` file in your project.
24
+
However, if you used our `wp boilerplate setup_theme` command, you are all set. Eightshift Frontend Libs are injected in the `_shared.scss` file in your project.
In the build process, Webpack creates all the static files from your assets folder and also `manifest.json`inside the public folder. The manifest file contains a key/value list that we use to call the location of the assets dynamically.
8
+
> This `manifest.json`file is generated by Webpack, and is different from the rest of Eightshift manifests described elsewhere in the documentation.
9
9
10
-
This class provides `manifest.json` file location and helpers to return the full path for a specific asset.
10
+
In the build process, Webpack creates all the static files from your assets folder and a `manifest.json` file inside the public folder. The manifest file contains a list of key/value pairs that we use to set the location of the assets dynamically.
11
+
12
+
This class provides the location of the `manifest.json` file and helpers to return the full path for a specific asset.
11
13
12
14
## How to use it
13
15
14
16
First, install the manifest class using this command:
15
17
16
18
`wp boilerplate create_manifest`
17
19
18
-
You will see a custom filter you can use to fetch the item from the public folder in your class. This is the custom filter:
20
+
You will see a custom filter you can use to fetch an item from the public folder in your class. This is the custom filter:
19
21
20
22
```php
21
23
/**
@@ -36,7 +38,7 @@ public function register(): void
36
38
}
37
39
```
38
40
39
-
To use this filter, add the following code and provide the correct name of your asset:
41
+
To use this filter to fetch asset URLs, add the following code and provide the correct name of your asset:
40
42
41
43
```php
42
44
use CoolProject\Manifest\Manifest;
@@ -52,12 +54,12 @@ If there is no `manifest.json` file or you provided the wrong asset name, there
52
54
53
55
## Why not just fetch the asset the old-fashioned way?
54
56
55
-
By the old-fashioned way, we mean running something like this:
57
+
By the old-fashioned way, we mean doing something like this:
You can definitely do this. But with our filter, if you want to change the public folder location or public folder name for some reason, you can change it in one place and you're done.
63
+
You can definitely do this. However, using the manifest approach, if you want to change the public folder location or public folder name for some reason, you can change it in one place and you're done.
62
64
63
-
If you are using the old-fashioned way, you would need to search and replace the whole project and implement the change. There is always a chance you would miss something, break the project, etc.
65
+
If you are using the old-fashioned way, you would need to search and replace the whole project and implement the change. There is always a chance you will miss something and somehow break the project.
At its core, Webpack is a static module bundler for modern JavaScript applications. When Webpack processes your application, it internally builds a dependency graph that maps every module your project needs and generates one or more bundles. Learn more about Webpack[here](https://webpack.js.org/concepts/).
8
+
At its core, Webpack is a static module bundler for modern JavaScript applications. When Webpack processes your application, it builds an internal dependency graph that maps every module your project needs and generates one or more bundles. [Learn more about Webpack](https://webpack.js.org/concepts/).
9
9
10
10
To put it simply, Webpack takes your development files and creates a production-ready version of them based on the config.
11
11
12
-
Eightshift Boilerplate comes with everything set for you to use out of the box. In the root of your project, you will find a file called `webpack.config.js`. If you open it, you will see that the configuration is pulled from the Eightshift Frontend Libs library.
12
+
Eightshift Development Kit comes with everything set up out of the box. In the root of your project, you will find a file called `webpack.config.js`. If you open it, you will see that the configuration is pulled from the Eightshift Frontend Libs library.
13
13
14
14
You can remove this config and write everything from scratch (keep in mind that this is a lot of work), or you can use our config and extend/remove whatever you need.
15
15
16
16
## Override built-in functionality
17
17
18
18
To remove built-in functionality, add a new array to the config called `overrides`.
19
-
If you provide any of the `overrides keys`, it will remove that config from the feature from the build.
19
+
If you provide any of the `overrides` keys, it will remove that config from the feature from the build.
20
20
21
21
You can't change our config; you can only remove it and make your own.
22
22
@@ -59,7 +59,7 @@ const projectConfig = {
59
59
}
60
60
```
61
61
62
-
## Add a new custom functionality
62
+
## Add new custom functionality
63
63
64
64
Let's say you want to add a custom `html-webpack-plugin` to the build. You can simply use all the native [webpack features](https://webpack.js.org/guides/), like in this example:
0 commit comments