CyberSec, Network, Cloud & ML/AI, blended!

TLS 1.3 ECH (draft-ietf-tls-esni-22) !

Tue, 21 Jan 2025 09:05:23 +0000

TLS 1.3 (RFC 8446) in motion!

Tue, 21 Jan 2025 09:05:23 +0000

IPSEC (IKEv2 RFC 7296) in motion!

Tue, 21 Jan 2025 09:05:23 +0000

OpenSource LLM? Really? (DeepSeek R1 example)

Wed, 15 Jan 2025 09:05:23 +0000

traditional model building process

Open Source LLM? Really? (DeepSeek R1 Example)

Simplified Edition

Open Source vs. Non-Open Source LLMs: Clearing Up the Confusion

The release of DeepSeek R1 sparked excitement across the tech world. Some have called it “open source,” but the term can mean different things when it comes to Large Language Models (LLMs). Below, we break down what “open source” typically means in software, and how it looks a bit different in the LLM world.

1. Traditional Open Source vs. “Open” LLMs

In traditional open source software:

The source code is publicly available for viewing, modifying, and distributing.
You can also see how it’s compiled and what dependencies it uses.

For “open source” LLMs:

Their trained weights might be publicly shared under a license that allows you to download, run, or fine-tune the model.
However, the training data and training scripts are often kept private.
Without that information, you can’t fully recreate or retrain the model from scratch.

2. Why Having Just the Weights Isn’t Enough

Proprietary or Private Datasets
- LLMs usually learn from massive datasets that might not be available publicly (due to licensing or NDAs).
- Simply having the final weights doesn’t reveal which data the model was trained on.
- This makes replicating or altering the original training process very difficult.
Training Software and Scripts
- Organizations sometimes share only parts of the code used for training.
- The complete “recipe” (including special configs, distributed-training techniques, or hyperparameters) might be missing.
- Without those, recreating results is nearly impossible.
Infrastructure Requirements
- Modern LLMs need powerful (and expensive) GPU clusters or specialized hardware to train.
- Even if you have the same data and code, you might not have the multi-million-dollar compute setup.
- This creates a major practical barrier for reproducing “open” models.

Basically, we are missing here 1 , 2 and 3 on the pictures , including the smart ML / DS engineers haha.

traditional model building process

3. The DeepSeek R1 Release and the “Open” Hype

DeepSeek R1 launched with lots of buzz and was labeled by some as an open-source LLM. In reality:

The weights were shared under a permissive license.
The training data is either under NDA or proprietary.
The training details (like hyperparameters, custom code) remain undisclosed.

Yes, you can download and fine-tune DeepSeek R1. But you can’t fully recreate its training or verify the exact steps that produced those weights. So it’s more accurate to call DeepSeek R1 a “model with openly available weights” rather than a completely open source project.

4. Implications for the LLM Community

Innovation and Transparency
- Released weights help developers build apps or fine-tune for their own needs.
- But hidden data selection or cleaning processes mean unseen biases might remain.
Reproducibility
- True open source in machine learning would let others retrain and get similar results.
- Without full data, code, and environment details, that’s virtually impossible.
Commercial vs. Community
- Companies may share parts of their model for community use or research while keeping key components private.
- Some academic/nonprofit labs aim for full transparency but usually face funding limits for large-scale training.

Provide All Training Artifacts
- Share data sources (where possible), data preprocessing steps, and licensing details.
- Release the training scripts, hyperparameters, and environment configurations.
Document the Infrastructure
- Clearly describe the hardware setup, memory usage, and any unique system configurations.
- While it won’t solve cost issues, it at least helps others understand your approach.
Use Clear Licensing
- If it’s truly open source, use recognized licenses (e.g., Apache 2.0, MIT) that grant reuse and distribution rights.
- If there are restrictions (like research-only), be explicit.
Encourage Community Contributions
- Permit users to view and modify training code.
- Offer discussion platforms (forums, GitHub issues) where people can give feedback or suggest improvements.

6. Conclusion

Simply being able to download and run LLM weights doesn’t make a model “fully open source.” True openness involves sharing everything—training data, code, infrastructure details—so anyone can replicate or deeply modify the model.

DeepSeek R1’s release is exciting, but we need to be clear on what “open” really means. By setting the right expectations, we keep AI research honest, transparent, and collaborative.

Workshops for INWI & Orange telcos in Morocco

Mon, 09 Dec 2024 09:05:23 +0000

Great Workshops for INWI & Orange telcos in Morocco

I’m happy to share about the amazing workshops we recently held in Morocco. My amazing colleague Kim Frellsen joined me as we met with teams from INWI and Orange, along with our great local Fortinet team. Together, we explored some really exciting developments in technology and security.

5G Security: Building a Safer Future

5G is changing everything in telecom, and that means we need to think differently about security. Kim kicked things off by sharing some really important points:

What makes 5G networks more vulnerable to attacks and why we need to pay attention
Smart ways to keep 5G infrastructure safe and prevent security problems
How Fortinet’s security tools can help protect these modern networks

Deep Packet Inspection (DPI): Insights into Network Traffic

I got to dive deep into the latest TLS developments and the challenges telecom operators face with DPI. If you’re curious about these challenges, check out our webfiltering writeup or the TLS ECH animation.

(Note: Some details about our DPI solution are Fortinet proprietary, so I can’t share everything here.)

Quantum Computing and Cryptography: Preparing for the Next Era

Quantum computing is going to change cybersecurity in big ways. We talked about:

Where quantum computing is now and where it’s heading
How it might affect our current encryption methods
Ways we can prepare by using quantum-resistant encryption

Fortinet: A Trusted Partner in Security

Throughout our sessions, we showed how Fortinet can help:

Creating security solutions specifically for telecom companies
Sharing real examples of our technology making a difference
Showing how we’re ready to tackle new challenges in 5G, DPI, and more

Working Together for the Future

These workshops were about more than just sharing information - they were about working together to build something better. By talking directly with the people running these networks, we could help Moroccan telecom operators prepare for what’s coming next in our digital world. It was great to share ideas and think about solutions together.

Thank you to everyone who helped make these workshops so successful, especially Youness Fikhar our main local SE in the telco market, Youssef Fouzi our great Morocco country manager, Mohammed El Kadiri, and all local Fortinet team.

Looking forward to our next collaboration!

Global Big Data Digital Transformation, Nov 2024, Amsterdam

Fri, 22 Nov 2024 09:05:23 +0000

Event Recap: Big Data Digital Transformation Nov 2024, Amsterdam, The Netherlands

I’m thrilled to share that I recently had the opportunity to host an engaging workshop in Amsterdam, exploring the transformative power of Big Data, Machine Learning, and the latest applications of emerging technologies.

From discussing the evolution of Big Data technologies like Apache Spark and Kafka to diving into real-world Machine Learning applications in predictive analytics and anomaly detection, we explored how these innovations are shaping industries like telecommunications, retail, and energy optimization.

A big takeaway? The future of technology is not just in the tools we develop, but in how we use them to transform lives and industries.

TLS/SSL Advancements: The Privacy vs. Security Dilemma

Mon, 26 Feb 2024 09:05:23 +0000

TLS/SSL ESNI & ECH advancements, the privacy vs security dilemma

Introduction

In today’s cybersecurity landscape, we’ve seen big improvements in web encryption. From the broad adoption of TLS 1.3 to the evolution from Encrypted Server Name Indication (ESNI) to Encrypted Client Hello (ECH), plus the rollout of HTTP/3, these advancements have greatly strengthened online data protection. At the same time, they introduce challenges for network security monitoring and web filtering.

Note: This document highlights the changes that most impact network security and filtering—covering SNI, CN, key-shares, ESNI/ECH DNS records, DoH, and how to decrypt TLS.

TLS 1.2 vs. TLS 1.3 and Web Filtering

Web Filtering in TLS 1.2

TLS 1.2 Exchange and Interesting Fields

TLS 1.2 (Transport Layer Security) ensures secure communication but keeps some fields in cleartext:

SNI: Server Name Indication
CN: Common Name in the server certificate

These fields can be scanned by network devices for filtering decisions.

Key points:

Two round trips happen before encryption is fully established.
SNI and CN remain clear, letting traditional filters work.

A Look Inside TLS 1.2 Packet Capture

Below is an example of a typical TLS 1.2 exchange where the SNI is visible (in cleartext):

TLS 1.3: A Major Step Forward

TLS 1.3 Exchange and Key Changes

TLS 1.3 improves upon TLS 1.2 by encrypting data sooner and reducing round trips:

The client sends a keyshare immediately (ClientHello).
The server responds with its keyshare, allowing earlier encryption.
CN generally gets protected faster in TLS 1.3.
SNI is still in cleartext without ESNI/ECH.

ESNI, ECH, and DoH: Locking Down the Remaining Gaps

ESNI (Encrypted SNI)

ESNI was an initial method to hide the SNI in the TLS 1.3 handshake. A special DNS record (_esni) let the client fetch a public key to encrypt the SNI before sending its ClientHello. However, ESNI didn’t cover other fields (like ALPN), and compatibility issues arose. It’s largely been replaced by ECH.

DoH (DNS over HTTPS)

Even if the SNI is encrypted, the domain might still be seen in DNS queries. DNS over HTTPS (DoH) fixes this by encrypting DNS requests—often enabled in modern browsers—making on-path domain snooping harder.

Encrypted Client Hello (ECH)

ECH encrypts the entire ClientHello (including SNI, ALPN, and other fields), so it’s a more complete privacy solution than ESNI. It uses a new HTTPS record type (65) to get the server’s public key for encryption and typically works together with DoH.

Key points:

Two ClientHello messages (“outer” is cleartext, “inner” is encrypted).
The “outer SNI” can be a CDN or generic hostname, while the real SNI is in the “inner” message.
Most next-gen firewalls can’t inspect the true SNI without decryption.

QUIC and HTTP/3

HTTP/3 uses QUIC, which also aims to encrypt most data. ECH can be applied to QUIC/HTTP/3 just like TLS 1.3, hiding the real SNI and other details from any on-path traffic analysis.

Raising Awareness and Looking Ahead

Machine Learning: Some solutions use ML-based traffic identification without relying on the SNI.
Man-in-the-Middle (MoM) Decryption: Organizations may consider deeper TLS decryption for better visibility, but it’s more intrusive.
Ongoing Changes: The ECH specification is still evolving, meaning new capabilities and techniques for defense may emerge swiftly.

Balancing user privacy with crucial security monitoring remains a key challenge.

Annexe: Useful Info and Tools

Pcaps / Keys Used in This Document

Find the pcaps and TLS keys showcased here: https://github.com/abdessamad-elamrani/New-TLS-and-Web-security-advancements

How to Decrypt TLS

Obtain Session Keys: ```bash export SSLKEYLOGFILE=/path/to/sslkeys.txt Then configure Wireshark (Preferences → Protocols → TLS → (Pre)-Master-Secret log filename).

Capture Traffic: Perform a packet capture using the client that has session logging set. Load Keys: In Wireshark, specify the same key log file. If the session keys match, the traffic will be decrypted automatically. This approach works for both TLS 1.2 and TLS 1.3, though certain limitations may affect early data or other advanced features.

European Executive Forum, 26th Feb 2024, Amsterdam The Netherlands

Mon, 26 Feb 2024 09:05:23 +0000

Strategic & Technological Innovation: Navigating the Future of Cybersecurity

At the eSentire European Executive Forum held at the Pulitzer Hotel in Amsterdam, I had the privilege of participating as a speaker among senior leaders from MSPs across the Benelux region. The event, sponsored by eSentire and hosted by Phil Skelton, focused on the evolving cybersecurity landscape, emphasizing the integration of advanced technologies like AI and machine learning in Managed Detection and Response (MDR) services.

During my talk, I highlighted the critical need for strategic partnerships to address the rising sophistication of cyber threats and the cybersecurity skill gap. I discussed how MSPs can leverage collaborations with specialized providers to enhance their service offerings and meet regulatory compliance requirements, such as GDPR and NIS2.

The round table also provided a platform for discussing the challenges of differentiating services in a competitive market and the importance of investing in cybersecurity infrastructure. I shared insights on how digital transformation and regulatory pressures are driving the demand for robust cybersecurity measures.

Overall, the event underscored the importance of innovation and collaboration in navigating the complexities of the cybersecurity market, offering valuable insights into future trends and strategic opportunities.

Since this was top executives round table, for privacy reason I will not share pictures from inside the round table event.

Read the full event report here

Workshop France Novotel, Nov 5th-7th 2024

Thu, 05 Oct 2023 09:05:23 +0000

Learning and Sharing at Our Annual Telco Workshop

It’s always exciting when we get together for our yearly Telco workshop! This time around, I had the chance to share some really interesting topics with our Telco SE team, especially diving into some tricky areas like Quality of Service (QoS) and how we test our solutions.

Here are the cool things we covered:

Session 1: Making Sense of Telco and QoS Challenges

The QoS session was really fun and packed with useful information. We got into the nitty-gritty of traffic flows and how things work at the chip level, plus we looked at kernel QoS, how to design it right, and what problems to watch out for.

I loved how engaged everyone was - there were lots of great questions throughout! What made me really happy was how many engineers came up to me afterward to talk about their QoS projects in the Telco market. Seeing all this interest has got me thinking about writing a more detailed internal guide about it.

Session 2: Real-World Experience with Fortinet Solutions

For the solutions testing session, I joined my manager, Simon Bryden, we had a great time sharing what we’ve learned from testing and validating solutions in the real world. We wrapped up with some funny stories from our field experiences, which was a nice way to end things on a lighter note.

Workshop Mouratoglou Hotel & Resort, Oct 13th-15th 2023 , France

Thu, 05 Oct 2023 09:05:23 +0000

I had the privilege of speaking at a prestigious event held at the Mouratoglou Hotel in Sophia Antipolis, France. This event brought together leading experts in the field of cybersecurity, and I was honored to contribute to the discussions with my insights and experiences.

During the sessions, I delved into the intricacies of low-level traffic generation within the cybersecurity industry. My presentation focused on advanced techniques for performance enhancement, specifically utilizing kernel netmap and DPDK. These tools are pivotal in optimizing network performance and ensuring robust security measures.

Furthermore, I explored the power of Unix systems in simulating complex telecommunications scenarios. This included demonstrations on simulating GTPv1, 5G PFCP, and other cutting-edge technologies. These simulations are crucial for testing and validating security protocols in real-world telco environments.

The event was a fantastic opportunity to share knowledge and engage with fellow professionals who are equally passionate about advancing cybersecurity technologies. It was an enriching experience that underscored the importance of collaboration and innovation in our field.

I am grateful for the opportunity to have been part of such a dynamic and forward-thinking event, and I look forward to continuing to contribute to the cybersecurity community.

AI & CyberSec in Finance and Energy Sector, Amsterdam June 2023 , The Netherlands

Mon, 05 Jun 2023 09:05:23 +0000

Digital Transformation in the Energy Sector Forum 2023, Amsterdam

I was excited to speak at an interesting event in Amsterdam this June, where we focused on how AI is changing the energy sector. It was great to meet other innovators who are working on making energy systems smarter and more efficient.

I also highlighted new AI technologies that help build effective machine-learning energy-management models, and integrate directly into energy open source platforms. These community-driven solutions allow for tailored automations and easier integrations, ultimately helping us pinpoint and address energy waste more precisely.

We also had an important discussion about AI itself. While AI is amazing at solving problems, training big AI models actually uses a lot of energy. We talked about data centers and how to balance using new technology while being environmentally responsible.

It was really valuable to connect with others who care about making our energy use smarter and more sustainable. I’m looking forward to seeing how we can keep pushing these ideas forward.

For more details on my work and insights, feel free to visit my LinkedIn profile or my personal website.

The Math behind Quantum, in a nutchel

Sat, 15 Jan 2022 09:05:23 +0000

Quantum Computing Demystified: The Essential Math

Quantum computing still feels mysterious to many, but at heart it uses beautifully simple math ideas—once you get used to them!

1. Qubits: More Than 0 or 1

Imagine a spinning coin: Before it lands, you don’t know if it’s heads or tails—it’s kind of “both.” A qubit is similar:

A regular bit is strictly 0 or 1.
A qubit can be both 0 and 1 at the same time (a “superposition”).

In math form:
|ψ> = α|0> + β|1>

where alpha and beta are numbers that show “how much” the qubit is in state

0> and

1>.

2. Entanglement: Qubits Acting Together

Entanglement is like two magic coins you flip at the same time. If one lands heads, the other is guaranteed tails (or vice versa). They’re linked, even if separated. An example is the “Bell state”:

(1 / √2) * (

00> +

11>)

Translated loosely:

Each qubit is not just 0 or 1, but they act as a single unit.
Measuring one qubit instantly tells you the state of the other.

3. Quantum Gates: Transforming Qubits

Think of quantum gates like instructions in a recipe:

X Gate (like a NOT): Flips 0>↔ 1>.
Hadamard (H Gate): Creates a superposition if starting from 0>.
CNOT (Controlled NOT): Operates on two qubits: if the first qubit is 1>, it flips the second qubit.

They’re special because they must keep track of probabilities correctly (they’re “unitary” operations).

4. Quantum Algorithms: Simple Insights

Grover’s Algorithm helps find a needle in a haystack about √N times faster than classical searching. It’s like shaking all the “hay” in parallel and letting the item you want stand out more and more after each shake.

Shor’s Algorithm can factor large numbers surprisingly quickly—threatening normal encryption (RSA). That’s why big companies and governments are watching quantum computing closely!

Why It Matters

Superposition: A qubit can represent multiple possibilities at once.
Interference: Quantum effects can magnify the right answers and reduce the wrong ones.
Entanglement: Qubits can be tied together in ways no classical system can match.

Though today’s quantum computers have limited power and can be noisy, these concepts promise amazing future applications—from speeding up searches to cracking tough math problems.

Getting Started

Brush up on linear algebra (matrices and vectors).
Review complex numbers—those “i” and “√(-1)” might pop up!
Understand probability (we talk about measuring states in terms of odds).
Dive into basic quantum gate ideas: how they flip and combine these qubits.

Quantum computing isn’t “magic.” It’s math that looks magical until you get familiar with it—like learning chord progressions on a guitar. With some practice, you’ll see how the notes fit together.

“If you think you understand quantum mechanics, you don’t understand quantum mechanics.”
— Richard Feynman
(But it still helps to learn the basics!)

YaBilal.nl : Combining PCB Design, MCU Coding, and AWS IoT

Wed, 10 Mar 2021 09:00:00 +0000

Introduction

YaBilal.nl is my personal passion project that captures all the phases of cutting-edge product development: PCB design, low-level MCU coding, AWS Cloud orchestration, and IoT integration. Whether you live in Europe, the US, or anywhere in between, I’m confident YaBilal can bring the exact Azan times you need right into your home.

The Tech Stack Behind YaBilal

Custom PCB Layout
I designed and manufactured a compact PCB (approximately 7×5×4 cm) that integrates everything needed for audio playback and Wi-Fi connectivity. I made sure all major components—from power management to signal processing—flow together seamlessly.
Low-Level MCU Firmware
The microcontroller at the heart of YaBilal manages communication with the speaker, interfaces with sensors and controls, and synchronizes with my cloud service. The firmware is fine-tuned to minimize latency and keep the overall system stable.
AWS Cloud Backend
Behind the scenes, an AWS IoT backend continuously monitors all mosque prayer times, ensuring they’re accurate and updated hourly. Whenever there’s a schedule change—for example, during Ramadan or daylight savings—the cloud immediately pushes the updated information to every YaBilal appliance.
IoT Integration
YaBilal uses a secure IoT protocol to exchange data with AWS. This means each device checks in regularly to retrieve the next Azan schedule, adjust for new mosques, or even update the local time offset. Whether you’re online or offline, YaBilal adapts to keep you in sync.
3D Enclosure Design
To house all the electronics, I built a streamlined 3D enclosure that fits easily in your bedroom, kitchen, or living room. It’s small enough not to take up too much space, yet big enough to include intuitive volume controls and deliver a clear, pleasant Azan.

How YaBilal Works

Select Your Mosque
Choose from a list of growing supported mosques. The cloud backend updates your device’s prayer schedule immediately.
Adjust Volume & Settings
A built-in speaker and simple buttons let you select the volume you want.
Enjoy Authentic Azan
YaBilal accurately plays the Azan on time, every time—no guesswork or generic approximations.

This close sync with AWS Cloud ensures errors or delays are practically eliminated. If your local mosque changes its schedule, the device is instantly updated.

YaBilal Models

YaBilal-Standard

A simple, straightforward choice if you want an out-of-the-box solution for exact Azan times.

• Price: €90.00
• Status: Pre-Order

YaBilal-Plus

A step up that includes a personalized engraving on the device, making it a great gift or keepsake. Purchasing the Plus version also helps me continue refining and supporting more mosques around the globe.

• Price: €120.00
• Status: Pre-Order
• Includes custom engraving

Why I Built It

Living in Europe, I often felt disconnected from the Azan schedules in my hometown. I realized many other Muslims here (and in other parts of the world) face the same challenge. By merging the latest hardware, firmware, cloud computing, and IoT technologies, I brought YaBilal to life to ensure every user stays connected to their faith—no matter their location.

Order & Further Details

Explore YaBilal-Standard or YaBilal-Plus at YaBilal.nl to place your pre-order. If you have any questions or need assistance, feel free to drop a message. I’m always happy to help.

Final Thoughts

YaBilal is my personal passion project that captures all the phases of cutting-edge product development: PCB design, low-level MCU coding, AWS Cloud orchestration, and IoT integration. Whether you live in Europe, the US, or anywhere in between, I’m confident YaBilal can bring the exact Azan times you need right into your home.

BGP (RFC 4271) in motion!

Wed, 03 Feb 2021 09:05:23 +0000

BGP (Border Gateway Protocol) Interactive Animation

Welcome to this interactive animation of the Border Gateway Protocol (BGP), the protocol that makes internet routing possible. This animation will help you understand how BGP works, including:

AS (Autonomous System) relationships
BGP path selection process
Route advertisement and withdrawal
BGP attributes and decision process
Policy-based routing

Use the interactive controls below to explore different aspects of BGP routing and see how routing decisions are made in real-time.

How to Use This Animation

Use the timeline controls to step through different phases of BGP routing
Click on different AS nodes to see their routing tables
Observe how route advertisements propagate through the network
Experiment with different scenarios using the controls provided

Technical Details

This animation is built using React and D3.js, providing a dynamic and interactive way to visualize BGP routing processes. The visualization accurately represents:

BGP path attributes (AS_PATH, LOCAL_PREF, MED, etc.)
Route propagation and convergence
Policy implementation
Route filtering and aggregation

Feel free to experiment with different scenarios and see how BGP makes routing decisions in various situations.

animation

TLS 1.3 ECH (draft-ietf-tls-esni-22) !

TLS 1.3 (RFC 8446) in motion!

IPSEC (IKEv2 RFC 7296) in motion!

BGP (RFC 4271) in motion!

tech

OpenSource LLM? Really? (DeepSeek R1 example)

TLS/SSL Advancements: The Privacy vs. Security Dilemma

The Math behind Quantum, in a nutchel

YaBilal.nl : Combining PCB Design, MCU Coding, and AWS IoT

events

Workshops for INWI & Orange telcos in Morocco

Global Big Data Digital Transformation, Nov 2024, Amsterdam

European Executive Forum, 26th Feb 2024, Amsterdam The Netherlands

Workshop France Novotel, Nov 5th-7th 2024

Workshop Mouratoglou Hotel & Resort, Oct 13th-15th 2023 , France

AI & CyberSec in Finance and Energy Sector, Amsterdam June 2023 , The Netherlands

Guides

Posts by Category : {{ page.title }}

{% for post in site.categories.guides %}

{% endfor %}

Get Started

## Getting Started - How to use “devlopr-jekyll” theme ## What's Jekyll ? If you aren’t familiar with Jekyll yet, you should know that it is a static site generator. It will transform your plain text into static websites and blogs. No more databases, slow loading websites, risk of being hacked…just your content. And not only that, with Jekyll you get free hosting with GitHub Pages! If you are a beginner we recommend you start with [Jekyll’s Docs](https://jekyllrb.com/docs/installation/). Now, if you know how to use Jekyll, let’s move on to using this theme in Jekyll: ## Watch Tutorial ### Steps to create your blog using devlopr-jekyll and Host using Github Pages : > **Step 1.** Fork the repo - [click here](https://github.com/sujaykundu777/devlopr-jekyll/fork) ![Devlopr Jekyll Repo](/assets/img/posts/fork1.PNG){:class="img-fluid"} > **Step 2.** Use **your-github-username.github.io** as the new repo ( Replace your-github-username with yours). Remember if you use the name other than your-github-username.github.io , your blog will be built using gh-pages branch. ![Devlopr Jekyll Repo](/assets/img/posts/fork2.PNG){:class="img-fluid"} ![Devlopr Jekyll Repo](/assets/img/posts/fork3.PNG){:class="img-fluid"} > **Step 3.** Clone the new repo locally to make changes : ![Devlopr Jekyll Repo](/assets/img/posts/fork31.PNG){:class="img-fluid"} ![Devlopr Jekyll Repo](/assets/img/posts/fork32.PNG){:class="img-fluid"} ![Devlopr Jekyll Repo](/assets/img/posts/fork33.PNG){:class="img-fluid"} ```bash $ git clone https://github.com/yourusername/yourusername.github.io $ cd yourusername.github.io $ code . ``` > **Step 4.** Open the files using VSCode and edit _config.yml and edit with your details: - _config.yml file - replace with your own details - _posts - Add your blog posts here - _includes - You can replace the contents of the files with your data. (contains widgets) - _assets/img - Add all your images here ![Devlopr Jekyll Repo](/assets/img/posts/fork34.PNG){:class="img-fluid"} > **Step 5** - Install the development requirements: ### Set up local development environment 1. [Git](https://git-scm.com/) 2. [Ruby](https://www.ruby-lang.org/) and [Bundler](https://bundler.io/) 3. [VSCode](https://code.visualstudio.com/download) We need ruby and bundler to build our site locally. After installation check if its working: For ruby : ```bash $ ruby -v ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu] ``` For bundler : ```bash $ gem install bundler $ bundler -v Bundler version 2.2.29 ``` Add jekyll : ```bash $ bundle update $ bundle add jekyll ``` This command will add the Jekyll gem to our Gemfile and install it to the ./vendor/bundle/ folder. You can check the jekyll version ``` $ bundle exec jekyll -v jekyll 4.2.0 ``` > **Step 6.** Install the gem dependencies by running the following command ```bash $ bundle update $ bundle install ``` > **Step 7.** Serve the site locally by running the following command below: ```bash $ bundle exec jekyll serve --watch ``` or you can also serve using : ```bash $ jekyll serve ``` Visit [http://localhost:4000](http://localhost:4000) for development server ![Devlopr Jekyll Repo](/assets/img/posts/fork41.PNG){:class="img-fluid"} ### Adding Content Start populating your blog by adding your .md files in _posts. devlopr-jekyll already has a few examples. #### YAML Post Example: ```yml --- layout: post title: Sample Post author: Sujay Kundu date: '2019-05-21 14:35:23 +0530' category: - jekyll summary: This is the summary for the sample post thumbnail: sample.png --- Hi ! This is sample post. ``` #### YAML Page Example: ```yml --- layout: page title: Sample Page permalink: /sample-page/ --- Hi ! This is sample page. ``` #### Editing stylesheet You’ll only work with a single file to edit/add theme style: assets/css/main.scss. ### Deploy your Changes Once happy with your blog changes. Push your changes to master branch. > **Step 8.** Push Your Local Changes ```bash $ git add . $ git commit -m "my new blog using devlopr-jekyll" $ git push origin master ``` Visit your Github Repo settings ! Enable master branch as Github Pages Branch : ![Devlopr Jekyll Repo](/assets/img/posts/fork6.PNG){:class="img-fluid"} > **Step 9.** Deploy your Blog : ![Devlopr Jekyll Repo](/assets/img/posts/fork7.PNG){:class="img-fluid"} > Congrats ! On your new shining Blog ! You can visit the blog using [http://your-github-username.github.io](http://your-github-username.github.io).

Jekyll

Posts by Category : {{ page.title }}

{% for post in site.categories.jekyll %}

{% endfor %}

Guides

Posts by Category : {{ page.title }}

{% for post in site.categories.sample_category %}

{% endfor %}

Our Sponsors

Thanks to all the amazing contributors and our Backers for the support. - [Dirish Mohan](https://dirishmohan.com)

Styleguide

### devlopr - Styleguide

Lets try the different text styles Bold , Strong , Emphasis , Italic

Now, lets try different heading styles :

Hello in h1 !

Hello in h2 !

Hello in h3 !

Hello in h4 !

Hello in h5 !

Hello in h6 !

Unordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

Ordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

This is a Block Quote, It can Expand Multiple Lines

You can use the mark tag to highlight text.

~~This line of text is meant to be deleted text~~

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Instagram Embed

View this post on Instagram

A post shared by Sujay (@sujaykundu777)

Twitter Embed

I just published “Deploying a blog using Jekyll and Github Pages with SSL certificate for Free” https://t.co/B3T3IQVU93
— Sujay Kundu (@SujayKundu777) June 29, 2018

YouTube Responsive Embed

Vimeo Responsive Embed

TED Responsive Embed

Twitch Responsive Embed

SoundCloud Embed

CodePen Embed

Syntax Highlighting

'use strict';
var markdown = require('markdown').markdown;
function Editor(input, preview) {
  this.update = function() {
    preview.innerHTML = markdown.toHTML(input.value);
  };
  input.editor = this;
  this.update();
}

You can add inline code just like this, E.g. .code { color: #fff; }

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

GitHub gist Embed

Input Style

Security Policy

# Security Policy ## Supported Versions Use this section to tell people about which versions of your project are currently being supported with security updates. | Version | Supported | | ------- | ------------------ | | 5.1.x | :white_check_mark: | | 5.0.x | :x: | | 4.0.x | :white_check_mark: | | < 4.0 | :x: | ## Reporting a Vulnerability Use this section to tell people how to report a vulnerability. Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.

Change Log

# Change Log All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). **Note that references to the Font-Awesome-Pro repository refer to a GitHub repository that is by invitation only. You will get a 404 - Not Found if you do not have access** --- ## [5.1.0](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.1.0) - 2018-06-20 **Minor version upgrade notice: there are some backward-incompatible changes to this release. See the [UPGRADING.md guide](https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md) for more information.** ### Added * New Emoji, Design, and Travel category pack * Another group of requested and commissioned icons * Version 4 shim for Web Fonts with CSS * New simplified download and NPM packages * @fortawesome/fontawesome-free and @fortawesome/fontawesome-pro NPM packages that match what's available in the CDN and .ZIP files * Brand icons rev, nimblr, megaport, mailchimp, hornbill, wix, weebly, themeco, squarespace, aws, shopware * API method toHtml() for converting abstract objects to HTML * API method counter() to generate Layers Counters * API method watch() to configure MutationObserver and watch DOM for icon changes and additions ### Changed * Relocating sponsor data to a separate sponsors.yml * Updated teamspeak brand icon * No more default exports in the CommonJS/ES packages (anything installed from NPM) * Greatly improved performance and rendering of CSS pseudo-elements with SVG and JavaScript * Configuration of SVG with JavaScript can now be done with attributes on the script tag * SVG with JavaScript pseudo-elements now match syntax (font-family, font-weight) of Web Fonts with CSS ### Fixed * Tree shaking of all NPM packages by default * Alignment of the book-open and dice-six icon * Correcting creative-commons * Incorrect license on the fontawesome-common-types package * Improve ligatures that share a base name with another ligature * Correcting solid style of the digital-tachograph icon * Prevent duplicating classes in some scenarios with SVG with JavaScript * Duplicate insertion of CSS when insertCss() method was called * Missing TypeScript definitions for the free-brands-svg-icons package --- ## [5.0.13](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.13) - 2018-05-10 ### Added * 68 icons to Free and 165 to Pro of the most requested icons in Font Awesome --- ## [5.0.12](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.12) - 2018-05-03 ### Added * A long time ago in a galaxy far, far away some icons were added ### Fixed * Renamed the r brand to r-project to prevent ligature collision with the "r" glyph --- ## [5.0.11](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.11) - 2018-05-01 ### Added * 16 new user icons * Full set of Creative Commons symbols * Regular style comment-dots used for v4 comment-alt in shim * Top 6 brand icons: r, ebay, mastodon, researchgate, keybase, teamspeak ### Changed * Revised slider icons FortAwesome/Font-Awesome#11872 * Make desktop typeface easier to find in apps that support ligature previews ### Fixed * Remove errant XML entity from the lastfm-square icon FortAwesome/Font-Awesome#12847 * Correcting paths in cloud icons FortAwesome/Font-Awesome-Pro#920 --- ## [5.0.10](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.10) - 2018-04-10 ### Added * New java brand icon FortAwesome/Font-Awesome#386 ### Changed * Updating depth of dna icon * Updating pied-piper, adding pied-piper-hat ### Fixed * Correcting path errors on readme icon FortAwesome/Font-Awesome#12754 * Light style of lamp icon FortAwesome/Font-Awesome#12725 --- ## [5.0.9](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.9) - 2018-03-27 ### Added * New Chat icon pack and category * New Charity icon pack and category * New Moving icon pack and category * New icons hands and hand-holding ### Changed * Updated flipboard, readme, and houzz brand icon * Making all solid icons in the medical icon pack free * Updated hand-holding-box and hand-receiving in the Light style ### Fixed * Missing box-sizing CSS property for fa-layers-counter --- ## [5.0.8](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.8) - 2018-03-01 ### Fixed * OTF font files missing ligatures for Pro styles FortAwesome/Font-Awesome#12486 FortAwesome/Font-Awesome-Pro#1034 --- ## [5.0.7](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.7) - 2018-02-26 ### Added * New Logistics category * New Medical category * Individual SVG files available from the Font Awesome CDN * Additional search terms ### Changed * Apple brand icon update FortAwesome/Font-Awesome#12337 * Disable mutation observers with fontawesome.noAuto() is called * License information now references https URL scheme ### Fixed * Missing TypeScript names FortAwesome/react-fontawesome#83 * Adding categories metadata FortAwesome/Font-Awesome#12034 * TypeScript improvement for fontawesome.layer() * Correcting a melting, wobbling, weird-looking whistle --- ## [5.0.6](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.6) - 2018-01-25 ### Fixed * @fortawesome/fontawesome-pro-light missing submodules --- ## [5.0.5](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.5) - 2018-01-25 ### Added * New Sports category * New Chess category * Added brand icons for flipboard, php, quinscape, and hips ### Fixed * Sass and Less mixin fa-icon() now uses ems instead of percentage * Corrected misspelling of "Alternate" in category labels * Improved TypeScript definitions for @fortawesome/fontawesome * Server-side rendering was failing due to DOM-specific object access * SVG attributes "data-fa-processed" renamed to "data-fa-i2svg", only applies if rendered with i2svg() method --- ## [5.0.4](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.4) - 2018-01-10 ### Changed * Updating all NPM package READMEs ### Fixed * Improving TypeScript exports and fixing some incorrect definitions * TypeScript error when importing entire style Fort-Awesome/Font-Awesome#12072 * Pseudo-elements erasing text contents in parent container Fort-Awesome/Font-Awesome-Pro#11995 * fa-layers-text misalignment when using Bootstrap Fort-Awesome/Font-Awesome#11871 --- ## [5.0.3](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.3) - 2018-01-08 ### Added * Adding elementor, youtube-square brand icons * Adding window-minimize to the Free subset * TypeScript support for all NPM packages ### Fixed * Corrected uneven spacing in university, address-book, address-card, id-badge, id-card, mouse-pointer, phone-volume, portrait, user-alt, user-circle, user-md, user-plus, user-times, user , users * Corrected uneven spacing in brand icons behance-square, dashcube, discourse, ember, erlang, fort-awesome, js-square, laravel, mix, patreon, palfed, phoenix-framework, node-js, skyatlas, stack-exchange, stripe, viber, weixin, yahoo , yoast --- ## [5.0.2](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.2) - 2017-12-19 ### Added * Adding amazon-pay, cc-amazon-pay, korvue, ethereum brand icons * Adding stopwatch to Free version ### Changed * Ligatures now support capital case, all caps, and title case ### Fixed * NPM packages now behave the same way as CDN and browser-specific packages FortAwesome/Font-Awesome-Pro#727 FortAwesome/Font-Awesome-Pro#896 FortAwesome/Font-Awesome-Pro#891 * Icon doesn't change when pseudo-element content changes FortAwesome/Font-Awesome-Pro#839 * Invalid XML in sprites FortAwesome/Font-Awesome-Pro#927 * Incorrect version in Sass and Less variable files --- ## [5.0.1](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.1) - 2017-12-08 ### Added * Adding font-awesome-flag, lock-open, redo-alt, sync-alt, undo-alt to the Free version * New NPM packages `fontawesome-free-webfonts` and `fontawesome-pro-webfonts` * Adding old icon names to search terms for renamed icons * Extensive metadata added to the `advanced-options` directory * Adding stripe-s brand icon * Adding typo3 brand icon ### Changed * Updated dropbox brand icon to match new branding guidelines * Updated firefox brand icon * Updated strava brand icon * OTF font file now include a space character ### Fixed * OTF font file now supports different styles in Windows * OTF font file "j" character now has correct space on the right * Modifying the `class` attribute on an existing `` will now precede other link and style definitions * BREAKING `fontawesome.text` and `fontawesome.icon` now use `styles` param instead of `style` * Updated sizing for twitter, discord, youtube * Class fa-li now respects line-height and has new recommended markup (see included docs) ### Fixed * Duplicate `style` tags being added in the head FortAwesome/Font-Awesome-Pro#858 * Error with icon composition/masking that caused a confusing error message * An error when using pseudo elements and the element is empty (Array.reduce error) * Icons not being replaced with SVG if the text content is not empty --- ## [5.0.0-rc4](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-rc4) - 2017-10-27 ### Added * Ligature support in the OTF font * Vue.js brand icon * Sass and Less brand icons * Autoprefixer brand icon * Individual icon imports in icon packages FortAwesome/Font-Awesome-Pro#808 ### Changed * Better poo eyes * Renamed HTML status classes to `fontawesome-i2svg-active`, `fontawesome-i2svg-pending`, `fontawesome-i2svg-complete` * HTML status class for active is added only after the first batch of icon replacements occur * Added mention of newer versions of iOS in documentation FortAwesome/Font-Awesome-Pro#810 ### Fixed * Performance and missing features with mutation observer (should fix FortAwesome/Font-Awesome-Pro#813) * Incorrect handling of icon class and style attributes when using autoReplace = 'nest' FortAwesome/Font-Awesome-Pro#809 * Pseudo elements not added or removed when class mutations occur FortAwesome/Font-Awesome-Pro#821 --- ## [5.0.0-rc3](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-rc3) - 2017-10-13 ### Added * Node.js brand icon FortAwesome/Font-Awesome-Pro#779 * React brand icon FortAwesome/Font-Awesome-Pro#780 * OSI brand icon FortAwesome/Font-Awesome-Pro#748 * Add a class to the html element when icon replacement is complete FortAwesome/Font-Awesome-Pro#778 * Add support for symbols in API including ability to name the symbol * Use CSS pseudo elements (:before and :after) to make trigger SVG replacements ### Changed * Switched the locations of fork and knife in utensils-alt FortAwesome/Font-Awesome-Pro#466 * Updated the AWS brand icon FortAwesome/Font-Awesome-Pro#735 * Updated Apple App Store icon FortAwesome/Font-Awesome-Pro#728 ### Fixed * Do not throw an error if icon is missing when calling icon() method in API * Ensure that unicode values do not change between releases * Version field is missing in fontawesome-pro-brands/package.json FortAwesome/Font-Awesome-Pro#781 * Repeated commenting out of fa-layers when i2svg is called FortAwesome/Font-Awesome-Pro#788 * Title not showing up correctly for SVG FortAwesome/Font-Awesome-Pro#786 --- ## [5.0.0-rc2](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-rc2) - 2017-09-22 ### Added * Brand icons: accusoft, ns8, uniregistry ### Fixed * Link to the npm package in the docs FortAwesome/Font-Awesome-Pro#729 * Incorrect reference to fontawesome-pro.js in docs --- ## [5.0.0-rc1](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-rc1) - 2017-09-15 ### Changed * New Bitbucket logo FortAwesome/Font-Awesome-Pro#720 * Modifed the star icons to match use case better FortAwesome/Font-Awesome-Pro#710 * Switched names of css3 and css3-alt to reflect correct branding ### Fixed * Correct whitespace with the Visa logo FortAwesome/Font-Awesome-Pro#719 * Improve OTF support by passing through FontForge FortAwesome/Font-Awesome-Pro#565 * Fonts with "undefined" name FortAwesome/Font-Awesome-Pro#711 * Shims will only function if using old prefix of "fa" FortAwesome/Font-Awesome-Pro#692 * Added missing "youtube" icon to categories --- ## [5.0.0-beta7](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-beta7) - 2017-09-11 ### Added * Ability to nest the `` FortAwesome/Font-Awesome-Pro#624 * Define icons as symbols and leverage SVG sprites FortAwesome/Font-Awesome-Pro#629 * Added alternative CSS3 logo FortAwesome/Font-Awesome-Pro#682 ### Changed * Power Transforms now execute inside the SVG instead of on the root element * Filenames have changed to reflect a better division between Font Awesome Free and Pro ### Fixed * More improvements to the version 4 shim FortAwesome/Font-Awesome-Pro#673 FortAwesome/Font-Awesome-Pro#678 FortAwesome/Font-Awesome-Pro#686 FortAwesome/Font-Awesome-Pro#687 FortAwesome/Font-Awesome-Pro#692 * Animation support for inline SVG now works as expected FortAwesome/Font-Awesome-Pro#662 --- ## [5.0.0-beta6](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-beta6) - 2017-09-01 ### Added * Ability to flip horizontal and vertical with CSS classes fa-flip-horizontal and fa-flip-vertical * New film-alt icon that allows for layering other icons * Microsoft brand ### Changed * New YouTube branding FortAwesome/Font-Awesome-Pro#646 ### Fixed * Fixed a bunch of shim-related issues * Cogs off center FortAwesome/Font-Awesome-Pro#663 * Corrected icons/categories.yml with canonical names --- ## [5.0.0-beta5](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-beta5) - 2017-08-25 ### Added * Full parity with Font Awesome 4! 616 total core icons in each style * 297 total brand and logo icons * Separate CSS file to accompany the SVG Framework FortAwesome/Font-Awesome-Pro#627 * Alternative to the dots icon FortAwesome/Font-Awesome-Pro#608 * Made window icons consistent FortAwesome/Font-Awesome-Pro#611 ### Fixed * Production builds not correctly being detected FortAwesome/Font-Awesome-Pro#631 --- ## [5.0.0-beta4](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-beta4) - 2017-08-18 ### Added * 590 total core icons in each style * 291 total brand and logo icons ### Fixed * Reduced the size of JS file from 66 to 22 kb * Regression caused by with web font alignment FortAwesome/Font-Awesome-Pro#460 --- ## [5.0.0-beta3](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-beta3) - 2017-08-15 ### Added * 583 total core icons in each style ### Fixed * Documentation improvements and fixes FortAwesome/Font-Awesome-Pro#586 * Vertical alignment of TTF and OTF fonts FortAwesome/Font-Awesome-Pro#460 * The "fa_500px" icon should be named "fa500px" FortAwesome/Font-Awesome-Pro#578 --- ## [5.0.0-beta2](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-beta2) - 2017-08-11 ### Added * 570 total core icons in each style * 291 total brand and logo icons * NPM (ES6, CommonJS, AMD) packages for use with other JavaScript libraries and tools FortAwesome/Font-Awesome-Pro#574 * Added a guide to choosing which implementation is best for you FortAwesome/Font-Awesome-Pro#532 ### Changed * Showing a missing icon is now configurable FortAwesome/Font-Awesome-Pro#569 ### Fixed * Composition framework now works in browsers that do not support transform-origin FortAwesome/Font-Awesome-Pro#564 --- ## [5.0.0-beta1](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-beta1) - 2017-08-04 ### Added * 524 total core icons in each style * 289 total brand and logo icons * New composition framework FortAwesome/Font-Awesome-Pro#537 * Animated indicator if you use an icon that does not exist ### Changed * Basic linting for Sass and Less files * Add JavaScript guard block to prevent leaking errors * Add support for automatic accessibility to SVG Framework Layers ### Fixed * Regression where stacks and pulled and bordered were not working in SVG Framework * SVG sprite example had confusing inline styles FortAwesome/Font-Awesome-Pro#549 * Make getting started page more consistent between examples FortAwesome/Font-Awesome-Pro#544 * Added missing sizes fa-[6-10], xs, sm FortAwesome/Font-Awesome-Pro#546 * Title tag missing in SVG sprites FortAwesome/Font-Awesome-Pro#536 --- ## [5.0.0-alpha7](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-alpha7) - 2017-07-28 ### Added * 451 total core icons in each style * 281 total brand and logo icons * Less support is back! * OpenType (.otf) file formats for web fonts ### Changed * Changes the fa-spin animation to go from 0deg to 360deg to eliminate hitch FortAwesome/Font-Awesome-Pro#522 * Improved mutation handling FortAwesome/Font-Awesome-Pro#517 ### Fixed * fa-fw now works correctly with the SVG framework FortAwesome/Font-Awesome-Pro#530 * Removed execute bit on some icon files FortAwesome/Font-Awesome-Pro#520 --- ## [5.0.0-alpha6](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-alpha6) - 2017-07-21 ### Added * 410 total core icons in each style * 270 total brand and logo icons * All new Font Awesome 4 shim file * Beginnings of a public JS API FortAwesome/Font-Awesome-Pro#512 ### Changed * Added Firefox ESR and Chrome for Businesses to browser compatibility FortAwesome/Font-Awesome-Pro#506 ### Fixed * Ensure that SVG title attributes are unique * Fixed incorrect viewBox sizes FortAwesome/Font-Awesome-Pro#492 * Fix chart-area alignment in the solid style FortAwesome/Font-Awesome-Pro#508 * Add missing xmlns attributes in some SVGs FortAwesome/Font-Awesome-Pro#509 --- ## [5.0.0-alpha5](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-alpha5) - 2017-07-14 ### Added * 228 total brand and logo icons * New transform framework for sizing, moving, rotating, and flipping icons * New icon counters * New layers framework * New text overlays * Auto-comments with the original source icons alongside SVG replacements ### Changed * Autoprefixer to correctly add browser prefixes for supported browsers * Removed browser-specific CSS properties in Sass source files (now relies on autoprefixer) ### Fixed * The rotation on checkmark icons * Other icon feedback from previous weeks * Correct fixed width settings to 1.25em (based on the new 16px grid) * Icons displaying as block instead of inline-block in IE and older Safari --- ## [5.0.0-alpha4](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-alpha4) - 2017-07-07 ### Added * 93 brand icons --- ## [5.0.0-alpha3](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-alpha3) - 2017-06-30 ### Added * 95 additional icons; including file types, directional, and some existing and new brand icons ### Fixed * Wrong content type in generated CSS FortAwesome/Font-Awesome-Pro#458 * Removal of query string from static resources FortAwesome/Font-Awesome-Pro#458 * SVG font ID's are incorrect in webfont implementation FortAwesome/Font-Awesome-Pro#474 --- ## [5.0.0-alpha2](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-alpha2) - 2017-06-27 ### Added * How/When to upgrade from FA4 to FA5 FortAwesome/Font-Awesome-Pro#454 ### Fixed * Links to SVG files broken in the example files FortAwesome/Font-Awesome-Pro#456 * Misnamed icon names in examples FortAwesome/Font-Awesome-Pro#445 * Mangled HTML in the Getting Started example FortAwesome/Font-Awesome-Pro#442 * Bad grammar and typos FortAwesome/Font-Awesome-Pro#443 * fas-arrow-to-top is identical to fas-arrow-to-right FortAwesome/Font-Awesome-Pro#423 * Vertical alignment issues with webfont implementation FortAwesome/Font-Awesome-Pro#444 * Add browser compatibility tables to demo FortAwesome/Font-Awesome-Pro#435 * Remove MAC OS feces from builds FortAwesome/Font-Awesome-Pro#437 * TTF naming issues that prevent correct usage/installation FortAwesome/Font-Awesome-Pro#450 * Correct CSS for SVG framework stacking, was reversed from normal FortAwesome/Font-Awesome-Pro#452 --- ## [5.0.0-alpha1](https://github.com/FortAwesome/Font-Awesome-Pro/releases/tag/5.0.0-alpha1) - 2017-06-23 ### Added * 300+ more icons * Brands pack * New JavaScript based SVG Framework * New SVG Sprites based framework * Source SVGs * Documentation with a convenient build-in web server ### Changed * New directory structure

Upgrading Guide
# Upgrading Guide See the [CHANGELOG.md](/assets/bower_components/font-awesome/CHANGELOG/) for detailed information about what has changed between versions. This guide is useful to figure out what you need to do between breaking changes. As always, [submit issues](https://github.com/FortAwesome/Font-Awesome/issues/new) that you run into with this guide or with these upgrades to us. ## 5.0.x to 5.1.0 ### New packages available for browser-only integration **If you were previously using @fortawesome/fontawesome you need to switch to one of the new packages.** Our Free and Pro CDN provide access to JS, CSS, sprites, and separate SVG files. We've now made these files conveniently available through NPM. * [@fortawesome/fontawesome-free](https://www.npmjs.com/package/@fortawesome/fontawesome-free) * @fortawesome/fontawesome-pro (private package, requires Pro subscription) If you are familiar with the paths and options available with the CDN these packages should be familiar. Information about [Font Awesome Pro subscriptions](https://fontawesome.com/pro) can be found in your [Font Awesome awesome account](https://fontawesome.com/account/services). ### Renamed packages The following packages have been renamed as part of 5.1.0 of Font Awesome. _All packages are in the [@fortawesome NPM scope](https://www.npmjs.com/search?q=scope:fortawesome&page=1&ranking=optimal)_ | Old package(1) | New package | |---------------------------|------------------------| | fontawesome-free-webfonts | fontawesome-free | | fontawesome-pro-webfonts | fontawesome-pro | | fontawesome-free-solid | free-solid-svg-icons | | fontawesome-free-regular | free-regular-svg-icons | | fontawesome-free-brands | free-brands-svg-icons | | fontawesome-pro-solid | pro-solid-svg-icons | | fontawesome-pro-regular | pro-regular-svg-icons | | fontawesome-pro-light | pro-light-svg-icons | (1) Old packages have now been deprecated. They are still available but will only receive high priority patch release fixes. **You'll need to update your package.json file with the renamed packages and new versions.** ### No more default imports Recently we spent a good deal of time supporting TypeScript to enable us to create the Angular Font Awesome component. During that adventure we [were](https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html) [convinced](https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad) that we were going to remove default exports from all of our components, libraries, and packages. This is complete with the umbrella release of `5.1.0` of Font Awesome. What does that mean? ~~Old way:~~ ```javascript import fontawesome from '@fortawesome/fontawesome' import solid from '@fortawesome/fontawesome-free-solid' import faTwitter from '@fortawesome/fontawesome-free-brands/faTwitter' import FontAwesomeIcon from '@fortawesome/vue-fontawesome' library.add(solid, faTwitter) ``` New way: ```javascript import { library, dom } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { faTwitter } from '@fortawesome/free-brands-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(fas, faTwitter) // Kicks off the process of finding tags and replacing with

Mouse Wheel ChangeLog
# Mouse Wheel ChangeLog ## 3.1.13 * Update copyright notice and license to remove years * Create the correct compressed version * Remove the obsolete jQuery Plugin Registry file ## 3.1.12 * Fix possible 0 value for line height when in delta mode 1 ## 3.1.11 * Fix version number for package managers... ## 3.1.10 * Fix issue with calculating line height when using older versions of jQuery * Add offsetX/Y normalization with setting to turn it off * Cleans up data on teardown ## 3.1.9 * Fix bower.json file * Updated how the deltas are adjusted for older mousewheel based events that have deltas that are factors of 120. * Add $.event.special.mousewheel.settings.adjustOldDeltas (defaults to true) to turn off adjusting of old deltas that are factors of 120. You'd turn this off if you want to be as close to native scrolling as possible. ## 3.1.8 * Even better handling of older browsers that use a wheelDelta based on 120 * And fix version reported by `$.event.special.mousewheel` ## 3.1.7 * Better handle the `deltaMode` values 1 (lines) and 2 (pages) * Attempt to better handle older browsers that use a wheelDelta based on 120 ## 3.1.6 * Deprecating `delta`, `deltaX`, and `deltaY` event handler arguments * Update actual event object with normalized `deltaX `and `deltaY` values (`event.deltaX`, `event.deltaY`) * Add `deltaFactor` to the event object (`event.deltaFactor`) * Handle `> 0` but `< 1` deltas better * Do not fire the event if `deltaX` and `deltaY` are `0` * Better handle different devices that give different `lowestDelta` values * Add `$.event.special.mousewheel.version` * Some clean up ## 3.1.5 * Bad release because I did not update the new `$.event.special.mousewheel.version` ## 3.1.4 * Always set the `deltaY` * Add back in the `deltaX` and `deltaY` support for older Firefox versions ## 3.1.3 * Include `MozMousePixelScroll` in the to fix list to avoid inconsistent behavior in older Firefox ## 3.1.2 * Include grunt utilities for development purposes (jshint and uglify) * Include support for browserify * Some basic cleaning up ## 3.1.1 * Fix rounding issue with deltas less than zero ## 3.1.0 * Fix Firefox 17+ issues by using new wheel event * Normalize delta values * Adds horizontal support for IE 9+ by using new wheel event * Support AMD loaders ## 3.0.6 * Fix issue with delta being 0 in Firefox ## 3.0.5 * jQuery 1.7 compatibility ## 3.0.4 * Fix IE issue ## 3.0.3 * Added `deltaX` and `deltaY` for horizontal scrolling support (Thanks to Seamus Leahy) ## 3.0.2 * Fixed delta being opposite value in latest Opera * No longer fix `pageX`, `pageY` for older Mozilla browsers * Removed browser detection * Cleaned up the code ## 3.0.1 * Bad release... creating a new release due to plugins.jquery.com issue :( ## 3.0 * Uses new special events API in jQuery 1.2.2+ * You can now treat `mousewheel` as a normal event and use `.bind`, `.unbind` and `.trigger` * Using jQuery.data API for expandos ## 2.2 * Fixed `pageX`, `pageY`, `clientX` and `clientY` event properties for Mozilla based browsers ## 2.1.1 * Updated to work with jQuery 1.1.3 * Used one instead of bind to do unload event for clean up ## 2.1 * Fixed an issue with the unload handler ## 2.0 * Major reduction in code size and complexity (internals have change a whole lot) ## 1.0 * Fixed Opera issue * Fixed an issue with children elements that also have a mousewheel handler * Added ability to handle multiple handlers

2025-01-23T16:49:40+01:00 [024148c277d17c002d8f3693cffac5fc1141bbc7] Compilation error in c3-diagram.js: Missing initializer in destructuring declaration in useEffect dependency array

1. _layouts/home.html Purpose: Main layout orchestrator for the homepage Key Controls: Overall page structure and content flow Content wrapper positioning and width (75% of viewport) Spacing between sections (margin-top: -4rem) Important Parameters: html CopyInsert
Controls spacing between hero and content Centers content with auto margins Includes recent articles and blog summary sections 2. _includes/hero.html Purpose: Controls the hero section with video and stage picture Key Controls: Video container (left side) Stage picture container (right side) Introductory text overlay Important Parameters: css CopyInsert .video-container { width: 10%; margin-right: 0.5rem; min-height: 224px; margin-left: 0.1%; } .jumbotron-image-container { width: 90%; min-height: 320px; opacity: 0.7; } .jumbotron-content { width: min(30%, 400px); font-size: 0.95rem; background: rgba(255, 255, 255, 0.85); } 3. _includes/header.html Purpose: Navigation bar and banner Key Controls: Top navigation menu Site title Menu items and their spacing Mobile responsiveness Important Parameters: html CopyInsert
Fixed positioning at top Dark theme Responsive collapse for mobile Menu item spacing (margin-right: 10px) 4. _sass/devlopr.scss Purpose: Global styling and theme configuration Key Controls: Color schemes (light/dark modes) Typography Spacing Background colors Important Parameters: scss CopyInsert body { background: linear-gradient(to right, rgb(103, 2, 2), rgb(182, 0, 0)); padding-top: 5rem; // Space below banner font-size: 1.4rem; font-family: 'type-face', sans-serif; } 5. _includes/blog_newsletter.html Purpose: Newsletter subscription section Key Controls: Yellow newsletter box Subscription form Button styling Important Parameters: css CopyInsert .newsletter { background-color: #f8f9fa; padding: 2rem; border-radius: 8px; } 6. _includes/content.html Purpose: Displays recent blog posts Key Controls: Article cards layout Post previews Thumbnails and excerpts Important Parameters: html CopyInsert

7. _includes/blog_summary.html Purpose: Blog posts overview section Key Controls: Post listings Categories Post metadata Important Parameters: html CopyInsert
{% for post in site.posts limit:6 %} {% endfor %}
8. _sass/abde_blue_devlopr.scss Purpose: Custom theme overrides Key Controls: Custom color schemes Specific component styling Theme variations Important Parameters: scss CopyInsert :root { --custom-theme-color: #your-color; --custom-background: #your-bg-color; } 9. _includes/blog_post_article.html Purpose: Individual blog post layout Key Controls: Post content formatting Share buttons Author information Comments section Important Parameters: html CopyInsert

{{page.title}}

{{ content }}

Responsive Design Controls All files include media queries for different screen sizes: css CopyInsert /* Tablets */ @media (max-width: 992px) { /* Tablet-specific styles */ } /* Mobile */ @media (max-width: 768px) { /* Mobile-specific styles */ } This structure allows for: Clean separation of concerns Easy maintenance Flexible content positioning Responsive design across devices Theme customization Content organization

How to Create a Custom Newsletter Form with Google Forms Backend
# How to Create a Custom Newsletter Form with Google Forms Backend ## Overview This guide explains how to create a professional newsletter signup form using Google Forms as the backend, without showing the Google Forms interface. ## Step-by-Step Process ### 1. Google Form Setup 1. Create a Google Form with an email field 2. Get the form ID from the URL (after /e/) 3. Get the entry ID for the email field: - Inspect form source code - Look for `FB_PUBLIC_LOAD_DATA_` - Entry ID format: `entry.XXXXXXXX` ### 2. HTML Form Structure ```html

``` ### 3. JavaScript Handler ```javascript function handleSubmit(event) { const form = document.getElementById('subscribe-form'); const status = document.getElementById('form-status'); // Create hidden iframe for response let iframe = document.querySelector('iframe[name="hidden_iframe"]'); if (!iframe) { iframe = document.createElement('iframe'); iframe.name = 'hidden_iframe'; document.body.appendChild(iframe); } // Set form target to iframe form.target = 'hidden_iframe'; // Show success message status.textContent = 'Subscribing...'; setTimeout(() => { status.textContent = 'Thanks for subscribing!'; form.reset(); setTimeout(() => { status.textContent = ''; }, 3000); }, 1000); return true; } ``` ### 4. CSS Styling ```css /* Container styles */ .form-container { max-width: 500px; margin: 0 auto; } /* Input group */ .input-group { display: flex; gap: 10px; margin-bottom: 10px; } /* Email input */ #email-input { flex: 1; padding: 10px 15px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: white; } /* Submit button */ .submit-btn { padding: 10px 20px; background: #ffffff; border: none; border-radius: 4px; cursor: pointer; } /* Hide Google response */ iframe[name="hidden_iframe"] { display: none; } /* Mobile responsiveness */ @media (max-width: 768px) { .input-group { flex-direction: column; } .submit-btn { width: 100%; } } ``` ## Important Notes ### Common Gotchas - Wrong entry ID format (must include "entry." prefix) - Incorrect form action URL - Trying to use JavaScript fetch/AJAX (won't work due to CORS) - Not handling the response page properly ### Best Practices 1. Always use direct form submission 2. Include proper error handling 3. Show clear user feedback 4. Make the form responsive 5. Test on multiple devices 6. Verify submissions in Google Forms ### Testing Checklist - [ ] Submit test email - [ ] Check Google Form responses - [ ] Test on mobile devices - [ ] Verify success message - [ ] Check form reset - [ ] Test in different browsers ## Benefits - Professional appearance - No Google Forms branding - Reliable submission handling - Good user experience - Mobile-friendly - Free to use - Easy maintenance ## Maintenance 1. Regularly check Google Form responses 2. Monitor submission success rate 3. Update styling as needed 4. Test periodically on new browsers/devices

matchesSelector helper
# matchesSelector helper [`matches`/`matchesSelector`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) is pretty hot :fire:, but has [vendor-prefix baggage](http://caniuse.com/#feat=matchesselector) :handbag: :pouch:. This helper function takes care of that, without polyfilling or augmenting `Element.prototype`. ``` js matchesSelector( elem, selector ); // for example matchesSelector( myElem, 'div.my-hawt-selector' ); ``` ## Install Download [matches-selector.js](https://github.com/desandro/matches-selector/raw/master/matches-selector.js) Install with [Bower](http://bower.io): `bower install matches-selector` [Install with npm](https://www.npmjs.org/package/desandro-matches-selector): `npm install desandro-matches-selector` ## Browser support IE10+, all modern browsers Use [matchesSelector v1](https://github.com/desandro/matches-selector/releases/tag/v1.0.3) for IE8 and IE9 support. ## MIT license matchesSelector is released under the [MIT license](http://desandro.mit-license.org)

EvEmitter
# EvEmitter _Lil' event emitter_ — add a little pub/sub EvEmitter adds publish/subscribe pattern to a browser class. It's a smaller version of [Olical/EventEmitter](https://github.com/Olical/EventEmitter). That EventEmitter is full featured, widely used, and great. This EvEmitter has just the base event functionality to power the event API in libraries like [Isotope](http://isotope.metafizzy.co), [Flickity](http://flickity.metafizzy.co), [Masonry](http://masonry.desandro.com), and [imagesLoaded](http://imagesloaded.desandro.com). ## API ``` js // Inherit prototype, IE8+ MyClass.prototype = new EvEmitter(); // Inherit prototype, IE9+ MyClass.prototype = Object.create( EvEmitter.prototype ); // Mixin prototype _.extend( MyClass.prototype, EvEmitter.prototype ); // single instance var emitter = new EvEmitter(); ``` ### on Add an event listener. ``` js emitter.on( eventName, listener ) ``` + `eventName` - _String_ - name of the event + `listener` - _Function_ ### off Remove an event listener. ``` js emitter.off( eventName, listener ) ``` ### once Add an event listener to be triggered only once. ``` js emitter.once( eventName, listener ) ``` ### emitEvent Trigger an event. ``` js emitter.emitEvent( eventName, args ) ``` + `eventName` - _String_ - name of the event + `args` - _Array_ - arguments passed to listeners ### allOff Removes all event listeners. ``` js emitter.allOff() ``` ## Code example ``` js // create event emitter var emitter = new EventEmitter(); // listeners function hey( a, b, c ) { console.log( 'Hey', a, b, c ) } function ho( a, b, c ) { console.log( 'Ho', a, b, c ) } function letsGo( a, b, c ) { console.log( 'Lets go', a, b, c ) } // bind listeners emitter.on( 'rock', hey ) emitter.once( 'rock', ho ) // trigger letsGo once emitter.on( 'rock', letsGo ) // emit event emitter.emitEvent( 'rock', [ 1, 2, 3 ] ) // => 'Hey', 1, 2, 3 // => 'Ho', 1, 2, 3 // => 'Lets go', 1, 2, 3 // unbind emitter.off( 'rock', ho ) emitter.emitEvent( 'rock', [ 4, 5, 6 ] ) // => 'Hey' 4, 5, 6 ``` ## License EvEmitter is released under the [MIT License](http://desandro.mit-license.org/). Have at it.

Fizzy UI utils
# Fizzy UI utils UI utility & helper functions Used in [Flickity](http://flickity.metafizzy.co), [Isotope](http://isotope.metafizzy.co), [Masonry](http://masonry.desandro.com), [Draggabilly](http://draggabilly.desandro.com) ## Install Bower: `bower install fizzy-ui-utils --save` npm: `npm install fizzy-ui-utils --save` ## API ``` js // fizzyUIUtils is the browser global var utils = fizzyUIUtils; // ---- ---- // utils.extend( a, b ) // extend object utils.modulo( num, div ) // num [modulo] div utils.makeArray( obj ) // make array from object utils.removeFrom( ary, obj ) // remove object from array utils.getParent( elem, selector ) // get parent element of an element, given a selector string utils.getQueryElement( elem ) // if elem is a string, use it as a selector and return element Class.prototype.handleEvent = utils.handleEvent; // enable Class.onclick when element.addEventListener( 'click', this, false ) utils.filterFindElements( elems, selector ) // iterate through elems, filter and find all elements that match selector utils.debounceMethod( Class, methodName, threhold ) // debounce a class method utils.docReady( callback ) // trigger callback on document ready utils.toDashed( str ) // 'camelCaseString' -> 'camel-case-string' utils.htmlInit( Class, namespace ) // on document ready, initialize Class on every element // that matches js-namespace // pass in JSON options from element's data-options-namespace attribute ``` --- [MIT license](http://desandro.mit-license.org/). Have at it. By [Metafizzy](http://metafizzy.co)

> Version 5 – the iconic SVG, font, and CSS framework The internet's most popular icon toolkit has been redesigned and built from scratch. On top of this, features like icon font ligatures, an SVG framework, official NPM packages for popular frontend libraries like React, and access to a new CDN. Not familiar with Font Awesome 5? [Learn more](https://www.kickstarter.com/projects/232193852/font-awesome-5) about our successful Kickstarter and plan. You can also **[order Font Awesome Pro](https://fontawesome.com/pro)** which includes tons more icons directly from [fontawesome.com](https://fontawesome.com). ## Get started with 5! Learn how to [get started](https://fontawesome.com/get-started) with Font Awesome or dive deeper into [other topics](https://fontawesome.com/how-to-use). * [SVG with JS](https://fontawesome.com/how-to-use/svg-with-js) * [Web Fonts with CSS](https://fontawesome.com/how-to-use/web-fonts-with-css) * [Use on the Desktop](https://fontawesome.com/how-to-use/use-on-desktop) * [Use with Node.js](https://fontawesome.com/how-to-use/use-with-node-js) * [JS Component Packages](https://fontawesome.com/how-to-use/js-component-packages) * [SVG Sprites](https://fontawesome.com/how-to-use/svg-sprites) * [Upgrading from Version 4](https://fontawesome.com/how-to-use/upgrading-from-4) * [Server Side Rendering](https://fontawesome.com/how-to-use/server-side-rendering) * [Font Awesome API](https://fontawesome.com/how-to-use/font-awesome-api) * [Performance and Security](https://fontawesome.com/how-to-use/performance-and-security) * [Accessibility](https://fontawesome.com/how-to-use/accessibility) ### Where did Font Awesome 4 (or 3) go? Now that Font Awesome 5 has been released we are marking version 4 as end-of-life. We don't plan on releasing any further versions of the 4.x or 3.x. Documentation is still available but it's moved to [https://fontawesome.com/v4.7.0](https://fontawesome.com/v4.7.0) and [https://fontawesome.com/v3.2.1](https://fontawesome.com/v3.2.1). The Git repository for [v4.7.0](https://github.com/FortAwesome/Font-Awesome/releases/tag/v4.7.0) and [v3.2.1](https://github.com/FortAwesome/Font-Awesome/releases/tag/v3.2.1) can be found in our GitHub releases. ## Change log We'll keep track of each release in the [CHANGELOG.md](/assets/bower_components/font-awesome/CHANGELOG/) Looking for older versions of Font Awesome? Check the [releases](https://github.com/FortAwesome/Font-Awesome/releases). ## Upgrading From time-to-time we'll have special upgrading instructions from one version to the next. Check out the [UPGRADING.md](/assets/bower_components/font-awesome/UPGRADING/) guide when you upgrade your dependencies. ## Code of conduct We will behave ourselves if you behave yourselves. For more details see our [CODE_OF_CONDUCT.md](/assets/bower_components/font-awesome/CODE_OF_CONDUCT.md). ## Contributing Please read through our [contributing guidelines](/assets/bower_components/font-awesome/CONTRIBUTING.md). Included are directions for opening issues. ## Versioning Font Awesome will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: `..` For more information on SemVer, please visit http://semver.org. **The major version "5" is part of an umbrella release. It includes many different types of files and technologies. Therefore we deviate from normal SemVer in the following ways:** * Any release may update the design, look-and-feel, or branding of an existing icon * We will never intentionally release a `patch` version update that breaks backward compatibility * A `minor` release **may include backward-incompatible changes** but we will write clear upgrading instructions in UPGRADING.md * A `minor` or `patch` release will never remove icons * Bug fixes will be addressed as `patch` releases unless they include backward incompability then they will be `minor` releases ## License Font Awesome Free is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want. - Icons — CC BY 4.0 License - In the Font Awesome Free download, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types. - Fonts — SIL OFL 1.1 License - In the Font Awesome Free download, the SIL OLF license applies to all icons packaged as web and desktop font files. - Code — MIT License - In the Font Awesome Free download, the MIT license applies to all non-font and non-icon files. Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded Font Awesome Free files already contain embedded comments with sufficient attribution, so you shouldn't need to do anything additional when using these files normally. We've kept attribution comments terse, so we ask that you do not actively work to remove them from files, especially code. They're a great way for folks to learn about Font Awesome. ## Team * [Dave Gandy](https://github.com/davegandy) * [Travis Chase](https://github.com/supercodepoet) * [Rob Madole](https://github.com/robmadole) * [Brian Talbot](https://github.com/talbs) * [Jory Raphael](https://github.com/sensibleworld) * [Mike Wilkerson](https://github.com/mlwilkerson) * [Geremia Taglialatela](https://github.com/tagliala)

@fortawesome/fontawesome-common-types - SVG with JavaScript
# @fortawesome/fontawesome-common-types - SVG with JavaScript > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-common-types.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-common-types) ## What is this package? Font Awesome 5 JavaScript packages support TypeScript. This package abstracts out some of the common definitions that those packages use. ## Here be dragons If you are trying to import types from this package we *highly* recommend you do the following instead as *all types in this package are re-exported to the main fontawesome package*. your.ts ``` import { IconName } from `@fortawesome/fontawesome` const myIcon: IconName = "..." ``` ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/fontawesome-free-brands - SVG with JavaScript version
# @fortawesome/fontawesome-free-brands - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-free-brands.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-free-brands) ## Installation ``` $ npm i --save @fortawesome/fontawesome-free-brands ``` Or ``` $ yarn add @fortawesome/fontawesome-free-brands ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/fontawesome-free-regular - SVG with JavaScript version
# @fortawesome/fontawesome-free-regular - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-free-regular.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-free-regular) ## Installation ``` $ npm i --save @fortawesome/fontawesome-free-regular ``` Or ``` $ yarn add @fortawesome/fontawesome-free-regular ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/fontawesome-free-solid - SVG with JavaScript version
# @fortawesome/fontawesome-free-solid - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-free-solid.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-free-solid) ## Installation ``` $ npm i --save @fortawesome/fontawesome-free-solid ``` Or ``` $ yarn add @fortawesome/fontawesome-free-solid ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/fontawesome-free-webfonts - Web Fonts with CSS version
# @fortawesome/fontawesome-free-webfonts - Web Fonts with CSS version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-free-webfonts.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-free-webfonts) ## Installation ``` $ npm i --save @fortawesome/fontawesome-free-webfonts ``` Or ``` $ yarn add @fortawesome/fontawesome-free-webfonts ``` ## What is this package? This package includes CSS, Less, SCSS, and the individual web font files needed to get Font Awesome 5 Web Fonts with CSS working in your freeject. Inside `node_modules/@fortawesome/fontawesome-free-webfonts` you'll find the following directories: * `css` * `less` * `scss` * `webfonts` It's up to you to configure your build tool to use these. ## Documentation Get started [here](https://fontawesome.com/get-started/web-fonts-with-css). Continue your journey [here](https://fontawesome.com/how-to-use/web-fonts-with-css). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/fontawesome-free - The Official Font Awesome 5 NPM package
# @fortawesome/fontawesome-free - The Official Font Awesome 5 NPM package > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-free.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-free) ## Installation ``` $ npm i --save @fortawesome/fontawesome-free ``` Or ``` $ yarn add @fortawesome/fontawesome-free ``` ## What's included? **This package includes all the same files available through our Free and Pro CDN.** * /js - All JavaScript files associated with Font Awesome 5 SVG with JS * /css - All CSS using the classic Web Fonts with CSS implementation * /sprites - SVG icons packaged in a convenient sprite * /scss, /less - CSS Pre-processor files for Web Fonts with CSS * /webfonts - Accompanying files for Web Fonts with CSS * /svg - Individual icon files in SVG format ## Documentation Get started [here](https://fontawesome.com/get-started). Continue your journey [here](https://fontawesome.com/how-to-use). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/fontawesome-svg-core - SVG with JavaScript version
# @fortawesome/fontawesome-svg-core - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-svg-core.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core) ## Installation ``` $ npm i --save @fortawesome/fontawesome-svg-core ``` Or ``` $ yarn add @fortawesome/fontawesome-svg-core ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/fontawesome - SVG with JavaScript version
# @fortawesome/fontawesome - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome) ## Installation ``` $ npm i --save @fortawesome/fontawesome ``` Or ``` $ yarn add @fortawesome/fontawesome ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/free-brands-svg-icons - SVG with JavaScript version
# @fortawesome/free-brands-svg-icons - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/free-brands-svg-icons.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/free-brands-svg-icons) ## Installation ``` $ npm i --save @fortawesome/free-brands-svg-icons ``` Or ``` $ yarn add @fortawesome/free-brands-svg-icons ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/free-regular-svg-icons - SVG with JavaScript version
# @fortawesome/free-regular-svg-icons - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/free-regular-svg-icons.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/free-regular-svg-icons) ## Installation ``` $ npm i --save @fortawesome/free-regular-svg-icons ``` Or ``` $ yarn add @fortawesome/free-regular-svg-icons ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

@fortawesome/free-solid-svg-icons - SVG with JavaScript version
# @fortawesome/free-solid-svg-icons - SVG with JavaScript version > "I came here to chew bubblegum and install Font Awesome 5 - and I'm all out of bubblegum" [![npm](https://img.shields.io/npm/v/@fortawesome/free-solid-svg-icons.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons) ## Installation ``` $ npm i --save @fortawesome/free-solid-svg-icons ``` Or ``` $ yarn add @fortawesome/free-solid-svg-icons ``` ## Documentation Get started [here](https://fontawesome.com/get-started/svg-with-js). Continue your journey [here](https://fontawesome.com/how-to-use/svg-with-js). Or go straight to the [API documentation](https://fontawesome.com/how-to-use/font-awesome-api). ## Issues and support Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.

getSize
# getSize Get the size of elements. Used in [Masonry](https://masonry.desandro.com), [Isotope](https://isotope.metafizzy.co), & [Flickity](https://flickity.metafizzy.co). ``` js var size = getSize( elem ); // elem can be an element var size = getSize( document.querySelector('.selector') ) // elem can be a selector string var size = getSize('.selector') ``` Returns an object with: + width, height + innerWidth, innerHeight + outerWidth, outerHeight + paddingLeft, paddingTop, paddingRight, paddingBottom + marginLeft, marginTop, marginRight, marginBottom + borderLeftWidth, borderTopWidth, borderRightWidth, borderBottomWidth + isBorderBox Browser support: IE10+, Android 4.0+, iOS 5+, and modern browsers ## Install Install with npm: `npm install get-size` Install with [Bower](https://bower.io): `bower install get-size` ## Firefox hidden iframe bug [Firefox has an old bug](https://bugzilla.mozilla.org/show_bug.cgi?id=548397) that occurs within iframes that are hidden with `display: none`. To resolve this, you can use alternate CSS to hide the iframe off-screen, with out `display: none`. ``` css .hide-iframe { visibility: hidden; position: absolute; left: -999em; } ``` ## MIT License getSize is released under the [MIT License](https://desandro.mit-license.org/).

![Version](https://img.shields.io/badge/Version-0.6.0-blue.svg) ![MinGhostVersion](https://img.shields.io/badge/Min%20Ghost%20v.-%3E%3D%202.10-red.svg) # ghostHunter **Original developer:** [jamal@i11u.me](mailto:jamal@i11u.me) GhostHunter makes it easy to add search capability to any Ghost theme, using the [Ghost API](https://api.ghost.org/v1.14.0/docs) and the [lunr.js](https://lunrjs.com) search engine. Indexing and search are done client-side (in the browser). This has several advantages: * Searches are private to the user, and are not exposed to third parties. * Installation and maintenance of powerful-but-daunting standalone search engines (such as [Solr](http://lucene.apache.org/solr/) or [ElasticSearch](https://www.elastic.co/)) is not required. * Instant search ("search-as-you-type" or "typeahead") is simple to configure. ----------------- ## Contents * [ghostHunter](#ghosthunter) * [Contents](#contents) * [Upgrade notes](#upgrade-notes) * [Basic setup](#basic-setup) * [Advanced usage](#advanced-usage) * [Production installation](#production-installation) * [GhostHunter options](#ghosthunter-options) * [Multiple search fields](#multiple-search-fields) * [Clearing search results](#clearing-search-results) * [Indexing and caching: how it works](#indexing-and-caching-how-it-works) * [Development: rebuilding ghostHunter](#development-rebuilding-ghosthunter) * [Footnotes](#footnotes) ------------------ ## Upgrade notes ### GhostHunter v0.6.0 * Implements @JiapengLi "dirty fix" to support the new Ghost v2 Content API. * Removes spurious production console.log message. * Removes `includepages` option. To use this version of ghostHunter, you'll need to create a Custom Integration and inject its Content API key into your blog header. In your Ghost Settings: * Go to **Integrations** * Choose **Add custom integration**, name it `ghostHunter` and choose **Create**. Copy the generated Content API Key. * Go to **Code injection** * Add this to **Blog Header**: ```txt ``` ### GhostHunter v0.5.1 Breaking change: added a new parameter `includebodysearch`, default `false`. Leaving it `false` completely deactivates searching within post body. Change done for performance reasons for Ghost Pro members. ### GhostHunter v0.4.x → v0.5.0 The local ``lunr.js`` index used by ghostHunter is quick. That makes it well suited to search-as-you-type (SAYT), which can be enabled simply by setting the ``onKeyUp`` option to ``true``. Although fast and convenient, the rapid clearing-and-rewriting of search results in SAYT mode can be distracting to the user. From version 0.5.0, ghostHunter uses a [Levenshtein edit distance](https://en.wikipedia.org/wiki/Levenshtein_distance) algorithm to determine the specific steps needed to transform each list of search results into the next. This produces screen updates that are easy on the eye, and even pleasant to watch. To support this behavior, ghostHunter imposes some new requirements on the ``result_template``. If you use this option in your theme, you edit the template to satisfy the following requirements before upgrading: * The template *must* be wrapped in a single outer node (i.e. ```` or ``div``); * The outer node *must* have a unique ``id`` attribute. You can set this using by giving giving the ``{{ref}}`` value used for indexing a string prefix (see the default template for an example). * The outer node *must* be assigned a class ``gh-search-item``. That's it. With those changes, your theme should be ready for ghostHunter 0.5.0. ## Basic setup In your theme directory, navigate to the `assets` subdirectory, [1] and clone this repository there: [2] ```txt cd assets git clone https://github.com/jamalneufeld/ghostHunter.git --recursive ``` After cloning, the ghostHunter module will be located at `assets/ghostHunter/dist/jquery.ghosthunter.js`. [3] This is a human-readable "raw" copy of the module, and can be loaded directly in your theme templates for testing. (It will run just fine, but it contains a lot of whitespace and comments, and should be "minified" for production use [see below]). To test the module in your template, add the following line, after JQuery is loaded. Typically this will be near the bottom of a file `default.hbs`, in the top folder of the theme directory. ````html ```` You will need to add a search box to your pages. The specific `.hbs` template and location will vary depending on the style and on your design choices, but the HTML will need an `` field and a submit button inside a `
` element. A block like this should do the trick: ````html
```` You will also need to mark an area in your pages where the search results should show up: ````html
```` Wake up ghostHunter with a block of JQuery code. For testing, the sample below can be placed in the template that loads ghostHunter, immediately after the module is loaded: ````html ```` Do the necessaries to [load the theme into Ghost](https://themes.ghost.org/v1.17.0/docs/about), and see if it works. :sweat_smile: ## Advanced usage ### Production installation To reduce load times and network traffic, the JavaScript of a site is typically "minified," bundling all code into a single file with reduced whitespace and other optimizations. The ``jquery.ghosthunter.js`` module should be bundled in this way for the production version of your site. The most common tool for this purpose in Web development is either Grunt or Gulp. A full explanation of their use is beyond the scope of this guide, but here are some links for reference: * The [Gulp Project](https://gulpjs.com/) website. * The [Grunt Project](https://gruntjs.com/) website. GhostHunter is built using Grunt. Instructions on installing Grunt in order to tweak or extend the code of the ghostHunter module are given in a separate section below. ### GhostHunter options The behavior of ghostHunter can be controlled at two levels. For deep changes, [4] see the section [Development: rebuilding ghostHunter](#development-rebuilding-ghosthunter) below. For most purposes, ghostHunter offers a set of simple options can be set when the plugin is invoked: as an example, the last code sample in the previous section sets the `results` option. :arrow_right: **results** > Should be set to the JQuery ID of the DOM object into which search results should be inserted. This value is required. > > Default value is ``undefined``. :arrow_right: **onKeyUp** > When set ``true``, search results are returned after each keystroke, for instant search-as-you-type results. > > Default value is ``false`` :arrow_right: **result_template** > A simple Handlebars template used to render individual items in the search result. The templates > recognize variable substitution only; helpers and conditional insertion constructs are ignored, > and will be rendered verbatim. > > From ghostHunter v0.5.0, the ``result_template`` *must* be assigned a unique``id``, and *must* > be assigned a class ``gh-search-item``. Without these attributes, screen updates will not > work correctly. > > Default template is <a id='gh-{{ref}}' class='gh-search-item' href='{{link}}'><p><h2>{{title}}</h2><h4>{{prettyPubDate}}</h4></p></a> :arrow_right: **info_template** > A Handlebars template used to display the number of search items returned. > > Default template is <p>Number of posts found: {{amount}}</p> :arrow_right: **displaySearchInfo** > When set ``true``, the number of search items returned is shown immediately above the list of search hits. The notice is formatted using ``info_template``. > > Default value is ``true``. :arrow_right: **zeroResultsInfo** > When set ``true``, the number-of-search-items notice formatted using ``info_template`` is shown even when the number of items is zero. When set to false, the notice is suppressed when there are no search results. > > Default value is ``true``. :arrow_right: **subpath** > If Ghost is hosted in a subfolder of the site, set this string to the path leading to Ghost (for example, ``"/blog"``). The value is prepended to item slugs in search returns. > > Default value is an empty string. :arrow_right: **onPageLoad** > When set ``true``, posts are checked and indexed when a page is > loaded. Early versions of ghostHunter default behavior was to > initiate indexing when focus fell in the search field, to reduce the > time required for initial page loads. With caching and other > changes, this is no longer needed, and this option can safely be set > to ``true`` always. > > Default value is ``true``. :arrow_right: **before** > Use to optionally set a callback function that is executed immediately before the list of search results is displayed. The callback function takes no arguments. > > Example: ````javascript $("#search-field").ghostHunter({ results: "#results", before: function() { alert("results are about to be rendered"); } }); ```` > Default value is ``false``. :arrow_right: **onComplete** > Use to optionally set a callback function that is executed immediately after the list of search results is displayed. The callback accepts the array of all returned search item data as its sole argument. > A function like that shown in the following example could be used with search-as-you-type to hide and reveal a search area and the current page content, depending on whether the search box contains any text. ````javascript $("#search-field").ghostHunter({ results: "#results", onComplete: function(results) { if ($('.search-field').prop('value')) { $('.my-search-area').show(); $('.my-display-area').hide(); } else { $('.my-search-area').hide(); $('.my-display-area').show(); } } }); ```` > Default value is ``false``. :arrow_right: **item_preprocessor** > Use to optionally set a callback function that is executed immediately before items are indexed. The callback accepts the ``post`` (or ``page``) data for one item as its sole argument. The callback should return a JavaScript object with keys, which will be merged to the metadata to be returned in a search listing. > > Example: ````javascript item_preprocessor: function(item) { var ret = {}; var thisDate = new Date(item.updated_at); var aWeekAgo = new Date(thisDate.getTime() - 1000*60*60*24*7); if (thisDate > aWeekAgo) { ret.recent = true; } else { ret.recent = false; } return ret; } ```` > With the sample function above, ``result_template`` could be set to something like this: ````javascript result_template: '
{{#if recent}}NEW! {{/if}}{{title}}
' ```` > Default value is ``false``. :arrow_right: **indexing_start** > Use to optionally set a callback that is executed immediately before an indexing operation begins. > On a large site, this can be used to disable the search box and show a spinner or other indication > that indexing is in progress. (On small sites, the time required for indexing will be so small that > such flourishes would not be notice.) ````javascript indexing_start: function() { $('.search-field') .prop('disabled', true) .addClass('yellow-bg') .prop('placeholder', 'Indexing, please wait'); } ```` > Default value is ``false``. :arrow_right: **indexing_end** > Use to optionally set a callback that is executed after an indexing operation completes. > This is a companion to ``indexing_start`` above. ````javascript indexing_end: function() { $('.search-field') .prop('placeholder', 'Search …') .removeClass('yellow-bg') .prop('disabled', false); } ```` > Default value is ``false``. :arrow_right: **includebodysearch** > Use to allow searching within the full post body. > Default value is ``false``. ### Multiple search fields There should be only one ``ghostHunter`` object in a page; if there are two, both will attempt to instantiate at the same time, and bad things will happen. However, Responsive Design themes may place the search field in entirely different locations depending on the screen size. You can use a single ``ghostHunter`` object to serve multiple search fields with a coding pattern like the following: [5] 1. Include a single hidden search field in your templates. This will be the ``ghostHunter`` object. ```html ``` 2. Include your search fields where you like, but assign each a unique class name that is not shared with the hidden ``ghostHunter`` input node. ```html
Search for:
``` 3. In the JavaScript of your theme, instantiate ghostHunter on the hidden node: ```html $('.search-field').ghostHunter({ results: '#results', onKeyUp: true }): ``` 4. Register an event on the others that spoofs the steps needed to submit the query to ``ghostHunter``: ```html $('.search-field-mobile, .search-field-desktop').on('keyup', function(event) { $('.search-field').prop('value', event.target.value); $('.search-field').trigger('keyup'); }); ``` ### Clearing search results You can use the ghostHunter object to programmatically clear the results of your query. ghostHunter will return an object relating to your search field and you can use that object to clear results. ````js var searchField = $("#search-field").ghostHunter({ results: "#results", onKeyUp: true }); ```` Now that the object is available to your code you can call it any time to clear your results: ````js searchField.clear(); ```` ### Indexing and caching: how it works After the load of any page in which ghostHunter is included, GH builds a full-text index of all posts. Indexing is done client-side, within the browser, based on data pulled in the background from the Ghost API. To reduce network traffic and processing burden, index data is cached to the extent possible in the browser's ``localStorage`` object, according to the following rules: 1. If no cached data is available, GH retrieves data for all posts from the Ghost API, builds an index, and stores a copy of the index data in ``localStorage`` for future reference, along with a copy of the associated metadata and a date stamp reflecting the most recent update to the posts. 2. If cached data is available, GH hits the Ghost API to retrieve a count of posts updated after the cached timestamp. * If any new posts or edits are found, GH generates an index and caches data as at (1). * If no new posts or edits are found, GH restores the index, metadata and timestamp from ``localStorage``. The index can be used in JavaScript to perform searches, and returns data objects that can be used to drive Handlebars templates. ### Development: rebuilding ghostHunter The ``jquery.ghosthunter.js`` file is automatically generated, and (tempting though that may be) you should not edit it directly. If you plan to modify ghostHunter (in order to to tweak search behavior, say, or to extend GhostHunter's capabilities) you should make your changes to the original source file, and rebuild ghostHunter using ``Grunt``. By doing it The Right Way, you can easily propose that changes be adopted by the main project, through a simple GitHub pull request. To set things up for development work, start by entering the ``ghostHunter`` directory: ```bash prompt> cd ghostHunter ``` Install the Grunt command line tool globally (the command below is appropriate for Linux systems, your mileage may vary): ```bash prompt> sudo npm install -g grunt-cl ``` Install Grunt and the other node.js modules needed for the build: ```bash prompt> npm install ``` Try rebuilding ghostHunter: ```bash prompt> grunt ``` Once you are able to rebuild ghostHunter, you can edit the source file at ``src/ghosthunter.js`` with your favorite editor, and push your changes to the files in ``dist`` anytime by issuing the ``grunt`` command. ## Version 0.5.0 notes * Graceful Levenshtein updating of search list * Search queries as fuzzy match to each term, joined by AND ## Version 0.4.1 notes * Incude lunr as a submodule, update to lunr.js v2.1 * Set up Grunt to produce use-require and embedded versions of plugin from a single source file * Cache index, metadata, and timestamp in localStorage * Include tags list in search-list metadata * Add options: - ``subpath`` string for subfolder deployments - ``item_preprocessor`` callback - ``indexing_start`` callback - ``indexing_end`` callback * Edits to README ## Version 0.4.0 notes * Compatible with Ghost 1.0 * Uses the Ghost API. If you need the RSS version you can use [this](https://github.com/jamalneufeld/ghostHunter/commit/2e721620868d127e9e688145fabcf5f86249d11b) commit, or @lizhuoli1126's [fork](https://github.com/dreampiggy/ghostHunter)* * It is currently not possible to [limit the number of fields queried and include tags](https://github.com/TryGhost/Ghost/issues/5615) in a single Ghost API call. ---------- # Footnotes [1] The ghostHunter module, and any other JavaScript, CSS or icon code should always be placed under the `assets` directory. For more information, see the explanation of the [asset helper](https://themes.ghost.org/v1.17.0/docs/asset). [2] In this case, the cloned `git` repository can be updated by entering the `ghostHunter` directory and doing `git pull`. There are a couple of alternatives: * You can just download the ZIP archive and unpack it in `assets`. To update to a later version, download and unZIP again. * If your theme itself is in a `git` repository, you can add ghostHunter as a [git submodule](https://github.com/blog/2104-working-with-submodules) or a [git subtree](https://www.atlassian.com/blog/git/alternatives-to-git-submodule-git-subtree). If it's not clear what any of that means, you probably don't want to go there just yet. [3] There is another copy of the module in `dist` called `jquery.ghosthunter.use-require.js`. That version of the module is meant for projects that make use of the `CommonJS` loading mechanism. If you are not using `CommonJS`, you can ignore this version of the module. [4] Features requiring deeper control would include fuzzy searches by [Levenstein distance](https://en.wikipedia.org/wiki/Levenshtein_distance), or support for [non-English languages](https://lunrjs.com/guides/language_support.html) in `lunr.js`, for example. [5] The example given in the text assumes search-as-you-type mode. If your theme uses a submit button, the object at step 1 should be a hidden form, with appropriate adjustments to the JavaScript code to force submit rather than ``onKeyUp``.

imagesLoaded
# imagesLoaded
JavaScript is all like "You images done yet or what?"
[imagesloaded.desandro.com](http://imagesloaded.desandro.com) Detect when images have been loaded. ## Install ### Download + [imagesloaded.pkgd.min.js](https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js) minified + [imagesloaded.pkgd.js](https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js) un-minified ### CDN ``` html ``` ### Package managers Install via [npm](https://www.npmjs.com/package/imagesloaded): `npm install imagesloaded` Install via [Bower](http://bower.io): `bower install imagesloaded --save` ## jQuery You can use imagesLoaded as a jQuery Plugin. ``` js $('#container').imagesLoaded( function() { // images have loaded }); // options $('#container').imagesLoaded( { // options... }, function() { // images have loaded } ); ``` `.imagesLoaded()` returns a [jQuery Deferred object](http://api.jquery.com/category/deferred-object/). This allows you to use `.always()`, `.done()`, `.fail()` and `.progress()`. ``` js $('#container').imagesLoaded() .always( function( instance ) { console.log('all images loaded'); }) .done( function( instance ) { console.log('all images successfully loaded'); }) .fail( function() { console.log('all images loaded, at least one is broken'); }) .progress( function( instance, image ) { var result = image.isLoaded ? 'loaded' : 'broken'; console.log( 'image is ' + result + ' for ' + image.img.src ); }); ``` ## Vanilla JavaScript You can use imagesLoaded with vanilla JS. ``` js imagesLoaded( elem, callback ) // options imagesLoaded( elem, options, callback ) // you can use `new` if you like new imagesLoaded( elem, callback ) ``` + `elem` _Element, NodeList, Array, or Selector String_ + `options` _Object_ + `callback` _Function_ - function triggered after all images have been loaded Using a callback function is the same as binding it to the `always` event (see below). ``` js // element imagesLoaded( document.querySelector('#container'), function( instance ) { console.log('all images are loaded'); }); // selector string imagesLoaded( '#container', function() {...}); // multiple elements var posts = document.querySelectorAll('.post'); imagesLoaded( posts, function() {...}); ``` Bind events with vanilla JS with .on(), .off(), and .once() methods. ``` js var imgLoad = imagesLoaded( elem ); function onAlways( instance ) { console.log('all images are loaded'); } // bind with .on() imgLoad.on( 'always', onAlways ); // unbind with .off() imgLoad.off( 'always', onAlways ); ``` ## Background Detect when background images have loaded, in addition to ``s. Set `{ background: true }` to detect when the element's background image has loaded. ``` js // jQuery $('#container').imagesLoaded( { background: true }, function() { console.log('#container background image loaded'); }); // vanilla JS imagesLoaded( '#container', { background: true }, function() { console.log('#container background image loaded'); }); ``` [See jQuery demo](http://codepen.io/desandro/pen/pjVMPB) or [vanilla JS demo](http://codepen.io/desandro/pen/avKooW) on CodePen. Set to a selector string like `{ background: '.item' }` to detect when the background images of child elements have loaded. ``` js // jQuery $('#container').imagesLoaded( { background: '.item' }, function() { console.log('all .item background images loaded'); }); // vanilla JS imagesLoaded( '#container', { background: '.item' }, function() { console.log('all .item background images loaded'); }); ``` [See jQuery demo](http://codepen.io/desandro/pen/avKoZL) or [vanilla JS demo](http://codepen.io/desandro/pen/vNrBGz) on CodePen. ## Events ### always ``` js // jQuery $('#container').imagesLoaded().always( function( instance ) { console.log('ALWAYS - all images have been loaded'); }); // vanilla JS imgLoad.on( 'always', function( instance ) { console.log('ALWAYS - all images have been loaded'); }); ``` Triggered after all images have been either loaded or confirmed broken. + `instance` _imagesLoaded_ - the imagesLoaded instance ### done ``` js // jQuery $('#container').imagesLoaded().done( function( instance ) { console.log('DONE - all images have been successfully loaded'); }); // vanilla JS imgLoad.on( 'done', function( instance ) { console.log('DONE - all images have been successfully loaded'); }); ``` Triggered after all images have successfully loaded without any broken images. ### fail ``` js $('#container').imagesLoaded().fail( function( instance ) { console.log('FAIL - all images loaded, at least one is broken'); }); // vanilla JS imgLoad.on( 'fail', function( instance ) { console.log('FAIL - all images loaded, at least one is broken'); }); ``` Triggered after all images have been loaded with at least one broken image. ### progress ``` js imgLoad.on( 'progress', function( instance, image ) { var result = image.isLoaded ? 'loaded' : 'broken'; console.log( 'image is ' + result + ' for ' + image.img.src ); }); ``` Triggered after each image has been loaded. + `instance` _imagesLoaded_ - the imagesLoaded instance + `image` _LoadingImage_ - the LoadingImage instance of the loaded image ## Properties ### LoadingImage.img _Image_ - The `img` element ### LoadingImage.isLoaded _Boolean_ - `true` when the image has successfully loaded ### imagesLoaded.images Array of _LoadingImage_ instances for each image detected ``` js var imgLoad = imagesLoaded('#container'); imgLoad.on( 'always', function() { console.log( imgLoad.images.length + ' images loaded' ); // detect which image is broken for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) { var image = imgLoad.images[i]; var result = image.isLoaded ? 'loaded' : 'broken'; console.log( 'image is ' + result + ' for ' + image.img.src ); } }); ``` ## Browserify imagesLoaded works with [Browserify](http://browserify.org/). ``` bash npm install imagesloaded --save ``` ``` js var imagesLoaded = require('imagesloaded'); imagesLoaded( elem, function() {...} ); ``` Use `.makeJQueryPlugin` to make to use `.imagesLoaded()` jQuery plugin. ``` js var $ = require('jquery'); var imagesLoaded = require('imagesloaded'); // provide jQuery argument imagesLoaded.makeJQueryPlugin( $ ); // now use .imagesLoaded() jQuery plugin $('#container').imagesLoaded( function() {...}); ``` ## Webpack Install imagesLoaded with npm. ``` bash npm install imagesloaded ``` You can then `require('imagesloaded')`. ``` js // main.js var imagesLoaded = require('imagesloaded'); imagesLoaded( '#container', function() { // images have loaded }); ``` Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin. ``` js // main.js var imagesLoaded = require('imagesloaded'); var $ = require('jquery'); // provide jQuery argument imagesLoaded.makeJQueryPlugin( $ ); // now use .imagesLoaded() jQuery plugin $('#container').imagesLoaded( function() {...}); ``` Run webpack. ``` bash webpack main.js bundle.js ``` ## RequireJS imagesLoaded works with [RequireJS](http://requirejs.org). You can require [imagesloaded.pkgd.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.js). ``` js requirejs( [ 'path/to/imagesloaded.pkgd.js', ], function( imagesLoaded ) { imagesLoaded( '#container', function() { ... }); }); ``` Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin. ``` js requirejs( [ 'jquery', 'path/to/imagesloaded.pkgd.js', ], function( $, imagesLoaded ) { // provide jQuery argument imagesLoaded.makeJQueryPlugin( $ ); // now use .imagesLoaded() jQuery plugin $('#container').imagesLoaded( function() {...}); }); ``` You can manage dependencies with [Bower](http://bower.io). Set `baseUrl` to `bower_components` and set a path config for all your application code. ``` js requirejs.config({ baseUrl: 'bower_components/', paths: { // path to your app app: '../' } }); requirejs( [ 'imagesloaded/imagesloaded', 'app/my-component.js' ], function( imagesLoaded, myComp ) { imagesLoaded( '#container', function() { ... }); }); ``` ## Browser support + IE9+ + Android 2.3+ + iOS Safari 4+ + All other modern browsers Use [imagesLoaded v3](http://imagesloaded.desandro.com/v3/) for IE8 support. ## MIT License imagesLoaded is released under the [MIT License](http://desandro.mit-license.org/). Have at it.

Isotope
# Isotope _Filter & sort magical layouts_ See [isotope.metafizzy.co](https://isotope.metafizzy.co) for complete docs and demos. ## Install ### Download + [isotope.pkgd.js](https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js) un-minified, or + [isotope.pkgd.min.js](https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js) minified ### CDN Link directly to Isotope files on [unpkg](https://unpkg.com). ``` html ``` ### Package managers npm: `npm install isotope-layout --save` Bower: `bower install isotope-layout --save` ## License ### Commercial license If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an Isotope Commercial License at [isotope.metafizzy.co](https://isotope.metafizzy.co/#commercial-license) ### Open source license If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use Isotope under the terms of the GPLv3. [Read more about Isotope's license](https://isotope.metafizzy.co/license.html). ## Initialize With jQuery ``` js $('.grid').isotope({ // options... itemSelector: '.grid-item', masonry: { columnWidth: 200 } }); ``` With vanilla JavaScript ``` js // vanilla JS var grid = document.querySelector('.grid'); var iso = new Isotope( grid, { // options... itemSelector: '.grid-item', masonry: { columnWidth: 200 } }); ``` With HTML Add a `data-isotope` attribute to your element. Options can be set in JSON in the value. ``` html

...
``` * * * By [Metafizzy 🌈🐻](https://metafizzy.co), 2010–2018

jQuery Mouse Wheel Plugin
# jQuery Mouse Wheel Plugin A [jQuery](http://jquery.com/) plugin that adds cross-browser mouse wheel support with delta normalization. In order to use the plugin, simply bind the `mousewheel` event to an element. It also provides two helper methods called `mousewheel` and `unmousewheel` that act just like other event helper methods in jQuery. The event object is updated with the normalized `deltaX` and `deltaY` properties. In addition there is a new property on the event object called `deltaFactor`. Multiply the `deltaFactor` by `deltaX` or `deltaY` to get the scroll distance that the browser has reported. Here is an example of using both the bind and helper method syntax: ```js // using on $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); // using the event helper $('#my_elem').mousewheel(function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); ``` The old behavior of adding three arguments (`delta`, `deltaX`, and `deltaY`) to the event handler is now deprecated and will be removed in later releases. ## The Deltas... The combination of Browsers, Operating Systems, and Devices offer a huge range of possible delta values. In fact if the user uses a trackpad and then a physical mouse wheel the delta values can differ wildly. This plugin normalizes those values so you get a whole number starting at +-1 and going up in increments of +-1 according to the force or acceleration that is used. This number has the potential to be in the thousands depending on the device. Check out some of the data collected from users [here](http://mousewheeldatacollector.herokuapp.com/). ### Getting the scroll distance In some use-cases we prefer to have the normalized delta but in others we want to know how far the browser should scroll based on the users input. This can be done by multiplying the `deltaFactor` by the `deltaX` or `deltaY` event property to find the scroll distance the browser reported. The `deltaFactor` property was added to the event object in 3.1.5 so that the actual reported delta value can be extracted. This is a non-standard property. ## Using with [Browserify](http://browserify.org) Support for browserify is baked in. ```bash npm install jquery-mousewheel npm install jquery-browserify ``` In your server-side node.js code: ```js var express = require('express'); var app = express.createServer(); app.use(require('browserify')({ require : [ 'jquery-browserify', 'jquery-mousewheel' ] })); ``` In your browser-side javascript: ```js var $ = require('jquery-browserify'); require('jquery-mousewheel')($); ```

jQuery Easing Plugin
# jQuery Easing Plugin What is it? A jQuery plugin from GSGD to give advanced easing options. More info [here](http://gsgd.co.uk/sandbox/jquery/easing) For CDN please use CloudFlare [`https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js`](https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js) to help my host. Thank you. # AMD or CommonJS usage ```js // CommonJS var jQuery = require('jquery'); require('jquery.easing')(jQuery); // AMD define(['jquery', 'jquery.easing'], function (jQuery, easing) { easing(jQuery) }) ``` # Building and testing * Clone the repo * `npm install` * Make changes * Test against files in `/examples` * Build minified version with `npm run build`

jQuery
# jQuery > jQuery is a fast, small, and feature-rich JavaScript library. For information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/). For source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery). If upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog. ## Including jQuery Below are some of the most common ways to include jQuery. ### Browser #### Script tag ```html ``` #### Babel [Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively. ```js import $ from "jquery"; ``` #### Browserify/Webpack There are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this... ```js var $ = require("jquery"); ``` #### AMD (Asynchronous Module Definition) AMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html). ```js define(["jquery"], function($) { }); ``` ### Node To include jQuery in [Node](nodejs.org), first install with npm. ```sh npm install jquery ``` For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes. ```js require("jsdom").env("", function(err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); }); ```

Masonry
# Masonry _Cascading grid layout library_ Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. See [masonry.desandro.com](https://masonry.desandro.com) for complete docs and demos. ## Install ### Download + [masonry.pkgd.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js) un-minified, or + [masonry.pkgd.min.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js) minified ### CDN Link directly to Masonry files on [unpkg](https://unpkg.com/). ``` html ``` ### Package managers [npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save` Bower: `bower install masonry-layout --save` ## Support Masonry development Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by [purchasing a license for one of Metafizzy's commercial libraries](https://metafizzy.co). ## Initialize With jQuery ``` js $('.grid').masonry({ // options... itemSelector: '.grid-item', columnWidth: 200 }); ``` With vanilla JavaScript ``` js // vanilla JS // init with element var grid = document.querySelector('.grid'); var msnry = new Masonry( grid, { // options... itemSelector: '.grid-item', columnWidth: 200 }); // init with selector var msnry = new Masonry( '.grid', { // options... }); ``` With HTML Add a `data-masonry` attribute to your element. Options can be set in JSON in the value. ``` html

...
``` ## License Masonry is released under the [MIT license](http://desandro.mit-license.org). Have at it. * * * Made by David DeSandro

![nanobar](https://raw.githubusercontent.com/jacoborus/nanobar/master/brand/nanobar.png 'nanobar logo') ======================================================================================================= Very lightweight progress bars (~699 bytes gzipped). Compatibility: iE7+ and the rest of the world [![npm version](https://badge.fury.io/js/nanobar.svg)](https://www.npmjs.com/package/nanobar) [![Bower version](https://img.shields.io/bower/v/nanobar.svg?maxAge=2592000)](https://github.com/jacoborus/nanobar/releases) ## Demo See [nanobar.jacoborus.codes](http://nanobar.jacoborus.codes) ## Installation Download and extract the [latest release](https://github.com/jacoborus/nanobar/archive/master.zip) or install with package manager: [Bower](http://bower.io/): ``` $ bower install nanobar ``` [npm](https://www.npmjs.org/package/nanobar): ``` $ npm install nanobar ``` ## Usage ### Load Link `nanobar.js` from your html file ```html ``` or require it: ```js var Nanobar = require('path/to/nanobar'); ``` ### Generate progressbar ```js var nanobar = new Nanobar( options ); ``` **options** - `id` ``: (optional) id for **nanobar** div - `classname` ``: (optional) class for **nanobar** div - `target` ``: (optional) Where to put the progress bar, **nanobar** will be fixed to top of document if no `target` is passed ### Move bar Resize the bar with `nanobar.go(percentage)` **arguments** - `percentage` `` : percentage width of nanobar ## Example Create bar ```js var options = { classname: 'my-class', id: 'my-id', target: document.getElementById('myDivId') }; var nanobar = new Nanobar( options ); //move bar nanobar.go( 30 ); // size bar 30% nanobar.go( 76 ); // size bar 76% // size bar 100% and and finish nanobar.go(100); ``` ### Customize bars Nanobar injects a style tag in your HTML head. Bar divs has class `.bar`, and its containers `.nanobar`, so you can overwrite its values. Default css: ```css .nanobar { width: 100%; height: 4px; z-index: 9999; top:0 } .bar { width: 0; height: 100%; transition: height .3s; background:#000; } ``` You should know what to do with that ;)

--- © 2016 [jacoborus](https://github.com/jacoborus) - Released under [MIT License](https://raw.github.com/jacoborus/nanobar/master/LICENSE)

Outlayer
# Outlayer _Brains and guts of a layout library_ Outlayer is a base layout class for layout libraries like [Isotope](http://isotope.metafizzy.co), [Packery](http://packery.metafizzy.co), and [Masonry](http://masonry.desandro.com) Outlayer layouts work with a container element and children item elements. ``` html

...
``` ## Install Install with [Bower](http://bower.io): `bower install outlayer` [Install with npm](http://npmjs.org/package/outlayer): `npm install outlayer` ## Outlayer.create() Create a layout class with `Outlayer.create()` ``` js var Layout = Outlayer.create( namespace ); // for example var Masonry = Outlayer.create('masonry'); ``` + `namespace` _{String}_ should be camelCased + returns `LayoutClass` _{Function}_ Create a new layout class. `namespace` is used for jQuery plugin, and for declarative initialization. The `Layout` inherits from [`Outlayer.prototype`](docs/outlayer.md). ``` var elem = document.querySelector('.selector'); var msnry = new Masonry( elem, { // set options... columnWidth: 200 }); ``` ## Item Layouts work with Items, accessible as `Layout.Item`. See [Item API](docs/item.md). ## Declarative An Outlayer layout class can be initialized via HTML, by setting an attribute of `data-namespace` on the element. Options are set in JSON. For example: ``` html
...
``` The declarative attributes and class will be dashed. i.e. `Outlayer.create('myNiceLayout')` will use `data-my-nice-layout` as the attribute. ## .data() Get a layout instance from an element. ``` var myMasonry = Masonry.data( document.querySelector('.grid') ); ``` ## jQuery plugin The layout class also works as jQuery plugin. ``` js // create Masonry layout class, namespace will be the jQuery method var Masonry = Outlayer.create('masonry'); // rock some jQuery $( function() { // .masonry() to initialize var $grid = $('.grid').masonry({ // options... }); // methods are available by passing a string as first parameter $grid.masonry( 'reveal', elems ); }); ``` ## RequireJS To use Outlayer with [RequireJS](http://requirejs.org/), you'll need to set some config. Set [baseUrl](http://requirejs.org/docs/api.html#config-baseUrl) to bower_components and set a [path config](http://requirejs.org/docs/api.html#config-paths) for all your application code. ``` js requirejs.config({ baseUrl: 'bower_components', paths: { app: '../' } }); requirejs( [ 'outlayer/outlayer', 'app/my-component.js' ], function( Outlayer, myComp ) { new Outlayer( /*...*/ ) }); ``` Or set a path config for all Outlayer dependencies. ``` js requirejs.config({ paths: { 'ev-emitter': 'bower_components/ev-emitter', 'get-size': 'bower_components/get-size', 'matches-selector': 'bower_components/matches-selector' } }); ``` ## MIT license Outlayer is released under the [MIT license](http://desandro.mit-license.org).

CyberSec, Network, Cloud & ML/AI, blended!

TLS 1.3 ECH (draft-ietf-tls-esni-22) !

TLS 1.3 (RFC 8446) in motion!

IPSEC (IKEv2 RFC 7296) in motion!

OpenSource LLM? Really? (DeepSeek R1 example)

Open Source LLM? Really? (DeepSeek R1 Example)

Open Source vs. Non-Open Source LLMs: Clearing Up the Confusion

1. Traditional Open Source vs. “Open” LLMs

2. Why Having Just the Weights Isn’t Enough

3. The DeepSeek R1 Release and the “Open” Hype

4. Implications for the LLM Community

5. How to Build (and Share) LLMs More Transparently

6. Conclusion

Workshops for INWI & Orange telcos in Morocco

5G Security: Building a Safer Future

Deep Packet Inspection (DPI): Insights into Network Traffic

Quantum Computing and Cryptography: Preparing for the Next Era

Fortinet: A Trusted Partner in Security

Working Together for the Future

Global Big Data Digital Transformation, Nov 2024, Amsterdam

TLS/SSL Advancements: The Privacy vs. Security Dilemma

Introduction

TLS 1.2 vs. TLS 1.3 and Web Filtering

Web Filtering in TLS 1.2

TLS 1.2 Exchange and Interesting Fields

A Look Inside TLS 1.2 Packet Capture

TLS 1.3: A Major Step Forward

TLS 1.3 Exchange and Key Changes

ESNI, ECH, and DoH: Locking Down the Remaining Gaps

ESNI (Encrypted SNI)

DoH (DNS over HTTPS)

Encrypted Client Hello (ECH)

QUIC and HTTP/3

Raising Awareness and Looking Ahead

Annexe: Useful Info and Tools

Pcaps / Keys Used in This Document

How to Decrypt TLS

European Executive Forum, 26th Feb 2024, Amsterdam The Netherlands

Workshop France Novotel, Nov 5th-7th 2024

Session 1: Making Sense of Telco and QoS Challenges

Session 2: Real-World Experience with Fortinet Solutions

Workshop Mouratoglou Hotel & Resort, Oct 13th-15th 2023 , France

AI & CyberSec in Finance and Energy Sector, Amsterdam June 2023 , The Netherlands

The Math behind Quantum, in a nutchel

Quantum Computing Demystified: The Essential Math

1. Qubits: More Than 0 or 1

2. Entanglement: Qubits Acting Together

3. Quantum Gates: Transforming Qubits

4. Quantum Algorithms: Simple Insights

Why It Matters

Getting Started

YaBilal.nl : Combining PCB Design, MCU Coding, and AWS IoT

Introduction

The Tech Stack Behind YaBilal

How YaBilal Works

YaBilal Models

YaBilal-Standard

YaBilal-Plus

Why I Built It

Order & Further Details

Final Thoughts

BGP (RFC 4271) in motion!

BGP (Border Gateway Protocol) Interactive Animation

How to Use This Animation

Technical Details

Guides

Posts by Category : {{ page.title }}

Get Started

Jekyll

Posts by Category : {{ page.title }}

Guides

Posts by Category : {{ page.title }}

Our Sponsors

Styleguide

Hello in h1 !

Hello in h2 !

Hello in h3 !

Hello in h4 !

Hello in h5 !

Hello in h6 !