David Loffer

David Loffer

1584763432

9 Preact Libraries and Tools You Should Know in 2020

What is Preact

Preact is a JavaScript library that describes itself as a fast 3kB alternative to React with the same ES6 API. As a frequent user of React, I’d always wanted to try out Preact and see what it offers, and the differences between Preact and React.

It was developed by Jason Miller to provide a feature set similar to React in a smaller package. Preact has the fastest virtual DOM libraries and diff implementation. Some of its salient features are:

  1. Increased performance
  2. Decreased size
  3. Efficient memory usage
  4. Compatibility with the React API
  5. Extensive browser support including IE7 and IE8 by using polyfills
  6. Simpler code which is easier to understand

Uber, Lyft, and Housing.com are just a few of the organizations that have migrated to Preact and benefited both in terms of increased performance and reduced size. The case study of Uber is well known. Uber migrated from its native app to a web client that provides an app-like experience via web browsers. The move to Preact ensured that browsers loaded faster, resulting in an increased number of ride requests.

Preact has many tools and libraries to support and extend its functionality. Here are my top 10 picks.

1. Redux Zero

Preact Libraries

Redux Zero is a lightweight state container based on Redux. Written in TypeScript, it supports not only Preact, but other libraries and frameworks like React, Svelte, and Vue. It is smaller in size and more efficient as it has a single store and no reducers.

Use the NPM command given below to install Redux Zero:

npm i redux-zero

Coding with Redux Zero is simple and straightforward. Follow these steps:

  1. Create the store.js file as follows to create a store that will be used to manage application state.
import createStore from "redux-zero";
const initialState = { count: 1 };
const store = createStore(initialState);
export default store;

2. Actions are used to change the state of the store. Create the Action.js file as follows:

export default {
decrement: ({ count }) => ({ count: count - 1 }),
increment: ({ count }) => ({ count: count + 1 })
}

3. As actions are pure functions, they are bound to the store.

import React from "react";
import { connect } from "redux-zero/react";

import actions from "./actions";

const mapToProps = ({ count }) => ({ count });

const s = {
root: { fontFamily: "sans-serif", textAlign: "center" },
btns: { display: "flex", justifyContent: "center" },
btn: { margin: 20 }
};

export default connect(mapToProps, actions)(
({ count, decrement, increment }) => (
<div style={s.root}>
<h1>{count}</h1>
<div style={s.btns}>
<button style={s.btn} onClick={decrement}>
decrement
</button>
<button style={s.btn} onClick={increment}>
increment
</button>
</div>
</div>
)
);

4. Now let’s connect all of these components in the index.js file.

import React from "react";
import { render } from "react-dom";
import { Provider } from "redux-zero/react";

import store from "./store";

import Counter from "./Counter";

const App = () => (
<Provider store={store}>
<Counter />
</Provider>
);

render(<App />, document.getElementById("root"));

Refer to the working code of this example:

## 2\. fpreact: (Functional Preact)

fpreact is an alternative API used to create Preact components. The API provides state management similar to redux and facilitates functional programming by removing the use of this.

fpreact is based on elm, which is used to create graphical UIs for web browsers. fpreact uses a domain-specific programming language and is a competitor of React.js and Vue.js.

fpreact is written in and supports Typescript, but can also work with javascript. To install it, use the following NPM command:

npm i -S fpreact preact

Below is the simple ES6 + JSX code for a ‘Hello World’ application:

import { h, render, component } from 'fpreact';

const Msg = {
    // You don't have to use a number here.
    // You could just as easily use "UPDATE_NAME" or anything else if you desire,
    // just make sure each item has a unique value
    UpdateName: 0,
};

const Greet = component({
    update(model = { name: 'world' }, msg) {
        switch (msg.kind) {
            case Msg.UpdateName:
                return { ...model, name: msg.value };
        }

        return model;
    },

    view(model, dispatch) {
        return (
            <div>
                <h1>Hello, {model.name}</h1>
                <label>
                    <span>Name:</span>
                    <input value={model.name} onInput={dispatch(Msg.UpdateName)} />
                </label>
            </div>
        );
    },
});

render(<Greet />, document.body);

3. ProppyJs

Preact Libraries

Proppy is a JavaScript library used to compose props, and it is only 1.5 kb in size. The props passed to ProppyJS can be used in any component–based UI framework like React, Vue, and Preact.

It also works with the data layer as a props composition. These are some of the benefits of using Proppy:

  1. Makes components stateless, as Proppy accepts and renders the props
  2. Makes functional props as they are composed within functions and grow easily
  3. It sets an application-wide provider that is global and accessible from any component
  4. It is interoperable as it integrates easily with other libraries
  5. Makes testing and rendering easier through many of your favorite tools

Here is a simple example of using ProppyJS with Preact:

import { h } from 'preact';
import { compose, withProps, withState } from 'proppy';
import { attach } from 'proppy-preact';

const P = compose(
  withProps({ foo: 'foo value' }),
  withState('counter', 'setCounter', 0)
);

function MyComponent({ foo, counter, setCounter }) {
  return (
    <div>
      <p>Foo: {foo}</p>

      <p>Counter: {counter}</p>

      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

export default attach(P)(MyComponent);

4. ClearX

ClearX maintains the application state and is an alternative to Redux and MobX. It binds application state to UI components using an interface and provides getters and setters for deep properties of nested data.

React class components and Function UI components work well with ClearX. You can simply install ClearX with the following NPM command:

npm install clearx - save

Follow these steps to use ClearX:

  1. Create a datastore:

ClearX first creates the stores and then uses the path to set deep properties of data. So they can be defined for non-existing or undefined properties.

import ClearX from `clearx`;

let store = new ClearX({
  id: 'Brave Browser',
  version: 'v0.68.140',
  settings: {
    File: true,
    Edit: true,
    History: true,
    Bookmarks: true,
    Window: true,
    Help: true,
    DevTools: true
  },
  openTabs: 3,
  users: [{
    email: 'john.doe@test.com',
    name: 'John Doe',
    age: 300
  }, {
    email: 'doe.john@test.com',
    name: 'Doe John',
    age: 50
  }]
});

export default store;

The datastore can be of any type.

2. Bind data to the UI store as follows:

Now it can be bound to the class store or selected path of the store using the useState() hook.

import React, { Fragment, useState } from 'react';
import store from './store';

const App = () => {

  let [ identity ] = store.paths(['id', 'version']).link(useState());
  let [ usersCount ] = store.paths('users.length').link(useState());
  let [ openTabs ] = store.paths('openTabs').link(useState());
  let [ settings, unlink ] = store.paths({
    devTools: 'settings.DevTools',
    history: 'settings.History'
  }).link(useState());

  useEffect(() => unlink, []);

  return (
    <code>
      Id: { identity[0] }
      Version: { identity[0] }
      openTabs: { openTabs }
      UsersCount: { usersCount }
      DevToolsEnabled: { settings.devTools }
      HistoryEnabled: { settings.history }
    </code>
  );
}

export default App;

ClearX also provides multiple API’s to operate and find the data as per applications.

5. Preact-urql

Preact-urql uses urql with the Preact core and hooks. It is used to improve the usability and stability of customized GraphQL infrastructure. To start, you need to import a single package from the framework of your choice. But it also has collections of connected parts to extend the application.

When using GraphQL, a primary data layer is created by urql to handle content-heavy pages through “Document Caching” and Normalized caching for data-heavy apps. It creates a user interface using trees of components and elements.

This is an example of Preact-urql where the render() function accepts the tree description and creates structures. It then appends the structure to the DOM element of a parent as a second argument. Thereafter the render() function uses the existing tree and calculates the difference in the outputs of current and previous to update the DOM.

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onChange={e => setInput(e.target.value)} />
		</div>
	)
}

render(<App />, document.body);

Apart from using Preact-CLI, here are some tools to make your coding with Preact much easier.

6. nwb

Preact Libraries

nwb is a zero-configuration development setup but also supports configuration and plugin modules. It provides a quick development environment for Preact and its components.

nwb provides auto-prefixed CSS, default polyfills, and uses promises for configurations. nwb uses JavaScript and JSX features and provides an environment for tests and optimizes webpack builders. It can be installed using npm as follows:

npm install -g nwb

This is an example of Preact components to whip up a lightbulb.js:

import {h, Component} from 'preact'

export default class Lightbulb extends Component {
  state = {
    on: false
  }
  updateChecked = (e) => {
    this.setState({on: e.target.checked})
  }
  render({wattage = 200}, {on}) {
    return <div>
      <label>
        <input type="checkbox" checked={on} onClick={this.updateChecked}/>
        {' '}
        {wattage}W lightbulb is {on ? 'on' : 'off'}
      </label>
    </div>
  }
}

Use the following command to install essential dependencies and start a webpack development server.

$ nwb preact run Lightbulb.js

✔ Installing preact
Starting Webpack compilation...
Compiled successfully in 3717 ms.

The app is running at http://localhost:3000/

For a production build, use “nwb preact build”:

$ nwb preact build Lightbulb.js
✔ Building Preact app

File size after gzip:

dist\app.b12334ec.js  8.63 KB

nwb provides automatic dependency installations, style preprocessing, rendering the entry module, and hot module replacement along with the development and testing environment.

7. Rewired

Preact Libraries

Rewired allows you to tweak the create-react-app webpack config(s) without the need to eject or create a fork of the react-scripts. It allows you to add plugins, loaders, and all the benefits of the create-react-app command without the restrictions of “no-config.”

Use the following NPM command to install rewired:

npm install react-app-rewired --save-dev

To make changes to config files, you can create config-overrides.js within the root directory.

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}
+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

“Flip” the existing calls of Preact-scripts in npm to start, build, and test. All scripts other than those required to eject can be flipped.

/* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

You can now start and run the server, and set a custom path for config-pverride.js…

"config-overrides-path": "node_modules/some-preconfigured-rewire"

8. Preact-CLI-postcss

Preact-CLI-postcss will provide the postcss.config.js file and disable the default postcss config so that you can have better control. To install, use the following command:

npm install preact-cli-postcss

It adds your properties to preact.config.js as follows:

const preactCliPostCSS = require('preact-cli-postcss');

export default function (config, env, helpers) {
	preactCliPostCSS(config, helpers);
}

9. Create Preact APP

Create Preact APP can be used to create Preact apps with no configurations. It is similar to create-react-app, but uses Preact. Some of its important characteristics are:

  1. One dependency: One build dependency, uses webpack, Babel, ESLint and along with a cohesive, curated experience on top.
  2. No Configuration Required: No requirement of configuration for production and development builds.
  3. No Lock-in: Anytime you can “eject” to a custom setup, it moves all configuration and builds dependencies with a single command.

You can use the below command to set and start the dev-server:

npm install preact preact-compat

This command will create the below folder structure with pre-installed transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

Use the following commands to run your application:

cd my-app 
npm start

Conclusion

Preact is gradually gaining popularity over React due to its lightweight nature and faster performance. It gives users the ability to expand its features using the libraries and tools. Many organizations like Uber have migrated to Preact and experienced many benefits making Preact a worthy alternative to React.

#preact #reactjs #javascript #webdev

What is GEEK

Buddha Community

9 Preact Libraries and Tools You Should Know in 2020
Brain Crist

Brain Crist

1594753020

Citrix Bugs Allow Unauthenticated Code Injection, Data Theft

Multiple vulnerabilities in the Citrix Application Delivery Controller (ADC) and Gateway would allow code injection, information disclosure and denial of service, the networking vendor announced Tuesday. Four of the bugs are exploitable by an unauthenticated, remote attacker.

The Citrix products (formerly known as NetScaler ADC and Gateway) are used for application-aware traffic management and secure remote access, respectively, and are installed in at least 80,000 companies in 158 countries, according to a December assessment from Positive Technologies.

Other flaws announced Tuesday also affect Citrix SD-WAN WANOP appliances, models 4000-WO, 4100-WO, 5000-WO and 5100-WO.

Attacks on the management interface of the products could result in system compromise by an unauthenticated user on the management network; or system compromise through cross-site scripting (XSS). Attackers could also create a download link for the device which, if downloaded and then executed by an unauthenticated user on the management network, could result in the compromise of a local computer.

“Customers who have configured their systems in accordance with Citrix recommendations [i.e., to have this interface separated from the network and protected by a firewall] have significantly reduced their risk from attacks to the management interface,” according to the vendor.

Threat actors could also mount attacks on Virtual IPs (VIPs). VIPs, among other things, are used to provide users with a unique IP address for communicating with network resources for applications that do not allow multiple connections or users from the same IP address.

The VIP attacks include denial of service against either the Gateway or Authentication virtual servers by an unauthenticated user; or remote port scanning of the internal network by an authenticated Citrix Gateway user.

“Attackers can only discern whether a TLS connection is possible with the port and cannot communicate further with the end devices,” according to the critical Citrix advisory. “Customers who have not enabled either the Gateway or Authentication virtual servers are not at risk from attacks that are applicable to those servers. Other virtual servers e.g. load balancing and content switching virtual servers are not affected by these issues.”

A final vulnerability has been found in Citrix Gateway Plug-in for Linux that would allow a local logged-on user of a Linux system with that plug-in installed to elevate their privileges to an administrator account on that computer, the company said.

#vulnerabilities #adc #citrix #code injection #critical advisory #cve-2020-8187 #cve-2020-8190 #cve-2020-8191 #cve-2020-8193 #cve-2020-8194 #cve-2020-8195 #cve-2020-8196 #cve-2020-8197 #cve-2020-8198 #cve-2020-8199 #denial of service #gateway #information disclosure #patches #security advisory #security bugs

Sunny Kunde

Sunny Kunde

1597848060

Top 12 Most Used Tools By Developers In 2020

rameworks and libraries can be said as the fundamental building blocks when developers build software or applications. These tools help in opting out the repetitive tasks as well as reduce the amount of code that the developers need to write for a particular software.

Recently, the Stack Overflow Developer Survey 2020 surveyed nearly 65,000 developers, where they voted their go-to tools and libraries. Here, we list down the top 12 frameworks and libraries from the survey that are most used by developers around the globe in 2020.

(The libraries are listed according to their number of Stars in GitHub)

1| TensorFlow

**GitHub Stars: **147k

Rank: 5

**About: **Originally developed by researchers of Google Brain team, TensorFlow is an end-to-end open-source platform for machine learning. It has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art research in ML. It allows developers to easily build and deploy ML-powered applications.

Know more here.

2| Flutter

**GitHub Stars: **98.3k

**Rank: **9

About: Created by Google, Flutter is a free and open-source software development kit (SDK) which enables fast user experiences for mobile, web and desktop from a single codebase. The SDK works with existing code and is used by developers and organisations around the world.

#opinions #developer tools #frameworks #java tools #libraries #most used tools by developers #python tools

Candelario Windler

Candelario Windler

1598001060

50+ Useful DevOps Tools

The article comprises both very well established tools for those who are new to the DevOps methodology.

What Is DevOps?

The DevOps methodology, a software and team management approach defined by the portmanteau of Development and Operations, was first coined in 2009 and has since become a buzzword concept in the IT field.

DevOps has come to mean many things to each individual who uses the term as DevOps is not a singularly defined standard, software, or process but more of a culture. Gartner defines DevOps as:

“DevOps represents a change in IT culture, focusing on rapid IT service delivery through the adoption of agile, lean practices in the context of a system-oriented approach. DevOps emphasizes people (and culture), and seeks to improve collaboration between operations and development teams. DevOps implementations utilize technology — especially automation tools that can leverage an increasingly programmable and dynamic infrastructure from a life cycle perspective.”

As you can see from the above definition, DevOps is a multi-faceted approach to the Software Development Life Cycle (SDLC), but its main underlying strength is how it leverages technology and software to streamline this process. So with the right approach to DevOps, notably adopting its philosophies of co-operation and implementing the right tools, your business can increase deployment frequency by a factor of 30 and lead times by a factor of 8000 over traditional methods, according to a CapGemini survey.

The Right Tools for the Job

This list is designed to be as comprehensive as possible. The article comprises both very well established tools for those who are new to the DevOps methodology and those tools that are more recent releases to the market — either way, there is bound to be a tool on here that can be an asset for you and your business. For those who already live and breathe DevOps, we hope you find something that will assist you in your growing enterprise.

With such a litany of tools to choose from, there is no “right” answer to what tools you should adopt. No single tool will cover all your needs and will be deployed across a variety of development and Operational teams, so let’s break down what you need to consider before choosing what tool might work for you.

  • Plan and collaborate: Before you even begin the SDLC, your business needs to have a cohesive idea of what tools they’ll need to implement across your teams. There are even DevOps tools that can assist you with this first crucial step.
  • Build: Here you want tools that create identically provisioned environments. The last you need is to hear “But it works for me on my computer”
  • Automation: This has quickly become a given in DevOps, but automation will always drastically increase production over manual methods.
  • Continuous Integration: Tools need to provide constant and immediate feedback, several times a day but not all integrations are implemented equally, will the tool you select be right for the job?
  • Deployment: Deployments need to be kept predictable, smooth, and reliable with minimal risks, automation will also play a big part in this process.

With all that in mind, I hope this selection of tools will aid you as your business continues to expand into the DevOps lifestyle.

Tools Categories List:

Infrastructure As Code

Continuous Integration and Delivery

Development Automation

Usability Testing

Database and Big Data

Monitoring

Testing

Security

Helpful CLI Tools

Development

Visualization

Infrastructure As Code

#AWSCloudFormation

1. AWS CloudFormation

AWS CloudFormation is an absolute must if you are currently working, or planning to work, in the AWS Cloud. CloudFormation allows you to model your AWS infrastructure and provision all your AWS resources swiftly and easily. All of this is done within a JSON or YAML template file and the service comes with a variety of automation features ensuring your deployments will be predictable, reliable, and manageable.

Link: https://aws.amazon.com/cloudformation/

2. Azure Resource Manager

Azure Resource Manager (ARM) is Microsoft’s answer to an all-encompassing IAC tool. With its ARM templates, described within JSON files, Azure Resource Manager will provision your infrastructure, handle dependencies, and declare multiple resources via a single template.

Link: https://azure.microsoft.com/en-us/features/resource-manager/

#Google Cloud Deployment Manager

3. Google Cloud Deployment Manager

Much like the tools mentioned above, Google Cloud Deployment Manager is Google’s IAC tool for the Google Cloud Platform. This tool utilizes YAML for its config files and JINJA2 or PYTHON for its templates. Some of its notable features are synchronistic deployment and ‘preview’, allowing you an overhead view of changes before they are committed.

Link: https://cloud.google.com/deployment-manager/

4. Terraform

Terraform is brought to you by HashiCorp, the makers of Vault and Nomad. Terraform is vastly different from the above-mentioned tools in that it is not restricted to a specific cloud environment, this comes with increased benefits for tackling complex distributed applications without being tied to a single platform. And much like Google Cloud Deployment Manager, Terraform also has a preview feature.

Link: https://www.terraform.io/

#Chef

5. Chef

Chef is an ideal choice for those who favor CI/CD. At its heart, Chef utilizes self-described recipes, templates, and cookbooks; a collection of ready-made templates. Cookbooks allow for consistent configuration even as your infrastructure rapidly scales. All of this is wrapped up in a beautiful Ruby-based DSL pie.

Link: https://www.chef.io/products/chef-infra/

#Ansible

#tools #devops #devops 2020 #tech tools #tool selection #tool comparison

David Loffer

David Loffer

1584763432

9 Preact Libraries and Tools You Should Know in 2020

What is Preact

Preact is a JavaScript library that describes itself as a fast 3kB alternative to React with the same ES6 API. As a frequent user of React, I’d always wanted to try out Preact and see what it offers, and the differences between Preact and React.

It was developed by Jason Miller to provide a feature set similar to React in a smaller package. Preact has the fastest virtual DOM libraries and diff implementation. Some of its salient features are:

  1. Increased performance
  2. Decreased size
  3. Efficient memory usage
  4. Compatibility with the React API
  5. Extensive browser support including IE7 and IE8 by using polyfills
  6. Simpler code which is easier to understand

Uber, Lyft, and Housing.com are just a few of the organizations that have migrated to Preact and benefited both in terms of increased performance and reduced size. The case study of Uber is well known. Uber migrated from its native app to a web client that provides an app-like experience via web browsers. The move to Preact ensured that browsers loaded faster, resulting in an increased number of ride requests.

Preact has many tools and libraries to support and extend its functionality. Here are my top 10 picks.

1. Redux Zero

Preact Libraries

Redux Zero is a lightweight state container based on Redux. Written in TypeScript, it supports not only Preact, but other libraries and frameworks like React, Svelte, and Vue. It is smaller in size and more efficient as it has a single store and no reducers.

Use the NPM command given below to install Redux Zero:

npm i redux-zero

Coding with Redux Zero is simple and straightforward. Follow these steps:

  1. Create the store.js file as follows to create a store that will be used to manage application state.
import createStore from "redux-zero";
const initialState = { count: 1 };
const store = createStore(initialState);
export default store;

2. Actions are used to change the state of the store. Create the Action.js file as follows:

export default {
decrement: ({ count }) => ({ count: count - 1 }),
increment: ({ count }) => ({ count: count + 1 })
}

3. As actions are pure functions, they are bound to the store.

import React from "react";
import { connect } from "redux-zero/react";

import actions from "./actions";

const mapToProps = ({ count }) => ({ count });

const s = {
root: { fontFamily: "sans-serif", textAlign: "center" },
btns: { display: "flex", justifyContent: "center" },
btn: { margin: 20 }
};

export default connect(mapToProps, actions)(
({ count, decrement, increment }) => (
<div style={s.root}>
<h1>{count}</h1>
<div style={s.btns}>
<button style={s.btn} onClick={decrement}>
decrement
</button>
<button style={s.btn} onClick={increment}>
increment
</button>
</div>
</div>
)
);

4. Now let’s connect all of these components in the index.js file.

import React from "react";
import { render } from "react-dom";
import { Provider } from "redux-zero/react";

import store from "./store";

import Counter from "./Counter";

const App = () => (
<Provider store={store}>
<Counter />
</Provider>
);

render(<App />, document.getElementById("root"));

Refer to the working code of this example:

## 2\. fpreact: (Functional Preact)

fpreact is an alternative API used to create Preact components. The API provides state management similar to redux and facilitates functional programming by removing the use of this.

fpreact is based on elm, which is used to create graphical UIs for web browsers. fpreact uses a domain-specific programming language and is a competitor of React.js and Vue.js.

fpreact is written in and supports Typescript, but can also work with javascript. To install it, use the following NPM command:

npm i -S fpreact preact

Below is the simple ES6 + JSX code for a ‘Hello World’ application:

import { h, render, component } from 'fpreact';

const Msg = {
    // You don't have to use a number here.
    // You could just as easily use "UPDATE_NAME" or anything else if you desire,
    // just make sure each item has a unique value
    UpdateName: 0,
};

const Greet = component({
    update(model = { name: 'world' }, msg) {
        switch (msg.kind) {
            case Msg.UpdateName:
                return { ...model, name: msg.value };
        }

        return model;
    },

    view(model, dispatch) {
        return (
            <div>
                <h1>Hello, {model.name}</h1>
                <label>
                    <span>Name:</span>
                    <input value={model.name} onInput={dispatch(Msg.UpdateName)} />
                </label>
            </div>
        );
    },
});

render(<Greet />, document.body);

3. ProppyJs

Preact Libraries

Proppy is a JavaScript library used to compose props, and it is only 1.5 kb in size. The props passed to ProppyJS can be used in any component–based UI framework like React, Vue, and Preact.

It also works with the data layer as a props composition. These are some of the benefits of using Proppy:

  1. Makes components stateless, as Proppy accepts and renders the props
  2. Makes functional props as they are composed within functions and grow easily
  3. It sets an application-wide provider that is global and accessible from any component
  4. It is interoperable as it integrates easily with other libraries
  5. Makes testing and rendering easier through many of your favorite tools

Here is a simple example of using ProppyJS with Preact:

import { h } from 'preact';
import { compose, withProps, withState } from 'proppy';
import { attach } from 'proppy-preact';

const P = compose(
  withProps({ foo: 'foo value' }),
  withState('counter', 'setCounter', 0)
);

function MyComponent({ foo, counter, setCounter }) {
  return (
    <div>
      <p>Foo: {foo}</p>

      <p>Counter: {counter}</p>

      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

export default attach(P)(MyComponent);

4. ClearX

ClearX maintains the application state and is an alternative to Redux and MobX. It binds application state to UI components using an interface and provides getters and setters for deep properties of nested data.

React class components and Function UI components work well with ClearX. You can simply install ClearX with the following NPM command:

npm install clearx - save

Follow these steps to use ClearX:

  1. Create a datastore:

ClearX first creates the stores and then uses the path to set deep properties of data. So they can be defined for non-existing or undefined properties.

import ClearX from `clearx`;

let store = new ClearX({
  id: 'Brave Browser',
  version: 'v0.68.140',
  settings: {
    File: true,
    Edit: true,
    History: true,
    Bookmarks: true,
    Window: true,
    Help: true,
    DevTools: true
  },
  openTabs: 3,
  users: [{
    email: 'john.doe@test.com',
    name: 'John Doe',
    age: 300
  }, {
    email: 'doe.john@test.com',
    name: 'Doe John',
    age: 50
  }]
});

export default store;

The datastore can be of any type.

2. Bind data to the UI store as follows:

Now it can be bound to the class store or selected path of the store using the useState() hook.

import React, { Fragment, useState } from 'react';
import store from './store';

const App = () => {

  let [ identity ] = store.paths(['id', 'version']).link(useState());
  let [ usersCount ] = store.paths('users.length').link(useState());
  let [ openTabs ] = store.paths('openTabs').link(useState());
  let [ settings, unlink ] = store.paths({
    devTools: 'settings.DevTools',
    history: 'settings.History'
  }).link(useState());

  useEffect(() => unlink, []);

  return (
    <code>
      Id: { identity[0] }
      Version: { identity[0] }
      openTabs: { openTabs }
      UsersCount: { usersCount }
      DevToolsEnabled: { settings.devTools }
      HistoryEnabled: { settings.history }
    </code>
  );
}

export default App;

ClearX also provides multiple API’s to operate and find the data as per applications.

5. Preact-urql

Preact-urql uses urql with the Preact core and hooks. It is used to improve the usability and stability of customized GraphQL infrastructure. To start, you need to import a single package from the framework of your choice. But it also has collections of connected parts to extend the application.

When using GraphQL, a primary data layer is created by urql to handle content-heavy pages through “Document Caching” and Normalized caching for data-heavy apps. It creates a user interface using trees of components and elements.

This is an example of Preact-urql where the render() function accepts the tree description and creates structures. It then appends the structure to the DOM element of a parent as a second argument. Thereafter the render() function uses the existing tree and calculates the difference in the outputs of current and previous to update the DOM.

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onChange={e => setInput(e.target.value)} />
		</div>
	)
}

render(<App />, document.body);

Apart from using Preact-CLI, here are some tools to make your coding with Preact much easier.

6. nwb

Preact Libraries

nwb is a zero-configuration development setup but also supports configuration and plugin modules. It provides a quick development environment for Preact and its components.

nwb provides auto-prefixed CSS, default polyfills, and uses promises for configurations. nwb uses JavaScript and JSX features and provides an environment for tests and optimizes webpack builders. It can be installed using npm as follows:

npm install -g nwb

This is an example of Preact components to whip up a lightbulb.js:

import {h, Component} from 'preact'

export default class Lightbulb extends Component {
  state = {
    on: false
  }
  updateChecked = (e) => {
    this.setState({on: e.target.checked})
  }
  render({wattage = 200}, {on}) {
    return <div>
      <label>
        <input type="checkbox" checked={on} onClick={this.updateChecked}/>
        {' '}
        {wattage}W lightbulb is {on ? 'on' : 'off'}
      </label>
    </div>
  }
}

Use the following command to install essential dependencies and start a webpack development server.

$ nwb preact run Lightbulb.js

✔ Installing preact
Starting Webpack compilation...
Compiled successfully in 3717 ms.

The app is running at http://localhost:3000/

For a production build, use “nwb preact build”:

$ nwb preact build Lightbulb.js
✔ Building Preact app

File size after gzip:

dist\app.b12334ec.js  8.63 KB

nwb provides automatic dependency installations, style preprocessing, rendering the entry module, and hot module replacement along with the development and testing environment.

7. Rewired

Preact Libraries

Rewired allows you to tweak the create-react-app webpack config(s) without the need to eject or create a fork of the react-scripts. It allows you to add plugins, loaders, and all the benefits of the create-react-app command without the restrictions of “no-config.”

Use the following NPM command to install rewired:

npm install react-app-rewired --save-dev

To make changes to config files, you can create config-overrides.js within the root directory.

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}
+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

“Flip” the existing calls of Preact-scripts in npm to start, build, and test. All scripts other than those required to eject can be flipped.

/* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

You can now start and run the server, and set a custom path for config-pverride.js…

"config-overrides-path": "node_modules/some-preconfigured-rewire"

8. Preact-CLI-postcss

Preact-CLI-postcss will provide the postcss.config.js file and disable the default postcss config so that you can have better control. To install, use the following command:

npm install preact-cli-postcss

It adds your properties to preact.config.js as follows:

const preactCliPostCSS = require('preact-cli-postcss');

export default function (config, env, helpers) {
	preactCliPostCSS(config, helpers);
}

9. Create Preact APP

Create Preact APP can be used to create Preact apps with no configurations. It is similar to create-react-app, but uses Preact. Some of its important characteristics are:

  1. One dependency: One build dependency, uses webpack, Babel, ESLint and along with a cohesive, curated experience on top.
  2. No Configuration Required: No requirement of configuration for production and development builds.
  3. No Lock-in: Anytime you can “eject” to a custom setup, it moves all configuration and builds dependencies with a single command.

You can use the below command to set and start the dev-server:

npm install preact preact-compat

This command will create the below folder structure with pre-installed transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

Use the following commands to run your application:

cd my-app 
npm start

Conclusion

Preact is gradually gaining popularity over React due to its lightweight nature and faster performance. It gives users the ability to expand its features using the libraries and tools. Many organizations like Uber have migrated to Preact and experienced many benefits making Preact a worthy alternative to React.

#preact #reactjs #javascript #webdev

Ulices Hermiston

Ulices Hermiston

1598811780

Top 7 Python Libraries Used For Hacking

python is one of the most go-for languages among the developers due to the availability of open-source libraries and frameworks. According to a survey report, Python is the top language preferred for Statistical Modelling, and an overwhelming majority of practitioners prefer Python as the language for statistical works.

Python has become a favourite language for hackers these days. The reason is the presence of pre-built tools and libraries, which makes hacking easy. In fact, the language is adequate for ethical hacking as ethical hackers need to develop smaller scripts, and Python fulfils this criterion.

Below here, we listed down the top 7 Python libraries used in hacking.

1| Requests

Stars: 43.3k

**About: **Requests is a simple HTTP library for Python that allows a user to send HTTP/1.1 requests extremely easily. This library helps in building robust HTTP applications and includes intuitive features such as automatic content decompression and decoding, connection timeouts, basic & digits authentication, among others.

Know more here.

2| Scapy

Stars: 5.5k

About: Scapy is a powerful Python-based interactive packet manipulation program and library. This library is able to forge or decode packets of a wide number of protocols, send them on the wire, capture them, store or read them using pcap files, match requests, and more. It allows the construction of tools that can easily scan or attack networks. It is designed to allow fast packet prototyping by using default values that work. It can also perform tasks such as sending invalid frames, injecting your own 802.11 frames, combining techniques, such as VLAN hopping with ARP cache poisoning, VOIP decoding on WEP encrypted channel, etc., which most other tools cannot.

Know more here.

3| IMpacket

**Stars: **5.3k

**About: **IMpacket is a library that includes a collection of Python classes for working with network protocols. It is focused on providing low-level programmatic access to network packets. It allows Python developers to craft and decode network packets in a simple and consistent manner. The library provides a set of tools as examples of what can be done within the context of this library.

Know more here.

4| Cryptography

**Stars: **3.5k

**About: **Cryptography is a package which provides cryptographic recipes and primitives to Python developers. It includes both high-level recipes and low-level interfaces to common cryptographic algorithms such as symmetric ciphers, message digests and key derivation functions. This library is broadly divided into two levels. One is with safe cryptographic recipes that require little to no configuration choices. The other level is low-level cryptographic primitives, which are often dangerous and can be used incorrectly.

Know more here.

#developers corner #hacking tools #libraries for hacking #python #python libraries #python libraries used for hacking #python tools