Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Lazysizes
lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more.
aFarkas
/
lazysizes
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
lazysizes
lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture
/srcset
), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.
It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes
attribute for your responsive images, it allows you to share media queries for your media
attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.
How to
-
Download the lazysizes.min.js script and include lazysizes in your webpage. (Or install via npm:
npm install lazysizes --save
or bowerbower install lazysizes --save
)<script src="lazysizes.min.js" async=""></
…
2. Slate
Slate helps you create beautiful, intelligent, responsive API documentation.
Slate helps you create beautiful, intelligent, responsive API documentation.
The example above was created with Slate. Check it out at slatedocs.github.io/slate.
Features
-
Clean, intuitive design — With Slate, the description of your API is on the left side of your documentation, and all the code examples are on the right side. Inspired by Stripe's and PayPal's API docs. Slate is responsive, so it looks great on tablets, phones, and even in print.
-
Everything on a single page — Gone are the days when your users had to search through a million pages to find what they wanted. Slate puts the entire documentation on a single page. We haven't sacrificed linkability, though. As you scroll, your browser's hash will update to the nearest header, so linking to a particular point in the documentation is still natural and easy.
-
Slate is just Markdown — When you write docs with Slate, you're…
3. Simplefolio
A minimal portfolio template for Developers!
cobidev
/
simplefolio
⚡️ A minimal portfolio template for Developers
Simplefolio ⚡️
A minimal portfolio template for Developers!
IMPORTANT NOTE: New fastest version came out, built with React + Gatsby!
Features
To view a demo example, click here
To view a live example, click here
Getting Started 🚀
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Prerequisites 📋
You'll need Git and Node.js (which comes with NPM) installed on your computer.
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
Also, you can use Yarn instead of NPM…
4. Skeleton
Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
Skeleton
Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
Check out http://getskeleton.com for documentation and details.
Getting started
There are a couple ways to download Skeleton:
- Download the zip
- Clone the repo:
git clone https://github.com/dhg/Skeleton.git
(Note: this is under active development, so if you're looking for stable and safe, use the zipped download)
What's in the download?
The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point.
Skeleton/
├── index.html
├── css/
│ ├── normalize.min.css
│ └── skeleton.css
└── images/
└── favicon.ico
Why it's awesome
Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more.
- Around 400 lines of CSS unminified and with comments
- It's a starting point, not a UI framework
- No compiling or installing...just vanilla CSS
Browser support
- Chrome latest
- Firefox latest
- Opera…
5. Dev Icon
Devicon aims to gather all logos representing development languages and tools. Each icon comes in several versions: font/svg, original/plain/line, colored/not colored, wordmark/no wordmark.
Devicon it's 78 icons and 200+ versions. And it's growing!
Devicon v2
https://devicons.github.io/devicon/
Devicon aims to gather all logos representing development languages and tools Each icon comes in several versions: font/svg, original/plain/line, colored/not colored, wordmark/no wordmark.
Devicon it's 78 icons and 200+ versions. And it's growing!
See all available icons on the new website.
Icon requests
When you want to request a icon please feel feel to create a issue. See our contribution guidelines for more information.
How to use
For a super fast setup go check https://devicons.github.io/devicon/
2 ways of using devicon:
SVG icons
- Copy/paste svg code (from the svg folder or the project page using your dev tool)
<!-- for git plain version -->
<svg class="devicon-git-plain" viewBox="0 0 128 128">
<path fill="#F34F29" d="M124.742,58.378L69.625,3.264c-3.172-3.174-8.32-3.174-11.497,0L46.685,14.71l14.518,14.518c3.375-1.139,7.243-0.375,9.932,2.314c2.703,2.706,3.462,6.607,2.293,9.993L87.42,55.529c3.385-1.167,7.292-0.413,9.994,2.295c3.78,3.777,3.78,9.9,0,13.679c-3.78,3.78-9.901,3.78-13.683,0c-2.842-2.844-3.545-7.019-2.105-10.521L68.578,47.933l-0.002,34.341c0.922,0.455,1.791,1.063,2.559,1.828c3.779,3.777,3.779,9.898,0,13.683c-3.779,3.777-9.904,3.777-13.679,0c-3.778-3.784-4.088-9.905-0.311-13.683C58.079,83.169,59,82.464,60,81.992V47.333c-1-0.472-1.92-1.172-2.856-2.111c-2.861-2.86-3.396-7.06-1.928-10.576L40.983,20.333L3.229,58.123c-3.175,3.177-3.155,8.325,0.02,11.5l55.126,55.114c3.173,3.174,8.325,3.174,11.503,0l54.86-54.858C127.913,66.703,127.916,61.552,124.742,58.378z"/>
</svg>
- Add css rules in your stylesheet
.devicon-git-plain {
max-width: 2em
}
/*
…6. minireset.css
A tiny modern CSS reset that covers the basics.
jgthms
/
minireset.css
A tiny modern CSS reset
minireset.css
A tiny modern CSS reset that covers the basics:
- resets the font sizes: so that using semantic markup doesn't affect the styling
- resets the block margins: so that the spacing is only applied when you need it
- resets tables: so that tabular data only takes the space it needs
- preserves the inline paddings: so that buttons and inputs keep their default layout
- sets the border-box box sizing: so that borders and paddings don't affect the set dimensions
- sets responsive media elements: so that images and embeds scale with the browser width
Download/Install
npm install minireset.css
Or clone the repo.
CDN
GitHub CDN for minireset.min.css
Copyright and license
Code copyright 2019 Jeremy Thomas. Code released under the MIT license.
7. next-i18next
The easiest way to translate your NextJs apps.
isaachinman
/
next-i18next
The easiest way to translate your NextJs apps.
next-i18next
The easiest way to translate your NextJs apps.
If you are using next-i18next in production, please consider sponsoring the package with any amount you think appropriate.
What is this?
next-i18next
is a plugin for Next.js projects that allows you to get translations up and running quickly and easily, while fully supporting SSR, multiple namespaces with codesplitting, etc.
While next-i18next
uses i18next and react-i18next under the hood, users of next-i18next
simply need to include their translation content as JSON files and don't have to worry about much else.
A live demo is available here. This demo app is the simple example - nothing more, nothing less.
Setup
1. Installation
yarn add next-i18next
You need to also have react
and next
installed.
2. Translation content
By default, next-i18next
expects your translations to be organised as such:
└── public
└── static
└── locales
├── en
| └── common.json
…8. Recharts
Recharts is a Redefined chart library built with React and D3.
Recharts
Introduction
Recharts is a Redefined chart library built with React and D3.
The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
- Simply deploy with React components.
- Native SVG support, lightweight depending only on some D3 submodules.
- Declarative components, components of charts are purely presentational.
Examples
<LineChart
width={400}
height={400}
data={data}
margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
<Line type="monotone"
…9. Monaco Editor
The Monaco Editor is the code editor which powers VS Code, with the features better described here.
Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module.
microsoft
/
monaco-editor
A browser based code editor
Monaco Editor
The Monaco Editor is the code editor which powers VS Code, with the features better described here.
Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor
npm module.
Try it out
Try the editor out on our website.
Installing
$ npm install monaco-editor
You will get:
- inside
esm
: ESM version of the editor (compatible with e.g. webpack) - inside
dev
: AMD bundled, not minified - inside
min
: AMD bundled, and minified - inside
min-maps
: source maps formin
-
monaco.d.ts
: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).
It is recommended to develop against the dev
version, and in production to use the min
version.
Documentation
- Learn how to integrate the…
10. Redwood
Redwood is an opinionated, full-stack, serverless web application framework that will allow you to build and deploy JAMstack applications with ease.
Redwood
by Tom Preston-Werner, Peter Pistorius, and Rob Cameron.
Redwood is an opinionated, full-stack, serverless web application framework
that will allow you to build and deploy JAMstack applications with ease.
Imagine a React frontend, statically delivered by CDN, that talks via GraphQL to
your backend running on AWS Lambdas around the world, all deployable with just a
git push
—that's Redwood. By making a lot of decisions for you, Redwood lets
you get to work on what makes your application special, instead of wasting
cycles choosing and re-choosing various technologies and configurations. Plus
because Redwood is a proper framework, you benefit from continued performance
and feature upgrades over time and with minimum effort.
WARNING: RedwoodJS software has not reached a stable version 1.0 and should not be considered suitable for production use. In the "make it work; make it right; make it fast" paradigm, Redwood is in the later stages…
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Discussion
Thanks Iain;
Powerful tools for sure. SimpleFolio, is just HTML and CSS, now that's awesome!
Great work I'm sriram fullstack javascript developer I have a whatsapp group dedicated to coders so that you can chat and collaborate on fun hobby projects with real people if you are interested please ping me at +918970787208
Monaco possibly will free us from old ways of writing code. Keep going with more!
Yes, this is powerful. The piece of content is very resourceful. Thanks @iainfreestone