Amazing animated color bars parallax effect on black & white image while page scrolling.In parallaxColorBars you can now add settings using the data-parallax-color-bar attribute. You still need to call $(element).parallaxColorBars() to initialize parallaxColorBars on the element. Demo
Every day millions of users are commuting on the electronic highway. For you as a web developer you want to ensure that your website is adapted to the needs of the modern user and that you're not putting up road blocks, forcing users to take side roads.
Using modern web standards you can remove these road blocks and optimise your website to accommodate all users regardless of the browser they're using.
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css');
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve(),
commonjs(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
}; {
"name": "svelte-app",
"version": "1.0.0",
"devDependencies": {
"npm-run-all": "^4.1.5",
"rollup": "^1.10.1",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-resolve": "^4.2.3",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^4.0.4",
"sirv-cli": "^0.4.0",
"svelte": "^3.0.0"
},
"scripts": {
"build": "rollup -c",
"autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild",
"start": "sirv public",
"start:dev": "sirv public --dev"
}
} | build | برای ساخت و ایجاد خروجی‌های برنامه توسط rollup مورد قرار استفاده میگیرد. |
| autobuild | مانند build برای ساخت خروجی‌های نهایی برنامه استفاده میشود. ولی تفاوتی که دارد پس از هر تغییر در سورس کد برنامه به صورت خودکار build جدیدی پس از اجرای آن گرفته میشود. |
| dev | برنامه را درحالت Developer Mode اجرا میکند که برای مشاهده تغییرات به صورت خودکار در browser، بدون نیاز به رفرش صفحه و همینطور عیب یابی برنامه مناسب است. |
| start | از طریق sirv که یک وب سرور سبک برای هاست کردن سایت‌های استاتیک است، برنامه را هاست میکند. |
| start:dev | مانند start است با این تفاوت که برنامه را در حالت Developer Mode هاست میکند که میتواند برای عیب یابی برنامه از آن استفاده کرد؛ چرا که سورس برنامه از طریق source Map قابل دسترس خواهد بود. |
<script>
export let name;
</script>
<style>
h1 {
color: purple;
}
</style>
<h1>Hello {name}!</h1> import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app; 
The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. Unfortunately different browsers understand differnt font types. This service allows you to generate css rule and font files that makes your font work in all the browsers that support font-face or webfonts.
When you start working on a new web application you will probably need to analyze different tools to deal with the different functionalities that you have to work on. As soon as you start searching for alternatives you are going to run across Angular and React, they are without any doubt two of the major options to consider, at least till today.
Developer Survey Results 2019
Angular Developer Survey 2018
Web Developer Checklist
