وبلاگها و سایتهای ایرانی
Visual Studio
ASP. Net
طراحی وب
اسکیوال سرور
به روز رسانیها
سیشارپ
عمومی دات نت
PHP
متفرقه
یک نکتهی تکمیلی: اکثر مشکلات گزارش شدهی CSP، ناشی از افزونههای کاربران هستند!
اگر CSP را بر روی سایت خود فعال کنید و گزارشات رسیدهی آنرا بررسی کنید، بیش از همهچیز، به خطاهایی مانند گزارش زیر خواهید رسید:
{ "csp-report":{ "blocked-uri":"inline", "column-number":74344, "disposition":"enforce", "document-uri":"https://www.dntips.ir/news/details/19227", "effective-directive":"script-src-elem", "line-number":1, "referrer":"https://www.dntips.ir/", "source-file":"moz-extension", "status-code":200, "violated-directive":"script-src-elem" } }
این خطاها، ناشی از دستکاری محتوای صفحه، توسط افزونههای ثالث نصب شدهی در مرورگرهاست! برای مثال افزونهای را نصب کردهاند تا فونت پیشفرض صفحه را تغییر دهد که به دلیل فعال بودن CSP، توسط مرورگر برگشت زده میشود. لیستی از مواردی را که میتوانید در این زمینه انتظار داشته باشید، در اینجا قابل مطالعه هستند.
> npm install -g tslint typescript
class Tweet { state = {}; render() { } }
> npm install -g npm@latest
> npm i -g create-react-app
> npm i -g typescript eslint tslint eslint-plugin-react-hooks
> create-react-app sample-01
> cd sample-01 > npm start
"files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/node_modules": true, "**/wwwroot": true, "**/bower_components": true, "**/**/bin": true, "**/**/obj": true, "**/packages": true },
<body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>
return ( <div className="App"> <header className="App-header"> ... </header> </div> );
const element = <h1>Hello World!</h1>;
"use strict"; var element = React.createElement("h1", null, "Hello World!");
import React from "react"; const element = <h1>Hello World!</h1>; console.log(element);
import React from "react"; import ReactDOM from "react-dom"; const element = <h1>Hello World!</h1>; console.log(element); ReactDOM.render(element, document.getElementById("root"));
{ "name": "sample-01", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.11.0", "react-dom": "^16.11.0", "react-scripts": "3.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
حتما تا به حال در وب سایتهای زیادی قسمت هایی را دیده اید که چیدمان عناصر آن به شکل زیر است:
این گونه چیدمان را حتما در منوی Start ویندوز 8 بارها دیدهاید! عناصر تشکیل دهندهی این شکل از چیدمان، میتوانند یک سری عکس باشند که تشکیل یک گالری عکس را دادهاند و یا یک سری div که محتوای پستهای یک وبلاگ را در خود جای دادهاند. چیزی که این شکل از چیدمان عناصر را نسبت به چیدمانهای معمول متمایز میکند این است که طول و عرض هر یک از این عناصر با یکدیگر متفاوت است و هدف از این گونه چیدمان آن است که این عناصر در فضایی که به آنها اختصاص داده شده است، به صورت بهینه قرار گیرند تا کمترین فضا هدر رود.
برای اعمال این شکل از چیدمان در دنیای وب افزونههای زیادی بر فراز کتاب خانهی jQuery تدارک دیده شده است که از جمله مطرحترین آنها میتوان به افزونه های Isotope ، Masonry و Gridster اشاره کرد.
افزونهی Isotope مزایایی را برای من در پی داشت و این افزونه را برای انجام کارهای خود، مناسب دیدم. نکتهی مهم اینجا است که هدف من بررسی Isotope نیست، چرا که اگر به وب سایت آن مراجعه کنید، با کوهی از مستندات مواجه میشوید که چگونه از آن در وب سایتهای معمولی استفاده کنید.
در این مقاله قصد من این است که نشان دهم چگونه از افزونهی Isotope در AngularJS استفاده کنیم؛ چگونه چیدمان آن را راست به چپ کنیم و چگونه آن را با محیطهای واکنش گرا (Responsive) سازگار کنیم.
فرض کنید در یک وب سایت قصد داریم اطلاعات یک سری مطلب خبری را از سرور، به فرمت JSON دریافت کرده و نمایش دهیم. در AngularJS شیوهی کار بدین صورت است که اطلاعاتی که به فرمت JSON هستند را با استفاده از directive ایی به نام ng-repeat پیمایش کرده و آنها را نمایش دهیم. حال اگر بخواهیم چیدمان مطالب را با استفاده از Isotope تغییر دهیم، میبینیم که هیچ چیزی نمایش داده نمیشود. دلیل آن بر میگردد به مراحل کامپایل کردن AngularJS و نامشخص بودن زمان اعمال چیدمان Isotope به عناصر است.
در AngularJS هنگامیکه با دستکاری DOM سر و کار پیدا میکنیم، معمولا باید به سراغ Directiveها رفت و یک Directive سفارشی برای کار با Isotope تعریف کرد تا با مکانیزمهای Angular سازگار باشد. خوشبختانه Directive Isotope برای Angular موجود میباشد. نکتهی مهم این است که این Directive برای نگارش 1 افزونهی Isotope نوشته شده است. البته با نگارش 2 هم کار میکند که من برای انجام کار خود نسخهی 1 را ترجیح دادم استفاده کنم.
نکتهی بعدی که باید رعایت شود این است که چیدمان عناصر باید از راست به چپ شوند. خوشبختانه این کار در نسخهی 1 Isotope با تغییر کوچکی در سورس Isotope و تغییر یک تابع انجام میشود. گویا نسخهی دوم امکان پیش فرضی را برای این کار دارد، اما نتوانستم آن را به خوبی پیاده سازی کنم و به همین دلیل ترجیح دادم از همان نسخهی اول استفاده کنم.
برای اینکه در هنگام جابه جا شدن عناصر، انیمیشنها نیز از راست به چپ انجام شوند، باید cssهای زیر را نیز اعمال نمود:
.isotope .isotope-item { -webkit-transition-property: right, top, -webkit-transform, opacity; -moz-transition-property: right, top, -moz-transform, opacity; -ms-transition-property: right, top, -ms-transform, opacity; -o-transition-property: right, top, -o-transform, opacity; transition-property: right, top, transform, opacity; }
Responsive بودن این عناصر مسئلهی دیگری است که باید حل گردد. امروزه اکثر فریم ورکهای مطرح css، واکنشگرا نیز هستند و برای پشتیبانی از سایزهای متفاوت صفحه نمایش، تدابیری در نظر گرفتهاند. اساس کار واکنش گرا بودن این فریم ورکها در تعیین ابعاد عناصر، بیان ابعاد به صورت درصدی است. مثلا فلان عرض div برابر 50% باشد بدین معناست که همیشه عرض این div نصف عرض عنصر والد آن باشد.
متاسفانه Isotope میانهی چندانی با این ابعاد درصدی ندارد و باید عرض عناصر به صورت دقیق و بر حسب پیکسل بیان شود. البته نسخهی جدید آن و یا حتی پلاگین هایی برای کار با ابعاد درصدی نیز تدارک دیده شده است که به شخصه به نتیجهی با کیفیتی نرسیدم.
@media (min-width: 768px) and (max-width: 980px) { .card { width: 320px; } } @media (min-width: 980px) and (max-width: 1200px) { .card { width: 260px; } } @media (min-width: 1200px) { .card { width: 340px; } }
app.directive('imageOnload', function () { return { restrict: 'A', link: function (scope, element, attrs) { element.bind('load', function () { scope.$emit('iso-method', { name: 'reLayout', params: null }); // call reLayout isotope methode prevent overlaaping the items }); } }; });
$(window).resize(function () { $timeout(function myfunction() { $scope.$broadcast('iso-method', { name: 'reLayout', params: null }); // call reLayout isotope methode prevent overlaaping the items },1000); });
با استفاده از Destructuring assignments میتوانید خصوصیات را از آرایهها یا اشیاء، با هر میزان عمقی استخراج کنید.
someObject = { a: 'value for a', b: 'value for b' } { a, b } = someObject console.log "a is '#{a}', b is '#{b}'"
var a, b, someObject; someObject = { a: 'value for a', b: 'value for b' }; a = someObject.a, b = someObject.b; console.log("a is '" + a + "', b is '" + b + "'");
{join, resolve} = require('path') join('/Users', 'Vahid')
استفاده از کتابخانههای خارجی دقیقا مانند فراخوانی توابع CoffeeScript است. در پایان نوشتن کدهای CoffeeScript، همه به جاوااسکریپت تبدیل میشوند:
# Use local alias $ = jQuery $ -> # DOMContentLoaded $(".el").click -> alert("Clicked!")
var $; $ = jQuery; $(function() { return $(".el").click(function() { return alert("Clicked!"); }); });
# Execute function immediately type = do -> classToType = {} for name in "Boolean Number String Function Array Date RegExp Undefined Null".split(" ") classToType["[object " + name + "]"] = name.toLowerCase() # Return a function (obj) -> strType = Object::toString.call(obj) classToType[strType] or "object"
var type; type = (function() { var classToType, i, len, name, ref; classToType = {}; ref = "Boolean Number String Function Array Date RegExp Undefined Null".split(" "); for (i = 0, len = ref.length; i < len; i++) { name = ref[i]; classToType["[object " + name + "]"] = name.toLowerCase(); } return function(obj) { var strType; strType = Object.prototype.toString.call(obj); return classToType[strType] || "object"; }; })();