STYLE SWITCHER

Developer

Preact – Alternative to React with the Same Modern API

Preact – Alternative to React with the Same Modern API

Preact is a fast and 3kB React alternative with the same modern API, components & virtual DOM.

Preact supports modern browsers (Chrome, Firefox, Safari, Edge) and IE9+. It should work fine in IE7 and IE8, but requires some polyfills.

Preact Features:

  • Familiar React API & patterns: ES6 Class, hooks, and Functional Components
  • Extensive React compatibility via a simple preact/compat alias
  • Everything you need: JSX, VDOM, DevTools, HMR, SSR.
  • Highly optimized diff algorithm and seamless hydration from Server Side Rendering
  • Supports all modern browsers and IE11+
  • Transparent asynchronous rendering with a pluggable scheduler
  • Instant production-grade app setup with Preact CLI
Website
More
Algolia – Make every search

Algolia – Make every search

Your users almost certainly use at least one of YouTube, Amazon, and Facebook. An essential feature that these big websites share is great search. However, the reason they have great search is because they have hundreds (if not thousands) of people working on it full-time.

What Is Algolia?

Because your users are constantly exposed to great search on these platforms, they expect to find it on every site and application that they use. But your company is not a search company: it doesn’t make sense for you to hire hundreds of developers to reinvent search.

This is where Algolia comes in: we provide software and tools to help you implement efficient, flexible, and insightful search on your sites and applications.

What does Algolia do?

Algolia broadly consists of two parts: search implementation and search analytics. We provide tools that make it easy for your developers to create and maintain great search experiences for your users; and tools for your business teams to analyze the impact of those experiences and refine them, so they can directly address your rapidly evolving business objectives.

Search as a feedback loop

Search has the potential to not only help your business, but also shape it.

To be clear, search doesn’t know the direction that your business should take. However, it can help you gather information on what your customers want, so you can better align your business with your users.

Imagine having a way of asking every single customer who walked into a physical store with all your products, “what are you looking for?” and recording their responses. Rapidly, this would give you a sense of what they’re actually looking for, what they’re not, and how both of these overlap with what you are currently providing.

Algolia lets you immediately start collecting this information on your users.

Website
More
Pika – Universal JavaScript is here

Pika – Universal JavaScript is here

Pika is a new kind of package registry for the modern web. 100% ESM. Write once, run natively on every platform.

A new take on package management.

Pika handles formatting, configuring, building and publishing every package on the registry, so that individual authors don't have to.

A registry that understands your source code is able to perfectly-configure your package for you. Pika builds your package to run everywhere, and you spend less time messing with boilerplate tooling. Win win!

Universal JavaScript needs a universal editor.

For this new ecosystem to work, we needed a consistent, universal dev experience for every package on the registry. A universal package editor guarantees your package can't import or do anything Node.js specific that would require a bundler/tooling to use in the browser.

So we created Pika Code. Pika Code is a package code editor that gives you a hosted, easy-to-use, zero-config dev experience for every package on the registry. It takes care of all of your tooling for you, and connects directly with the registry for easy publishing.

Pika? NPM? Why not both.

Every Pika package is automatically published to npm. Your users can install your latest releases from npm, or import them directly from our global registry CDN.

Our CDN lets you build powerful web apps without a bundler. Just load your dependencies directly in the browser using ESM JavaScript imports. Because everything on the registry supports ESM, there are no legacy dependencies to worry about. Our packages even run on Deno.

A more secure registry.

No matter how well you secure your own codebase, external dependencies pose a security threat to everyone.

Pika protects the safety of the entire ecosystem by controlling the publish step. Pika publishes each package directly from source, so malicious or hacked authors can't skip code review or sneak malicious code unnoticed into the registry.

Website
More
Web based Competition Organizer for Talent shows

Web based Competition Organizer for Talent shows

The eTalenter app is a web based application developed to allow organizations to hold competitions for cultural or team events.

eTalenter features a host of options that allow the organizers to create a login and manage events. The application enables the organizer to add as many events as required and keep the participants of each event within seperate groups based on criterias such as age. This feature has enabled many organizations such as schools, churches, and companies to successfully manage their cultural events. The application has been developed by Mr.Justin Jose. The application has received widespread recognition from the mainstream media and on several social media platforms.

Open the application
More
Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.
Features:
  • Zdog is small. 2,100 lines of code for the entire library. 28KB minified.
  • Zdog is round. All circular shapes are rendered as proper circles with rounded edges. No polygonal jaggies.
  • Zdog is friendly. Modeling is done with a straight-forward declarative API.

Zdog was designed to bring the simplicity of vector illustration into 3D. Drawing circles and squares is easy and fun. Zdog just adds another dimension.

Download

Link directly to Zdog JS on unpkg.

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
Website
More
Stripe | A complete payments platform‎

Stripe | A complete payments platform‎

Stripe is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.

THE COMPLETE TOOLKIT FOR INTERNET BUSINESS

Stripe builds the most powerful and flexible tools for internet commerce. Whether you’re creating a subscription service, an on-demand marketplace, an e-commerce store, or a crowdfunding platform, Stripe’s meticulously designed APIs and unmatched functionality help you create the best possible product for your users. Millions of the world’s most innovative technology companies are scaling faster and more efficiently by building their businesses on Stripe.

DEVELOPERS FIRST

We believe that payments is a problem rooted in code, not finance. We obsessively seek out elegant, composable abstractions that enable robust, scalable, flexible integrations. Because we eliminate needless complexity and extraneous details, you can get up and running with Stripe in just a couple of minutes.

ALWAYS IMPROVING

Stripe is an always-improving toolchain that gains new features every month. Our world-class engineering team constantly iterates upon every facet of the Stripe stack. And from Apple Pay to Alipay, building on Stripe means you get early access to the latest technologies.

GLOBAL SCALE

We help power millions of businesses in 100+ countries and across nearly every industry. Headquartered in San Francisco, Stripe has 9 global offices and hundreds of people working to help transform how modern businesses are built and run.

Website
More
Artplayer.js – Modern HTML5 Video Player

Artplayer.js – Modern HTML5 Video Player

Artplayer.js is a modern and full featured HTML5 video player.
Features
  • Support vtt and srt subtitles
  • Support video quality switching
  • Support for custom control, layer, contextmenu, setting
  • Support playback rate, aspect ratio, flip, window fullscreen or web fullscreen adjustment
  • Support integration with other dependencies, like: flv.js, hls.js, dash.js, shaka-player, webtorrent
  • Support chrome native picture-in-picture mode, or custom picture-in-picture mode
  • Support thumbnails and highlight in the progress bar
  • Support to maintain the original video ratio, adaptive size
  • Support rich custom event monitoring, easy to expand
  • Support for internationalization of controls
  • Support for custom plugins
  • Support local video preview
  • Support subtitle time offset
  • Support screenshot
var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
    container: '.artplayer-app',
    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
    title: '【新海诚动画】『秒速5センチメートル』',
    poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
    volume: 0.5,
    isLive: false,
    muted: false,
    autoplay: false,
    pip: true,
    autoSize: true,
    screenshot: true,
    setting: true,
    loop: true,
    flip: true,
    playbackRate: true,
    aspectRatio: true,
    fullscreen: true,
    fullscreenWeb: true,
    mutex: true,
    theme: '#ffad00',
    lang: 'zh-cn',
    moreVideoAttr: {
        crossOrigin: 'anonymous',
    },
    contextmenu: [
        {
            html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ',
            click: function() {
                console.info('自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ');
                this.hide();
            },
        },
    ],
    layers: [
        {
            html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
            click: function() {
                art.destroy(true);
                art = new Artplayer({
                    autoplay: true,
                    container: '.artplayer-app',
                    url: url + '/video/you-name.mp4',
                });
            },
            style: {
                position: 'absolute',
                top: '20px',
                right: '20px',
                opacity: '.9',
            },
        },
    ],
    quality: [
        {
            default: true,
            name: '标清 480P',
            url: url + '/video/one-more-time-one-more-chance-480p.mp4',
        },
        {
            name: '高清 720P',
            url: url + '/video/one-more-time-one-more-chance-720p.mp4',
        },
    ],
    thumbnails: {
        url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
        width: 190,
        height: 107,
    },
    subtitle: {
        url: url + '/subtitle/one-more-time-one-more-chance.srt',
        style: {
            color: '#03A9F4',
        },
    },
    highlight: [
        {
            time: 60,
            text: 'One more chance',
        },
        {
            time: 120,
            text: '谁でもいいはずなのに',
        },
        {
            time: 180,
            text: '夏の想い出がまわる',
        },
        {
            time: 240,
            text: 'こんなとこにあるはずもないのに',
        },
        {
            time: 300,
            text: '终わり',
        },
    ],
    controls: [
        {
            name: 'preview',
            position: 'right',
            html: '打开',
            mounted: $preview => {
                art.plugins.localPreview.attach($preview);
            },
        },
    ],
    icons: {
        loading: '<img src="./assets/img/ploading.gif">',
        state: '<img src="./assets/img/state.png">',
    },
});
Website
More
Google Places Autocomplete Fill Input Example Without Showing Map

Google Places Autocomplete Fill Input Example Without Showing Map

<input type="text" class="form-control" id="autocomplete_search">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_API_KEY_HERE&amp;libraries=places"></script>

<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete_search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
// place variable will have all the information you are looking for.
$('#lat').val(place.geometry['location'].lat());
$('#long').val(place.geometry['location'].lng());
});
}
</script>

Website
More
Hugo – The world’s fastest framework for building websites

Hugo – The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugo's Go-based templating provides just the right amount of logic to build anything from the simple to complex. If you prefer Jade/Pug-like syntax, you can also use Amber, Ace, or any combination of the three.

Website
More
Rallax.js – Dead-Simple Parallax Scrolling Plugin

Rallax.js – Dead-Simple Parallax Scrolling Plugin

Rallax.js is a Vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.

Explore a variety of options, including:

  • Changing parallax speed
  • Conditionally disabling and enabling the effect
  • Compensating for mobile devices
 // example code for 'dead' block         
const dead = rallax('.dead')
dead.when(
() => window.scrollY > 750,
() => dead.stop()
).when(
() => window.scrollY < 750,
() => dead.start()
Website
More