ReactJS Based Comic Strip Creator using Fabric.js Canvas Rendering

React Komik!

ReactJS based comic strip creator using fabric.js canvas rendering. It’s like spectacle but for comic. You can edit (positioning, scaling, coloring) the comic after rendering. Reactify anything, reactify comic.

Usage

NPM modules

Just install it from npm

npm install react-komik

You can use the component by require it and bundle it with webpack or browserify. Don’t forget to import React, ReactDOM, and use Babel/JSX transformer with ES2015 (recommended)

	import React from 'react';
	import { render } from 'react-dom';
	import { Strip, Panel, Character, Balloon } from 'react-komik';

	let Comic = (props) => (
		<Strip title="Your title here" column="1">
			<Panel>
				<Character
					image="char.png">
					<Balloon 
						text="Reactify Comic!" />
				</Character>
			</Panel>
		</Strip>
	);

	render(<Comic />, document.getElementById('root'));

UMD Browser

Download or include the komik.js file to your HTML. Don’t forget to include React, ReactDOM and JSX transformer/Babel. Please use NPM modules instead for production.

	<script src="http://sonnylazuardi.github.io/react-komik/dist/komik.js"></script>
	<script>
		let { Strip, Panel, Character, Balloon } = Komik;

		class Comic extends React.Component {
			render() {
				return (
					<Strip title="Your title here" column="1">
						<Panel>
							<Character
								image="char.png">
								<Balloon 
									text="Reactify Comic!" />
							</Character>
						</Panel>
					</Strip>
				);
			}
		}

		ReactDOM.render(<Comic />, document.getElementById('root'));
	</script>

Demo

This demo is using UMD browser, hosted on codepen and jsbin.

http://codepen.io/sonnylazuardi/pen/JGKmGE

http://jsbin.com/zaxabi/edit?html,js,output

Components

There are four main components:

Strip

Attribute	Value Type	Default	Description
title	String	“Comic Title”	Your comic title
column	Integer	2	Number of comic’s column
padding	Integer	0	Comic padding
width	Integer	500	Comic’s width
height	Integer	500	Comic’s height
top	Integer	0	Comic’s top position
left	Integer	0	Comic’s left position
fill	String (Color)	‘white’	Comic’s background color
stroke	String (Color)	‘black’	Comic’s stroke color
strokeWidth	Integer	0	Comic’s stroke width
fontFamily	String (Font Name)	“Arial”	Comic’s font family
fontSize	Integer	13	Comic’s font size
upperCase	Boolan	false	Comic’s text upper case

Panel

Attribute	Value Type	Default	Description
height	Integer	180	Panel’s height
padding	Integer	20	Panel’s padding
fill	String (Color)	‘white’	Panel’s background color
stroke	Integer	‘black’	Panel’s stroke color
strokeWidth	Integer	3	Panel’s stroke width
background	String (Image URL)	null	Panel’s background image

Character

Attribute	Value Type	Default	Description
image	String (Image URL)	‘char1.png’	Character’s image
scale	Decimal (0 - 1)	1	Character’s image scale
align	String (‘center’, ‘right’, ‘left’)	‘center’	Character’s align position
left	Integer	null	Character’s left position (will overwrite align)
bottom	Integer	0	Character’s bottom position
top	Integer	null	Character’s top position (will overwrite bottom position)

Balloon

Attribute	Value Type	Default	Description
text	String	‘Hi Bro!’	Balloon’s text
image	String (SVG URL)	‘chat_right.svg’	Chat balloon SVG images
left	Integer	null	Balloon’s left position
bottom	Integer (from Character’s top)	-70	Balloon’s bottom position
top	Integer	null	Balloon’s top position (will overwrite bottom)
scale	Decimal (0 - 1)	0.8	Balloon’s image scale
align	String (‘center’, ‘left’, ‘right’)	‘left’	Balloon’s align from character
padding	Integer	12	Balloon’s text padding
height	Integer	150	Balloon’s height
textAlign	String (‘center’, ‘left’, ‘right’)	‘center’	Balloon’s text align
fontFamily	String (Font Name)	(The same with Strip’s fontFamily)	Balloon’s font family
fontSize	Integer	(The same with Strip’s fontSize)	Balloon’s font size

Contributing

Ideas, issues, and PRs are welcomed. You can also directly shoot me an email at sonnylazuardi@gmail.com.

JS Comic

This project is actually an effort to write comic easier for JS Comic. Please follow @jscomicnet or like JS Comic FB page.

Download Details:

Author: sonnylazuardi

Demo: http://sonny.js.org/react-komik/

Source Code: https://github.com/sonnylazuardi/react-komik

#react #reactjs #javascript

What is GEEK

Buddha Community

ReactJS Based Comic Strip Creator using Fabric.js Canvas Rendering

JavaScript Daily

1632537859

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

Fast startup without relying on a custom version of Node.js.
Small artifact (current size is around 1.2MB).
First class macros.
Support building small TUI apps using Reagent.
Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

destructuring using :syms
property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

c64core: retrocompute aesthetics twitter bot
gallery.cljs: script to download walpapers from windowsonearth.org.
nbb-action-example: example of a Github action built with nbb.

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

babashka >= 0.4.0
Clojure CLI >= 1.10.3.933
Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

Clone and cd into this repo
bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb
License: EPL-1.0

#node #javascript

Cristian Vasta

1611668340

ReactJS Based Comic Strip Creator using Fabric.js Canvas Rendering

React Komik!

Usage

NPM modules

Just install it from npm

npm install react-komik

You can use the component by require it and bundle it with webpack or browserify. Don’t forget to import React, ReactDOM, and use Babel/JSX transformer with ES2015 (recommended)

	import React from 'react';
	import { render } from 'react-dom';
	import { Strip, Panel, Character, Balloon } from 'react-komik';

	let Comic = (props) => (
		<Strip title="Your title here" column="1">
			<Panel>
				<Character
					image="char.png">
					<Balloon 
						text="Reactify Comic!" />
				</Character>
			</Panel>
		</Strip>
	);

	render(<Comic />, document.getElementById('root'));

UMD Browser

Download or include the komik.js file to your HTML. Don’t forget to include React, ReactDOM and JSX transformer/Babel. Please use NPM modules instead for production.

	<script src="http://sonnylazuardi.github.io/react-komik/dist/komik.js"></script>
	<script>
		let { Strip, Panel, Character, Balloon } = Komik;

		class Comic extends React.Component {
			render() {
				return (
					<Strip title="Your title here" column="1">
						<Panel>
							<Character
								image="char.png">
								<Balloon 
									text="Reactify Comic!" />
							</Character>
						</Panel>
					</Strip>
				);
			}
		}

		ReactDOM.render(<Comic />, document.getElementById('root'));
	</script>

Demo

This demo is using UMD browser, hosted on codepen and jsbin.

http://codepen.io/sonnylazuardi/pen/JGKmGE

http://jsbin.com/zaxabi/edit?html,js,output

Components

There are four main components:

Strip

Attribute	Value Type	Default	Description
title	String	“Comic Title”	Your comic title
column	Integer	2	Number of comic’s column
padding	Integer	0	Comic padding
width	Integer	500	Comic’s width
height	Integer	500	Comic’s height
top	Integer	0	Comic’s top position
left	Integer	0	Comic’s left position
fill	String (Color)	‘white’	Comic’s background color
stroke	String (Color)	‘black’	Comic’s stroke color
strokeWidth	Integer	0	Comic’s stroke width
fontFamily	String (Font Name)	“Arial”	Comic’s font family
fontSize	Integer	13	Comic’s font size
upperCase	Boolan	false	Comic’s text upper case

Panel

Attribute	Value Type	Default	Description
height	Integer	180	Panel’s height
padding	Integer	20	Panel’s padding
fill	String (Color)	‘white’	Panel’s background color
stroke	Integer	‘black’	Panel’s stroke color
strokeWidth	Integer	3	Panel’s stroke width
background	String (Image URL)	null	Panel’s background image

Character

Attribute	Value Type	Default	Description
image	String (Image URL)	‘char1.png’	Character’s image
scale	Decimal (0 - 1)	1	Character’s image scale
align	String (‘center’, ‘right’, ‘left’)	‘center’	Character’s align position
left	Integer	null	Character’s left position (will overwrite align)
bottom	Integer	0	Character’s bottom position
top	Integer	null	Character’s top position (will overwrite bottom position)

Balloon

Attribute	Value Type	Default	Description
text	String	‘Hi Bro!’	Balloon’s text
image	String (SVG URL)	‘chat_right.svg’	Chat balloon SVG images
left	Integer	null	Balloon’s left position
bottom	Integer (from Character’s top)	-70	Balloon’s bottom position
top	Integer	null	Balloon’s top position (will overwrite bottom)
scale	Decimal (0 - 1)	0.8	Balloon’s image scale
align	String (‘center’, ‘left’, ‘right’)	‘left’	Balloon’s align from character
padding	Integer	12	Balloon’s text padding
height	Integer	150	Balloon’s height
textAlign	String (‘center’, ‘left’, ‘right’)	‘center’	Balloon’s text align
fontFamily	String (Font Name)	(The same with Strip’s fontFamily)	Balloon’s font family
fontSize	Integer	(The same with Strip’s fontSize)	Balloon’s font size

Contributing

Ideas, issues, and PRs are welcomed. You can also directly shoot me an email at sonnylazuardi@gmail.com.

JS Comic

This project is actually an effort to write comic easier for JS Comic. Please follow @jscomicnet or like JS Comic FB page.

Download Details:

Author: sonnylazuardi

Demo: http://sonny.js.org/react-komik/

Source Code: https://github.com/sonnylazuardi/react-komik

#react #reactjs #javascript

Beth Cooper

1659694200

Easy Activity Tracking for Models, Similar to Github's Public Activity

PublicActivity

public_activity provides easy activity tracking for your ActiveRecord, Mongoid 3 and MongoMapper models in Rails 3 and 4.

Simply put: it can record what happens in your application and gives you the ability to present those recorded activities to users - in a similar way to how GitHub does it.

!! WARNING: README for unreleased version below. !!

You probably don't want to read the docs for this unreleased version 2.0.

For the stable 1.5.X readme see: https://github.com/chaps-io/public_activity/blob/1-5-stable/README.md

About

Here is a simple example showing what this gem is about:

Example usage

Tutorials

Screencast

Ryan Bates made a great screencast describing how to integrate Public Activity.

Tutorial

A great step-by-step guide on implementing activity feeds using public_activity by Ilya Bodrov.

Online demo

You can see an actual application using this gem here: http://public-activity-example.herokuapp.com/feed

The source code of the demo is hosted here: https://github.com/pokonski/activity_blog

Setup

Gem installation

You can install public_activity as you would any other gem:

gem install public_activity

or in your Gemfile:

gem 'public_activity'

Database setup

By default public_activity uses Active Record. If you want to use Mongoid or MongoMapper as your backend, create an initializer file in your Rails application with the corresponding code inside:

For Mongoid:

# config/initializers/public_activity.rb
PublicActivity.configure do |config|
  config.orm = :mongoid
end

For MongoMapper:

# config/initializers/public_activity.rb
PublicActivity.configure do |config|
  config.orm = :mongo_mapper
end

(ActiveRecord only) Create migration for activities and migrate the database (in your Rails project):

rails g public_activity:migration
rake db:migrate

Model configuration

Include PublicActivity::Model and add tracked to the model you want to keep track of:

For ActiveRecord:

class Article < ActiveRecord::Base
  include PublicActivity::Model
  tracked
end

For Mongoid:

class Article
  include Mongoid::Document
  include PublicActivity::Model
  tracked
end

For MongoMapper:

class Article
  include MongoMapper::Document
  include PublicActivity::Model
  tracked
end

And now, by default create/update/destroy activities are recorded in activities table. This is all you need to start recording activities for basic CRUD actions.

Optional: If you don't need #tracked but still want the comfort of #create_activity, you can include only the lightweight Common module instead of Model.

Custom activities

You can trigger custom activities by setting all your required parameters and triggering create_activity on the tracked model, like this:

@article.create_activity key: 'article.commented_on', owner: current_user

See this entry http://rubydoc.info/gems/public_activity/PublicActivity/Common:create_activity for more details.

Displaying activities

To display them you simply query the PublicActivity::Activity model:

# notifications_controller.rb
def index
  @activities = PublicActivity::Activity.all
end

And in your views:

<%= render_activities(@activities) %>

Note: render_activities is an alias for render_activity and does the same.

Layouts

You can also pass options to both activity#render and #render_activity methods, which are passed deeper to the internally used render_partial method. A useful example would be to render activities wrapped in layout, which shares common elements of an activity, like a timestamp, owner's avatar etc:

<%= render_activities(@activities, layout: :activity) %>

The activity will be wrapped with the app/views/layouts/_activity.html.erb layout, in the above example.

Important: please note that layouts for activities are also partials. Hence the _ prefix.

Locals

Sometimes, it's desirable to pass additional local variables to partials. It can be done this way:

<%= render_activity(@activity, locals: {friends: current_user.friends}) %>

Note: Before 1.4.0, one could pass variables directly to the options hash for #render_activity and access it from activity parameters. This functionality is retained in 1.4.0 and later, but the :locals method is preferred, since it prevents bugs from shadowing variables from activity parameters in the database.

Activity views

public_activity looks for views in app/views/public_activity.

For example, if you have an activity with :key set to "activity.user.changed_avatar", the gem will look for a partial in app/views/public_activity/user/_changed_avatar.html.(|erb|haml|slim|something_else).

Hint: the "activity." prefix in :key is completely optional and kept for backwards compatibility, you can skip it in new projects.

If you would like to fallback to a partial, you can utilize the fallback parameter to specify the path of a partial to use when one is missing:

<%= render_activity(@activity, fallback: 'default') %>

When used in this manner, if a partial with the specified :key cannot be located it will use the partial defined in the fallback instead. In the example above this would resolve to public_activity/_default.html.(|erb|haml|slim|something_else).

If a view file does not exist then ActionView::MisingTemplate will be raised. If you wish to fallback to the old behaviour and use an i18n based translation in this situation you can specify a :fallback parameter of text to fallback to this mechanism like such:

<%= render_activity(@activity, fallback: :text) %>

i18n

Translations are used by the #text method, to which you can pass additional options in form of a hash. #render method uses translations when view templates have not been provided. You can render pure i18n strings by passing {display: :i18n} to #render_activity or #render.

Translations should be put in your locale .yml files. To render pure strings from I18n Example structure:

activity:
  article:
    create: 'Article has been created'
    update: 'Someone has edited the article'
    destroy: 'Some user removed an article!'

This structure is valid for activities with keys "activity.article.create" or "article.create". As mentioned before, "activity." part of the key is optional.

Testing

For RSpec you can first disable public_activity and add require helper methods in the rails_helper.rb with:

#rails_helper.rb
require 'public_activity/testing'

PublicActivity.enabled = false

In your specs you can then blockwise decide whether to turn public_activity on or off.

# file_spec.rb
PublicActivity.with_tracking do
  # your test code goes here
end

PublicActivity.without_tracking do
  # your test code goes here
end

Documentation

For more documentation go here

Common examples

Set the Activity's owner to current_user by default

You can set up a default value for :owner by doing this:

Include PublicActivity::StoreController in your ApplicationController like this:

class ApplicationController < ActionController::Base
  include PublicActivity::StoreController
end

Use Proc in :owner attribute for tracked class method in your desired model. For example:

class Article < ActiveRecord::Base
  tracked owner: Proc.new{ |controller, model| controller.current_user }
end

Note: current_user applies to Devise, if you are using a different authentication gem or your own code, change the current_user to a method you use.

Disable tracking for a class or globally

If you need to disable tracking temporarily, for example in tests or db/seeds.rb then you can use PublicActivity.enabled= attribute like below:

# Disable p_a globally
PublicActivity.enabled = false

# Perform some operations that would normally be tracked by p_a:
Article.create(title: 'New article')

# Switch it back on
PublicActivity.enabled = true

You can also disable public_activity for a specific class:

# Disable p_a for Article class
Article.public_activity_off

# p_a will not do anything here:
@article = Article.create(title: 'New article')

# But will be enabled for other classes:
# (creation of the comment will be recorded if you are tracking the Comment class)
@article.comments.create(body: 'some comment!')

# Enable it again for Article:
Article.public_activity_on

Create custom activities

Besides standard, automatic activities created on CRUD actions on your model (deactivatable), you can post your own activities that can be triggered without modifying the tracked model. There are a few ways to do this, as PublicActivity gives three tiers of options to be set.

Instant options

Because every activity needs a key (otherwise: NoKeyProvided is raised), the shortest and minimal way to post an activity is:

@user.create_activity :mood_changed
# the key of the action will be user.mood_changed
@user.create_activity action: :mood_changed # this is exactly the same as above

Besides assigning your key (which is obvious from the code), it will take global options from User class (given in #tracked method during class definition) and overwrite them with instance options (set on @user by #activity method). You can read more about options and how PublicActivity inherits them for you here.

Note the action parameter builds the key like this: "#{model_name}.#{action}". You can read further on options for #create_activity here.

To provide more options, you can do:

@user.create_activity action: 'poke', parameters: {reason: 'bored'}, recipient: @friend, owner: current_user

In this example, we have provided all the things we could for a standard Activity.

Use custom fields on Activity

Besides the few fields that every Activity has (key, owner, recipient, trackable, parameters), you can also set custom fields. This could be very beneficial, as parameters are a serialized hash, which cannot be queried easily from the database. That being said, use custom fields when you know that you will set them very often and search by them (don't forget database indexes :) ).

Set `owner` and `recipient` based on associations

class Comment < ActiveRecord::Base
  include PublicActivity::Model
  tracked owner: :commenter, recipient: :commentee

  belongs_to :commenter, :class_name => "User"
  belongs_to :commentee, :class_name => "User"
end

Resolve parameters from a Symbol or Proc

class Post < ActiveRecord::Base
  include PublicActivity::Model
  tracked only: [:update], parameters: :tracked_values
  
  def tracked_values
   {}.tap do |hash|
     hash[:tags] = tags if tags_changed?
   end
  end
end

Setup

Skip this step if you are using ActiveRecord in Rails 4 or Mongoid

The first step is similar in every ORM available (except mongoid):

PublicActivity::Activity.class_eval do
  attr_accessible :custom_field
end

place this code under config/initializers/public_activity.rb, you have to create it first.

To be able to assign to that field, we need to move it to the mass assignment sanitizer's whitelist.

Migration

If you're using ActiveRecord, you will also need to provide a migration to add the actual field to the Activity. Taken from our tests:

class AddCustomFieldToActivities < ActiveRecord::Migration
  def change
    change_table :activities do |t|
      t.string :custom_field
    end
  end
end

Assigning custom fields

Assigning is done by the same methods that you use for normal parameters: #tracked, #create_activity. You can just pass the name of your custom variable and assign its value. Even better, you can pass it to #tracked to tell us how to harvest your data for custom fields so we can do that for you.

class Article < ActiveRecord::Base
  include PublicActivity::Model
  tracked custom_field: proc {|controller, model| controller.some_helper }
end

Help

If you need help with using public_activity please visit our discussion group and ask a question there:

https://groups.google.com/forum/?fromgroups#!forum/public-activity

Please do not ask general questions in the Github Issues.

Author: public-activity
Source code: https://github.com/public-activity/public_activity
License: MIT license

#ruby #ruby-on-rails

sophia tondon

1620625479

Why And Where To Use ReactJS For Web Development?

There are numerous frameworks and libraries accessible in this advanced digital world that can help you with agile web development. But among all, only a few offer excellent performance and possess robust features and functionalities. ReactJS is one of the most famous web frameworks these days, usually used in web development.

Do You Know?

68.9% of developers loved using ReactJS for web development.

1,104,488 websites are using ReactJS.
ReactJS is one of the most extensively used libraries for frontend development. It has become the first choice for developers as it can work with a virtual browser.

Why ReactJS For Web Development?

Here I have mentioned a few vital factors which will help you know why you should use ReactJS for web development.

Simple To Learn

In comparison with other frameworks such as Angular and Bootstrap, ReactJS is very simple to learn and apply. Moreover, this helps you develop web apps fast without wasting time in understanding and learning ReactJS working.

Well, here I just want to clarify that if you are an experienced developer, then only for you, it will be simple to use ReactJS as non-experienced may face difficulty using this technology. So, if you want to build leading web apps,
hire ReactJS developers; this will help you make accurate use of ReactJS features in web development.

Read Full Blog- https://medium.com/predict/why-and-where-to-use-reactjs-for-web-development-fb6c53231474

##hire react js developer #hire react js developers #hire react.js developer #hire react.js developers #hire reactjs developer #react js development company

Aria Barnes

1622719015

Why use Node.js for Web Development? Benefits and Examples of Apps

Front-end web development has been overwhelmed by JavaScript highlights for quite a long time. Google, Facebook, Wikipedia, and most of all online pages use JS for customer side activities. As of late, it additionally made a shift to cross-platform mobile development as a main technology in React Native, Nativescript, Apache Cordova, and other crossover devices.

Throughout the most recent couple of years, Node.js moved to backend development as well. Designers need to utilize a similar tech stack for the whole web project without learning another language for server-side development. Node.js is a device that adjusts JS usefulness and syntax to the backend.

What is Node.js?

Node.js isn’t a language, or library, or system. It’s a runtime situation: commonly JavaScript needs a program to work, however Node.js makes appropriate settings for JS to run outside of the program. It’s based on a JavaScript V8 motor that can run in Chrome, different programs, or independently.

The extent of V8 is to change JS program situated code into machine code — so JS turns into a broadly useful language and can be perceived by servers. This is one of the advantages of utilizing Node.js in web application development: it expands the usefulness of JavaScript, permitting designers to coordinate the language with APIs, different languages, and outside libraries.

What Are the Advantages of Node.js Web Application Development?

Of late, organizations have been effectively changing from their backend tech stacks to Node.js. LinkedIn picked Node.js over Ruby on Rails since it took care of expanding responsibility better and decreased the quantity of servers by multiple times. PayPal and Netflix did something comparative, just they had a goal to change their design to microservices. We should investigate the motivations to pick Node.JS for web application development and when we are planning to hire node js developers.

Amazing Tech Stack for Web Development

The principal thing that makes Node.js a go-to environment for web development is its JavaScript legacy. It’s the most well known language right now with a great many free devices and a functioning local area. Node.js, because of its association with JS, immediately rose in ubiquity — presently it has in excess of 368 million downloads and a great many free tools in the bundle module.

Alongside prevalence, Node.js additionally acquired the fundamental JS benefits:

quick execution and information preparing;
exceptionally reusable code;
the code is not difficult to learn, compose, read, and keep up;
tremendous asset library, a huge number of free aides, and a functioning local area.

In addition, it’s a piece of a well known MEAN tech stack (the blend of MongoDB, Express.js, Angular, and Node.js — four tools that handle all vital parts of web application development).

Designers Can Utilize JavaScript for the Whole Undertaking

This is perhaps the most clear advantage of Node.js web application development. JavaScript is an unquestionable requirement for web development. Regardless of whether you construct a multi-page or single-page application, you need to know JS well. On the off chance that you are now OK with JavaScript, learning Node.js won’t be an issue. Grammar, fundamental usefulness, primary standards — every one of these things are comparable.

In the event that you have JS designers in your group, it will be simpler for them to learn JS-based Node than a totally new dialect. What’s more, the front-end and back-end codebase will be basically the same, simple to peruse, and keep up — in light of the fact that they are both JS-based.

A Quick Environment for Microservice Development

There’s another motivation behind why Node.js got famous so rapidly. The environment suits well the idea of microservice development (spilling stone monument usefulness into handfuls or many more modest administrations).

Microservices need to speak with one another rapidly — and Node.js is probably the quickest device in information handling. Among the fundamental Node.js benefits for programming development are its non-obstructing algorithms.

Node.js measures a few demands all at once without trusting that the first will be concluded. Many microservices can send messages to one another, and they will be gotten and addressed all the while.

Versatile Web Application Development

Node.js was worked in view of adaptability — its name really says it. The environment permits numerous hubs to run all the while and speak with one another. Here’s the reason Node.js adaptability is better than other web backend development arrangements.

Node.js has a module that is liable for load adjusting for each running CPU center. This is one of numerous Node.js module benefits: you can run various hubs all at once, and the environment will naturally adjust the responsibility.

Node.js permits even apportioning: you can part your application into various situations. You show various forms of the application to different clients, in light of their age, interests, area, language, and so on. This builds personalization and diminishes responsibility. Hub accomplishes this with kid measures — tasks that rapidly speak with one another and share a similar root.

What’s more, Node’s non-hindering solicitation handling framework adds to fast, letting applications measure a great many solicitations.

Control Stream Highlights

Numerous designers consider nonconcurrent to be one of the two impediments and benefits of Node.js web application development. In Node, at whatever point the capacity is executed, the code consequently sends a callback. As the quantity of capacities develops, so does the number of callbacks — and you end up in a circumstance known as the callback damnation.

In any case, Node.js offers an exit plan. You can utilize systems that will plan capacities and sort through callbacks. Systems will associate comparable capacities consequently — so you can track down an essential component via search or in an envelope. At that point, there’s no compelling reason to look through callbacks.

Final Words

So, these are some of the top benefits of Nodejs in web application development. This is how Nodejs is contributing a lot to the field of web application development.

I hope now you are totally aware of the whole process of how Nodejs is really important for your web project. If you are looking to hire a node js development company in India then I would suggest that you take a little consultancy too whenever you call.

Good Luck!

Original Source

#node.js development company in india #node js development company #hire node js developers #hire node.js developers in india #node.js development services #node.js development

ReactJS Based Comic Strip Creator using Fabric.js Canvas Rendering

React Komik!

Usage

NPM modules

UMD Browser

Demo

Components

Strip

Panel

Character

Balloon

Contributing

JS Comic

Download Details:

What is GEEK

Buddha Community

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Status

Goals and features

Requirements

How does this tool work?

Usage

Macros

Startup time

Dependencies

NPM dependencies

Classpath

Current file

Reagent

Promesa

Js-interop

Examples

API

Migrating to shadow-cljs

Build

ReactJS Based Comic Strip Creator using Fabric.js Canvas Rendering

React Komik!

Usage

NPM modules

UMD Browser

Demo

Components

Strip

Panel

Character

Balloon

Contributing

JS Comic

Download Details:

Easy Activity Tracking for Models, Similar to Github's Public Activity

PublicActivity

!! WARNING: README for unreleased version below. !!

About

Tutorials

Screencast

Tutorial

Online demo

Setup

Gem installation

Database setup

Model configuration

Custom activities

Displaying activities

Layouts

Locals

Activity views

i18n

Testing

Documentation

Common examples

Set the Activity's owner to current_user by default

Disable tracking for a class or globally

Create custom activities

Instant options

Use custom fields on Activity

Set owner and recipient based on associations

Resolve parameters from a Symbol or Proc

Setup

Migration

Set `owner` and `recipient` based on associations