ScrapePark.org
Welcome to ScrapePark.org, your "web scraping park".
Apply your web scraping knowledge and skills with this website specially designed for this purpose. Practice safely without affecting third-party platforms, websites, or services.
Elements
ScrapePark.org includes elements to help you practice web scraping, including a table, an iframe, dropdown menus, links, lists, images, buttons, forms, a carousel, menu items, navigation bar items, and more.
freeCodeCamp.org
This website is hosted by freeCodeCamp.org, a friendly community where you can learn to code for free. It is run by a donor-supported 501(c)(3) nonprofit to help millions of busy adults transition into tech. Our community has already helped more than 40,000 people get their first developer job.
Our full-stack web development and machine learning curriculum is completely free and self-paced. We have thousands of interactive coding challenges to help you expand your skills.
Contributing
Thank you for your interest in contributing to ScrapePark.org. We welcome your contributions to expand the website and to localize it into multiple languages.
Commits and Pull Requests
We recommend using conventional title and messages for commits and pull requests.
Please keep the description short (less than 30 characters) and simple; you can add more information in the PR description box and comments.
Read our guidelines to open a pull request.
Templates
The website is localized using the node-static-i18n utility. This utility is used to translate static HTML files.
The templates
directory has the HTML files that serve as templates for the translated versions of the website.
In these files, you will find the keys of the key-value pairs of the JSON files for their corresponding languages.
Example:
<a class="nav-link" href=#prices data-t>navbar.prices</a>
- By adding
data-t
, we are telling thenode-static-i18n
utility that we need to translate the text in this HTML element. - The value of
navbar.prices
will be replaced by the corresponding value in the JSON file of the language that is being generated.
If this is part of the JSON file spanish.json
, when the Spanish version of the website is generated, the value of navbar.prices
will be "Precios"
.
{
"navbar": {
"home": "Inicio",
"about": "Acerca",
"testimonials": "Testimonios",
"products": "Productos",
"prices": "Precios",
"contact": "Contacto",
"contact1": "Contacto 1",
"contact2": "Contacto 2"
}
...
}
Localize an Attribute
To localize an attribute, add these attributes to the HTML element:
data-attr-t <attribute_to_be_localized>-t="<key_in_JSON_file>"
Example:
<input type="text" data-attr-t placeholder-t="form.yourFullName" name="name" required />
In this case, the utility will replace the value of form.yourFullName
from the JSON file and it will assign it as the value of the placeholder
attribute.
This part:
data-attr-t placeholder-t="form.yourFullName"
Will be replaced by placeholder="<value>"
based on its value in the corresponding JSON file.
Like this:
<input type="text" name="name" required placeholder="Tu nombre completo">
How to Add a New Language
With a command, you can use the HTML templates from the templates
directory to generate new and translated HTML files. The translated strings are taken from the corresponding JSON file in the locales
folder.
You can find more details about this command and the steps to add a new language to the project below.
Step 1: Clone the Repository
First, clone the repository to a local copy of all the files and folders.
You can do this with HTTPS with the command:
git clone https://github.com/freeCodeCamp/scrapepark.org.git
Alternatively, with SSH:
git clone git@github.com:freeCodeCamp/scrapepark.org.git
This will create a scrapepark.org
folder.
Step 2: Install node-static-i18n
Next,to generate the new files with the translations, you need to install node-static-i18n
with this command:
npm install -g static-i18n
Note: this will be installed globally, so you will be able to use it in the command line.
templates/locales
Step 3: Create a New File in This new file must be a JSON file with the name of the new language in English.
For example, to create an Italian version of the website, create this file on this path:
templates
|
|- locales
| |
| |- italian.json
Note: it's important to write the full name of the language to generate the path. Please do not abbreviate it.
Step 4: Add Translations to the JSON File
Once the file is ready, add the new and translated strings following the format of the existing JSON files. The new file should translate all the existing strings and it can have new strings (if this is necessary).
Note: please follow the format of the JSON file found in the locales
folder. The existing keys should be in the same relative order in all the files.
Step 5: Generate the HTML Files with node-static-i18n
There are multiple ways to write the command that will generate the translated HTML files.
The general syntax to generate the files for a language is:
static-i18n -l english -i <new_language> templates -o .
Note: for this command to work correctly, you should be in the root directory of the project. This way, the dot .
in the command will refer to the root directory and the /<new_language>
folder will be created in the root directory.
Example:
static-i18n -l english -i spanish templates -o .
This command:
- Runs the static-i18n utility
static-i18n
. - Sets
english
as the default locale with-l english
. - Sets the locale that will be generated (
spanish
in this case) with-i spanish
. - Sets the directory where the files and locales are found (
templates
). - Sets the output directory to the current directory with
-o .
. This will create a new folder with the name of the locale (spanish
in this case) in the root directory. This folder will have the translated HTML files.
Note: the relative paths for images and resources will be updated automatically. By default, all the HTML files in the templates
directory will be translated when you run this command.
To generate the HTML files in English and in another language:
static-i18n -l english -i english -i <language> templates -o .
This will generate the HTML files for the English version of the website in the root directory and the HTML files for the language specified in its corresponding /<language>
subdirectory.
For example:
static-i18n -l english -i english -i spanish templates -o .
Step 6: Add the New Language to the Navigation Bar
After the directory and HTML files are generated, add your language to the dropdown menu in the navigation bar.
You should add this element:
<li><a href="path_to_new_html_file" data-t>navbar.new_language</a></li>
Note: please replace path_to_new_html_file with the path to the index.html file in your language. For example: /italian/index.html
and new_language with your new language in lowercase. For example: italian
.
Here:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
<span class="nav-label" data-t>navbar.language</span>
</a>
<ul class="dropdown-menu">
<li><a href="/index.html" data-t>navbar.english</a></li>
<li><a href="/spanish/index.html" data-t>navbar.spanish</a></li>
<!-- HERE, below the existing languages -->
</ul>
</li>
Then, add your new language to the english.json
file below the existing languages and to the JSON file in your language:
{
"navbar": {
...
"language": "Language",
"english": "English",
"spanish": "Spanish",
-----> HERE <-----
"contact": "Contact",
"contact1": "Contact 1",
"contact2": "Contact 2"
}
...
}
Courses
The courses
directory of this repository has versions of this website that have been used in courses created for freeCodeCamp.
These versions will not accept any pull requests to guarantee that learners will see the same results when they follow the courses step by step.
Copyright and Attribution
This website was created from a template in Free Html Templates.
- Gustavo Juantorena - Spanish translation and template modification.
- Estefania Cassingena Navone - Skateboard shop theme and template modification.
License
Copyright © 2022 freeCodeCamp.org