1584091440
A modal that loves scrollable content.
This component has been built with react-native-gesture-handler
to address the common issue of scrolling, swipping and handling the keyboard behaviors, you can face with react-native’s modal. This component comes with a ScrollView, the default content renderer, a FlatList and a SectionList. They are all three built-in and make your life easier, just pass your content and Modalize will handle the rest for you.
yarn add react-native-modalize
If you are not using expo, you will have to install react-native-gesture-handler
yarn add react-native-gesture-handler
Check out react-native-gesture-handler
’s documentation to set it up.
Here is the quick how-to example:
import React, { useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Modalize } from 'react-native-modalize';
export const MyApp = () => {
const modalRef = useRef(null);
const onOpen = () => {
const modal = modalRef.current;
if (modal) {
modal.open();
}
};
return (
<>
<TouchableOpacity onPress={onOpen}>
<Text>Open the modal</Text>
</TouchableOpacity>
<Modalize ref={modalRef}>...your content</Modalize>
</>
);
};
The full documentation is available here. There is multiple examples runing through differents navigators, with more informations here.
Author: jeremybarbet
Live Demo: https://jeremybarbet.github.io/react-native-modalize
GitHub: https://github.com/jeremybarbet/react-native-modalize
#react-native #programming
1661169600
Make Pop-Up Modal Window In Vanilla JavaScript
Learn how to create a simple responsive pop-up modal window using Vanilla JavaScript along with HTML and CSS with a bit of Flexbox.
Declare a <button> HTML element with an id open-modal.
<button id="open-modal">Open Modal Window</button>
The goal is when a user presses this button, the pop-up modal window will open.
Style the button using CSS Flexbox and centre it on the screen.
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 10px;
font-size: 1.1em;
background: #32bacf;
color: white;
border: none;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
button:hover {
background: rgba(0, 0, 0, 0.7);
}
Normally, pop-up modal windows have overlays with a transparent darker background that covers the entire browser screen.
Define a div with an id model-overlay which will cover the entire screen.
<div id="modal-overlay">
<div>
Then, make it to full screen using height:100vh CSS property.
Bring it in front of the button by using position:absolute with a transparent background colour.
#modal-overlay {
width: 100%;
height: 100vh;
position: absolute;
background: rgba(0, 0, 0, 0.7);
}
I just added the border to see the boundaries of the modal-overlay element.
Create a div with an id modal inside the modal-overlay element, which will be an actually pop-up modal window that user interacts with.
<div id="modal-overlay">
<div id="modal">
</div>
<div>
Add CSS style to make it visible on the screen.
Adding width:100% and max-width:650px will make sure the width of the pop-up modal window won’t exceed when the browser width is more than 650px.
If the browser width is less than 650px, the pop-up modal window will stretch the width to fill the screen which is normally for mobile viewports.
#modal-overlay #modal {
max-width: 650px;
width: 100%;
background: white;
height: 400px;
}
Centre the pop-up modal window to the screen using Flexbox.
To do that, just add the three lines of Flexbox code to the modal-overlay which are
#modal-overlay {
...
display: flex;
align-items: center;
justify-content: center;
}
Now we have the basic pop-up modal window designed using CSS.
Make it visible when a user presses the open modal button.
To do that,
First, hide the modal overlay by default by changing its display property from flex to none.
#modal-overlay {
...
display: none; // Changed from flex to none
align-items: center;
justify-content: center;
}
Create a DOM reference to the open-modal button as well as the modal-overlay elements.
const openModalButton = document.getElementById("open-modal");
const modalWindowOverlay = document.getElementById("modal-overlay");
Attach a click event to the openModalButton with the callback arrow function showModalWindow.
const showModalWindow = () => {
modalWindowOverlay.style.display = 'flex';
}
openModalButton.addEventListener("click", showModalWindow);
Set the display property of the modalWindowOverlay to flex inside showModalWindow() function which will open up the modal window.
As you can see, there is no way we can close/hide the pop-up modalwindow after its became visible on the screen.
Let’s fix it!
Typically, there will be a close button on the top or bottom right side of the pop-up modal window.
Let’s add a close button on the bottom left side of the modal window.
Define header, content and footer HTML elements inside the pop-up modal window.
<div id="modal">
<div class="modal-header">
<h2>Modal Pop Up Window</h2>
</div>
<div class="modal-content">
<p>Modal Content</p>
</div>
<div class="modal-footer">
<button id="close-modal">Close</button>
<button>Save</button>
</div>
</div>
Generally, you’ll have two buttons on the footer of the pop-up modal window, which may be save and close.
Let’s push the buttons to the bottom using Flexbox.
Turn the display property of the pop-up modal window to flex and set the flex direction to column.
1620992479
In this digital world, online businesses aspire to catch the attention of users in a modern and smarter way. To achieve it, they need to traverse through new approaches. Here comes to spotlight is the user-generated content or UGC.
What is user-generated content?
“ It is the content by users for users.”
Generally, the UGC is the unbiased content created and published by the brand users, social media followers, fans, and influencers that highlight their experiences with the products or services. User-generated content has superseded other marketing trends and fallen into the advertising feeds of brands. Today, more than 86 percent of companies use user-generated content as part of their marketing strategy.
In this article, we have explained the ten best ideas to create wonderful user-generated content for your brand. Let’s start without any further ado.
Generally, social media platforms help the brand to generate content for your users. Any user content that promotes your brand on the social media platform is the user-generated content for your business. When users create and share content on social media, they get 28% higher engagement than a standard company post.
Furthermore, you can embed your social media feed on your website also. you can use the Social Stream Designer WordPress plugin that will integrate various social media feeds from different social media platforms like Facebook, Twitter, Instagram, and many more. With this plugin, you can create a responsive wall on your WordPress website or blog in a few minutes. In addition to this, the plugin also provides more than 40 customization options to make your social stream feeds more attractive.
In general, surveys can be used to figure out attitudes, reactions, to evaluate customer satisfaction, estimate their opinions about different problems. Another benefit of customer surveys is that collecting outcomes can be quick. Within a few minutes, you can design and load a customer feedback survey and send it to your customers for their response. From the customer survey data, you can find your strengths, weaknesses, and get the right way to improve them to gain more customers.
Additionally, it is the best way to convert your brand leads to valuable customers. The key to running a successful contest is to make sure that the reward is fair enough to motivate your participation. If the product is relevant to your participant, then chances are they were looking for it in the first place, and giving it to them for free just made you move forward ahead of your competitors. They will most likely purchase more if your product or service satisfies them.
Furthermore, running contests also improve the customer-brand relationship and allows more people to participate in it. It will drive a real result for your online business. If your WordPress website has Google Analytics, then track contest page visits, referral traffic, other website traffic, and many more.
The business reviews help your consumers to make a buying decision without any hurdle. While you may decide to remove all the negative reviews about your business, those are still valuable user-generated content that provides honest opinions from real users. Customer feedback can help you with what needs to be improved with your products or services. This thing is not only beneficial to the next customer but your business as a whole.
Reviews are powerful as the platform they are built upon. That is the reason it is important to gather reviews from third-party review websites like Google review, Facebook review, and many more, or direct reviews on a website. It is the most vital form of feedback that can help brands grow globally and motivate audience interactions.
However, you can also invite your customers to share their unique or successful testimonials. It is a great way to display your products while inspiring others to purchase from your website.
Moreover, Instagram videos create around 3x more comments rather than Instagram photo posts. Instagram videos generally include short videos posted by real customers on Instagram with the tag of a particular brand. Brands can repost the stories as user-generated content to engage more audiences and create valid promotions on social media.
Similarly, imagine you are browsing a YouTube channel, and you look at a brand being supported by some authentic customers through a small video. So, it will catch your attention. With the videos, they can tell you about the branded products, especially the unboxing videos displaying all the inside products and how well it works for them. That type of video is enough to create a sense of desire in the consumers.
#how to get more user generated content #importance of user generated content #user generated content #user generated content advantages #user generated content best practices #user generated content pros and cons
1617797839
#css share modal #modal dialog box #popup share modal #share modal #share modal in javascript
1653075360
HAML-Lint
haml-lint
is a tool to help keep your HAML files clean and readable. In addition to HAML-specific style and lint checks, it integrates with RuboCop to bring its powerful static analysis tools to your HAML documents.
You can run haml-lint
manually from the command line, or integrate it into your SCM hooks.
gem install haml_lint
If you'd rather install haml-lint
using bundler
, don't require
it in your Gemfile
:
gem 'haml_lint', require: false
Then you can still use haml-lint
from the command line, but its source code won't be auto-loaded inside your application.
Run haml-lint
from the command line by passing in a directory (or multiple directories) to recursively scan:
haml-lint app/views/
You can also specify a list of files explicitly:
haml-lint app/**/*.html.haml
haml-lint
will output any problems with your HAML, including the offending filename and line number.
haml-lint
assumes all files are encoded in UTF-8.
Command Line Flag | Description |
---|---|
--auto-gen-config | Generate a configuration file acting as a TODO list |
--auto-gen-exclude-limit | Number of failures to allow in the TODO list before the entire rule is excluded |
-c /--config | Specify which configuration file to use |
-e /--exclude | Exclude one or more files from being linted |
-i /--include-linter | Specify which linters you specifically want to run |
-x /--exclude-linter | Specify which linters you don't want to run |
-r /--reporter | Specify which reporter you want to use to generate the output |
-p /--parallel | Run linters in parallel using available CPUs |
--fail-fast | Specify whether to fail after the first file with lint |
--fail-level | Specify the minimum severity (warning or error) for which the lint should fail |
--[no-]color | Whether to output in color |
--[no-]summary | Whether to output a summary in the default reporter |
--show-linters | Show all registered linters |
--show-reporters | Display available reporters |
-h /--help | Show command line flag documentation |
-v /--version | Show haml-lint version |
-V /--verbose-version | Show haml-lint , haml , and ruby version information |
haml-lint
will automatically recognize and load any file with the name .haml-lint.yml
as a configuration file. It loads the configuration based on the directory haml-lint
is being run from, ascending until a configuration file is found. Any configuration loaded is automatically merged with the default configuration (see config/default.yml
).
Here's an example configuration file:
linters:
ImplicitDiv:
enabled: false
severity: error
LineLength:
max: 100
All linters have an enabled
option which can be true
or false
, which controls whether the linter is run, along with linter-specific options. The defaults are defined in config/default.yml
.
Option | Description |
---|---|
enabled | If false , this linter will never be run. This takes precedence over any other option. |
include | List of files or glob patterns to scope this linter to. This narrows down any files specified via the command line. |
exclude | List of files or glob patterns to exclude from this linter. This excludes any files specified via the command line or already filtered via the include option. |
severity | The severity of the linter. External tools consuming haml-lint output can use this to determine whether to warn or error based on the lints reported. |
The exclude
global configuration option allows you to specify a list of files or glob patterns to exclude from all linters. This is useful for ignoring third-party code that you don't maintain or care to lint. You can specify a single string or a list of strings for this option.
Some static blog generators such as Jekyll include leading frontmatter to the template for their own tracking purposes. haml-lint
allows you to ignore these headers by specifying the skip_frontmatter
option in your .haml-lint.yml
configuration:
skip_frontmatter: true
The inherits_from
global configuration option allows you to specify an inheritance chain for a configuration file. It accepts either a scalar value of a single file name or a vector of multiple files to inherit from. The inherited files are resolved in a first in, first out order and with "last one wins" precedence. For example:
inherits_from:
- .shared_haml-lint.yml
- .personal_haml-lint.yml
First, the default configuration is loaded. Then the .shared_haml-lint.yml
configuration is loaded, followed by .personal_haml-lint.yml
. Each of these overwrite each other in the event of a collision in configuration value. Once the inheritance chain is resolved, the base configuration is loaded and applies its rules to overwrite any in the intermediate configuration.
Lastly, in order to match your RuboCop configuration style, you can also use the inherit_from
directive, which is an alias for inherits_from
.
haml-lint
is an opinionated tool that helps you enforce a consistent style in your HAML files. As an opinionated tool, we've had to make calls about what we think are the "best" style conventions, even when there are often reasonable arguments for more than one possible style. While all of our choices have a rational basis, we think that the opinions themselves are less important than the fact that haml-lint
provides us with an automated and low-cost means of enforcing consistency.
Add the following to your configuration file:
require:
- './relative/path/to/my_first_linter.rb'
- 'absolute/path/to/my_second_linter.rb'
The files that are referenced by this config should have the following structure:
module HamlLint
# MyFirstLinter is the name of the linter in this example, but it can be anything
class Linter::MyFirstLinter < Linter
include LinterRegistry
def visit_tag
return unless node.tag_name == 'div'
record_lint(node, "You're not allowed divs!")
end
end
end
For more information on the different types on HAML node, please look through the HAML parser code: https://github.com/haml/haml/blob/master/lib/haml/parser.rb
Keep in mind that by default your linter will be disabled by default. So you will need to enable it in your configuration file to have it run.
One or more individual linters can be disabled locally in a file by adding a directive comment. These comments look like the following:
-# haml-lint:disable AltText, LineLength
[...]
-# haml-lint:enable AltText, LineLength
You can disable all linters for a section with the following:
-# haml-lint:disable all
A directive will disable the given linters for the scope of the block. This scope is inherited by child elements and sibling elements that come after the comment. For example:
-# haml-lint:disable AltText
#content
%img#will-not-show-lint-1{ src: "will-not-show-lint-1.png" }
-# haml-lint:enable AltText
%img#will-show-lint-1{ src: "will-show-lint-1.png" }
.sidebar
%img#will-show-lint-2{ src: "will-show-lint-2.png" }
%img#will-not-show-lint-2{ src: "will-not-show-lint-2.png" }
The #will-not-show-lint-1
image on line 2 will not raise an AltText
lint because of the directive on line 1. Since that directive is at the top level of the tree, it applies everywhere.
However, on line 4, the directive enables the AltText
linter for the remainder of the #content
element's content. This means that the #will-show-lint-1
image on line 5 will raise an AltText
lint because it is a sibling of the enabling directive that appears later in the #content
element. Likewise, the #will-show-lint-2
image on line 7 will raise an AltText
lint because it is a child of a sibling of the enabling directive.
Lastly, the #will-not-show-lint-2
image on line 8 will not raise an AltText
lint because the enabling directive on line 4 exists in a separate element and is not a sibling of the it.
If there are multiple directives for the same linter in an element, the last directive wins. For example:
-# haml-lint:enable AltText
%p Hello, world!
-# haml-lint:disable AltText
%img#will-not-show-lint{ src: "will-not-show-lint.png" }
There are two conflicting directives for the AltText
linter. The first one enables it, but the second one disables it. Since the disable directive came later, the #will-not-show-lint
element will not raise an AltText
lint.
You can use this functionality to selectively enable directives within a file by first using the haml-lint:disable all
directive to disable all linters in the file, then selectively using haml-lint:enable
to enable linters one at a time.
Adding a new linter into a project that wasn't previously using one can be a daunting task. To help ease the pain of starting to use Haml-Lint, you can generate a configuration file that will exclude all linters from reporting lint in files that currently have lint. This gives you something similar to a to-do list where the violations that you had when you started using Haml-Lint are listed for you to whittle away, but ensuring that any views you create going forward are properly linted.
To use this functionality, call Haml-Lint like:
haml-lint --auto-gen-config
This will generate a .haml-lint_todo.yml
file that contains all existing lint as exclusions. You can then add inherits_from: .haml-lint_todo.yml
to your .haml-lint.yml
configuration file to ensure these exclusions are used whenever you call haml-lint
.
By default, any rules with more than 15 violations will be disabled in the todo-file. You can increase this limit with the auto-gen-exclude-limit
option:
haml-lint --auto-gen-config --auto-gen-exclude-limit 100
If you use vim
, you can have haml-lint
automatically run against your HAML files after saving by using the Syntastic plugin. If you already have the plugin, just add let g:syntastic_haml_checkers = ['haml_lint']
to your .vimrc
.
If you use vim
8+ or Neovim
, you can have haml-lint
automatically run against your HAML files as you type by using the Asynchronous Lint Engine (ALE) plugin. ALE will automatically lint your HAML files if it detects haml-lint
in your PATH
.
If you use SublimeLinter 3
with Sublime Text 3
you can install the SublimeLinter-haml-lint plugin using Package Control.
If you use atom
, you can install the linter-haml plugin.
If you use TextMate 2
, you can install the Haml-Lint.tmbundle bundle.
If you use Visual Studio Code
, you can install the Haml Lint extension
If you'd like to integrate haml-lint
into your Git workflow, check out our Git hook manager, overcommit.
To execute haml-lint
via a Rake task, make sure you have rake
included in your gem path (e.g. via Gemfile
) add the following to your Rakefile
:
require 'haml_lint/rake_task'
HamlLint::RakeTask.new
By default, when you execute rake haml_lint
, the above configuration is equivalent to running haml-lint .
, which will lint all .haml
files in the current directory and its descendants.
You can customize your task by writing:
require 'haml_lint/rake_task'
HamlLint::RakeTask.new do |t|
t.config = 'custom/config.yml'
t.files = ['app/views', 'custom/*.haml']
t.quiet = true # Don't display output from haml-lint to STDOUT
end
You can also use this custom configuration with a set of files specified via the command line:
# Single quotes prevent shell glob expansion
rake 'haml_lint[app/views, custom/*.haml]'
Files specified in this manner take precedence over the task's files
attribute.
Code documentation is generated with YARD and hosted by RubyDoc.info.
We love getting feedback with or without pull requests. If you do add a new feature, please add tests so that we can avoid breaking it in the future.
Speaking of tests, we use Appraisal to test against both HAML 4 and 5. We use rspec
to write our tests. To run the test suite, execute the following from the root directory of the repository:
appraisal bundle install
appraisal bundle exec rspec
All major discussion surrounding HAML-Lint happens on the GitHub issues page.
If you're interested in seeing the changes and bug fixes between each version of haml-lint
, read the HAML-Lint Changelog.
Author: sds
Source Code: https://github.com/sds/haml-lint
License: MIT license
1602560783
In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.
To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.
Sub-topics discussed :
In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).
From new project window, Select Asp.Net Core Web Application_._
Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.
Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.
Now let’s define DB model class file – /Models/TransactionModel.cs.
public class TransactionModel
{
[Key]
public int TransactionId { get; set; }
[Column(TypeName ="nvarchar(12)")]
[DisplayName("Account Number")]
[Required(ErrorMessage ="This Field is required.")]
[MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
public string AccountNumber { get; set; }
[Column(TypeName ="nvarchar(100)")]
[DisplayName("Beneficiary Name")]
[Required(ErrorMessage = "This Field is required.")]
public string BeneficiaryName { get; set; }
[Column(TypeName ="nvarchar(100)")]
[DisplayName("Bank Name")]
[Required(ErrorMessage = "This Field is required.")]
public string BankName { get; set; }
[Column(TypeName ="nvarchar(11)")]
[DisplayName("SWIFT Code")]
[Required(ErrorMessage = "This Field is required.")]
[MaxLength(11)]
public string SWIFTCode { get; set; }
[DisplayName("Amount")]
[Required(ErrorMessage = "This Field is required.")]
public int Amount { get; set; }
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
public DateTime Date { get; set; }
}
C#Copy
Here we’ve defined model properties for the transaction with proper validation. Now let’s define DbContextclass for EF Core.
#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup