FrontnTweaks

Web Dev Blog

Sharing my experiences of building websites!

Clean A Hacked WP Website with Wordfence & FTP
Sept 7, 2020
Restoring a Hacked WP Site With Wordfence and FTP Watch as I clean a WordPress site containing malicious files. This website uses Wordfence Security, so I used the scanner feature to clean out some of these malicious files. To complete cleaning the server, I used ….Read More

Publii Part 5: Open Graph and Twitter Cards
August 27, 2020
We continue setting up our site settings, looking at Open Graph and Twitter Cards ….. Read More

How To Check Your Email Security
August 16, 2020
Has your email been Pwned? Ever wondered if your email has been comprised, breached, or sold? Here are four online tools ….. Read More

Publii Part 4: URLs and Sitemap
July 31, 2020
In Part 4, we contiune setting up Publii CMS as we take a deep dive into URLs and the Sitemap features …..Read More

Core Web Vitals and Tools
July 12, 2020
Google Core Web Vitals Back in May of 2020, I read a blog from “Google Webmaster Central Blog” about Google using a new set of metrics to rank websites sometime in 2021. See the article titled: “Evaluating page experience for a better web”, May 28, 2020 …..Read More

Tools That Help

Spectacle

A React.js based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

Rollup.js

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Free Useful OnLine Tools

Puppeteer

A Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

Blitz JS

The full-stack React Framework.

Vulcan JS

The full-stack React+GraphQL framework.

Lighthouse

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did.

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

Redwood JS

Bringing full-stack to the JAMstack

Flexbox Playground

the main container decreases and increases size to demonstrate the responsive design behavior of flexbox..

Epic Spinners

Css only. Easy to use. VueJS integration.

CSS Matic

The ultimate CSS tools for web designers

Complete CSS Cheat Sheet

A total of 29 pages, structured into different paragraphs: backgrounds, borders, fonts, texts, Column, Colours, Grid positioning and a lot more (including UI).

Polyfill.io

Polyfill.io makes it simpler to support differing browsers by attempting to recreate the missing features with polyfills.

 
 
 

Firebase

Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.

Sapper

Sapper is a framework for building extremely high-performance web apps.
Each page of your app is a Svelte component

Spring Boot

An open source Java-based framework used to create a micro Service.

Fauna db

The database built for serverless, featuring native GraphQL.

Framer Motion

An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile.

Laravel Vapor

Laravel Vapor is a serverless deployment platform for Laravel, powered by AWS.

CSS Transition Playground

Hovering over an item will cause the width, height and background-color of the item to change.

Stackbit Beta

Build Jamstack sites, fast……
Requires Github and Netlify account.

Frontity

Free framework to build super fast WordPress themes using React.

Airtable

Part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.

Coolors

Coolors is a fast and easy tool that let you generate beautiful color palettes or color combinations.

Beautiful Colored Gradients

A handpicked collection of beautiful color gradients for designers and developers.
uiGradients

Netlify

Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

GQLESS

A GraphQL client, for rapid iteration.
Instead of writing GraphQL queries, client write typescript code in their application, and queries are generated at runtime.

Hasura

GraphQL Engine is an opensource service that connects to your databases & microservices and auto-generates a production-ready GraphQL backend ….

Framer

Framer Web is not a successor of Framer X, but rather an alternative to a macOS-only desktop client. It will continue receiving the same features and support as the web version.

Keystone JS

A scalable, extensible and open-source platform to build NodeJS applications

Publii

New Static CMS with GUI to build an extremely
safe, fast and stylish HTML website.

Gradient Hunt

Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients

Web Tool Kit

Java Script Online Tester

Tailwind CSS

A utility-first CSS framework for
rapidly building custom designs

Repl.it

Online React compiler, Online React IDE, and online React REPL.

Transformicons

Animated symbols and buttons packaged for Sass and CSS. We also provide a builder that gives developers the ability to select their preferred Transformicons.

Font Flipper

Preview 800+ Google Fonts on top of your own designs, without having to download the fonts first.
Font Flipper

Bitcatcha

Enter your website’s URL and we’ll show you how fast (or slow) your web hosting is performing.

Gridsome

A Modern Site Generator for VUe.js

Koa JS

Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.

Strapi

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.

Modulz

The visual code editor
Design, develop, document and deploy your design system—without writing code.
We’re currently in private beta.
We’re primarily targeting teams.

Site Inspire

A CSS gallery and showcase of the best web design inspiration, featuring over 2500 websites searchable by type, subject, and style.

Animate CSS

A cross browser library of CSS animations.

ExtendsClass.com

OnLine Tools For Developers.

Ballon.css

lets you add tooltips to elements without JavaScript and in just a few lines of CSS.

StackBlitz

Code the Future. In Your Browser.Create, edit & deploy fullstack apps

ES6 Console

Welcome to the interactive ES6 online console. A full JS console that can run all versions of JS.

Figma

Design, prototype, and collaborate all in the browser—with Figma.

Real Favicon Generator

The ultimate favicon generator. Design your icons platform per platform and make …

Free Learning Tutorials Just For You

Learn Javascript

FreeCode Camp: complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.

Svelte Framework Tutorials

Svelte Master: 27 videos
Svelte applications generate code to manipulate the DOM, which may give better client run-time performance.

JavaScript 30

Wes Bos: Build 30 things in 30 days with 30 tutorials

CSS Grid

Wes Bos: Learn all about CSS Grid [4 hrs].

APIs for Beginners

Free Code Camp: Learn all about APIs [2 hr 20min].

GraphQL with Apollo, Meteor, and React

Scott Tolinski: teaching GraphQL with Apollo, Meteor & React to build a full-stack app.

Next.js Crash Course - Server Side React

TRAVERSY MEDIA: We will look at setup and build a simple application.

Gatsby js Bootcamp

Andrew Mead:The Great Gatsby Bootcamp [4hr 38min].

React JS

Freecode Camp: Upon completion of this course, you’ll know everything you need in order to build web applications in React.

Fixing Web Problems

Clean A Hacked WP Website With Wordfence & FTP

Watch as I clean a WordPress site with malicious files using Wordfence and FTP.

Fix A 500 Internal Server Error

Follow me as I record how I
Cleaned and Restored a HTTP 500 internal server error
Wordpress website.

Restore A Hacked WordPress Site2

Follow me as I record how I
Cleaned and Restored a hacked
Wordpress website.

Fix A Hacked WordPress Site

My workflow on removing malicious files from a hacked WordPress site….

Web Security

Tools that may help you find vulnerabilities in your code, server, or website.

How To Protect Your .htaccess File

Video tutorial on adding a script to your .htaccess file.

Submitted URL Not Found (404) How To Fix It

My workflow on resolving this Google alert.

How To Force Server To Use SSL

How I determined the problem was the server was not forcing SSL.
Step by step process I used.

How To Protect Your wpconfig.php File

Video tutorial on adding a script to your .htaccess file,
to protect you wp.config file

Fix A WordPress SSL Error

My work flow to fix a Mix Content error.

Testing

Test loading speed, browser compatibility, mobile responsive tests, and more..

How To Free Lance

You want to be a freelance designer or developer, here are the things you need to know. Things that you will never learn at a Coding Boot Camp, Coding School, or College.
This manual is an ongoing project not completed yet.

New chapters to be added each month

Need A Website?

IslandWebTek
Builds clean, responsive, fast loading websites.
Also repair & fix hacked sites.

Contact Frontntweaks

  • Questions?
  • New Product Reviews
  • Say Hi!

“Websites promote you 24/7: No employee will do that.”[Paul Cookson]

Share This