این هفته در وب #۱

در این سری نوشته‌ها به معرفی مطالب، مقالات، برنامه‌ها، اپلیکیشن‌ها، ویدیوها، فیلم‌ها، پادکست‌ها و موزیک‌هایی که در طول هفته با آنها برخورد کرده‌ام میپردازم مسلما تمرکز این مطالب بر روی طراحی وب بوده ولی هیچ محدودیتی در این زمینه وجود ندارد و ممکن است در هر زمینه‌ای چیزی اینجا پیدا کنید. انتظار میره که این نوشته‌ها هر چهارشنبه ساعت ۸ شب منتشر بشه.

وب را از مرگ نجات دهیم

The Web We Have to Save

در یکی از جدیدترین قسمت‌های پادکست همفکر هادی فرنود و حمیدرضا احمدی با حسین درخشان مصاحبه میکنن که اولین مصاحبه فارسی اون بعد از ۱۵ ساله، حسین درخشان چند وقت پیش بعد از ۶ سال تحمل زندان آزاد شد و مقاله‌ای هم منتشر کرد با عنوان “The Web We Have to Save” که در سایت ترجمان هم با عنوان «مرگ وب نزدیک است» ترجمه شد، در این مقاله و پادکست به این موضوع اشاره میشه که با قطبی شدن وب و انحصار قدرت در دست شرکت‌هایی مثل فیس‌بوک و توییتر و اینستاگرام، وب داره از رسالتی که داشت یعنی تمرکز زدایی و ایجاد تنوع فاصله میگیره.

کل ماجرا رو میتونید توی قسمت سوم از فصل سوم پادکست همفکر گوش کنید.

همچنین پیرامون همین موضوع یک‌پزشک مطلبی نوشته با عنوان «سطح مطالب تولیدی و اشتراک‌گذاری‌ها در شبکه‌های اجتماعی و در صدر آنها تلگرام، همچنان نازل است. چطور باید این مسئله را تحلیل کنیم؟ مقصر کیست؟» که خوندنش خالی از لطف نیست.

طراحی مجدد اوبر و ورج

Uber Visual Identity Redesign

تو این هفته دوتا خبر مربوط به طراحی مجدد سایت‌ها بود یکی مربوط به اوبر (مادر اسنپ) و یکی هم مربوط به ورج که تو ۵ سالگیش طراحی سایتش رو تغییر داد.

طراحی مجدد هویت بصری! اوبر

طراحی مجدد سایت ورج

جاوا اسکریپت، React و با باقی قضایا

tdo - Keyboard driven, hackable TODO list

یکی از اپلیکیشن‌هایی که تو هفته‌های پیش دیدم tdo بود که تو این هفته دوباره رفتم سراغش تا به لطف متن‌باز بودنش ببینم چجوری نوشته شده، ولی افسوس که حتی نفهمیدم از چه زبونی تو نوشتنش استفاده شده البته یکم که بیشتر گشتم متوجه شدم احتمالا با React نوشته شد و خب من هم ترغیب شدم تا برم یکم React یاد بگیرم.

آموزش‌های زیادی برای React روی وب وجود داره، یکی از اونها که مجانی هم هست مال سایت Code School هست با عنوان “Powering Up With React“.

چیزی که مسلمه جاوا اسکریپت و فریم‌ورک‌هاش تو سال‌های اخیر خیلی فراگیر شدن و میشه گفت هر روز یک فریم‌ورک جدید درست میشه، بد نیست که این مطلب طنزگونه! رو هم یه نگاهی بکنیم در مورد اینکه جاوا اسکریپت یاد گرفتن تو سال ۲۰۱۶ چه حسی داره.

شناخت استرس و راه‌های غلبه بر آن

درسنامه - شناخت استرس و راه‌های غلبه بر آن

این هفته در دوره «شناخت استرس و راه‌های غلبه بر آن» درسنامه شرکت کردم به شما هم پیشنهاد میکنم.

نمایش موسیو ابراهیم

نمایش موسیو ابراهیم

تئاتر موسیو ابراهیم تا ۱۸ آبان ۱۳۹۵ ادامه داره. برای خرید بلیت نمایش موسیو ابراهیم به تیوال مراجعه کنید.

موسیقی

Magic Slim

گوش فرا میدیم به آهنگ Cold Hearted Woman از Magic Slim

چرا گنو/لینوکس رو دوست دارم: ویرایش تگ‌های فایل‌های صوتی در خط فرمان

البته که عنوان این پست زیاد درست نیست چون من کاربر لینوکس نیستم و از مک او اس استفاده میکنم ولی بالاخره خط فرمان خط فرمانه و خوبش هم تو لینوکس پیدا میشه هم تو مک.

ناملیک از سایت‌های خیلی خوب برای پادکست کوش کردنه و یکی از پادکست‌هایی که من تو این سایت دنبال میکنم سری داستان شب هست، علاوه بر داستانی که هر شب تو این سری پادکست‌ها منتشر میشه یک کتاب کامل هم بطور هفتگی خونده میشه و تا حالا کتاب‌هایی مثل خداحافظ گاری گوپر و سووشون و صد سال تنهایی خونده شده.

تا چند وقت پیش ناملیک دکمه دانلود هم داشت و میشد که فایل پادکست رو دانلود کرد ولی چند وقتیه که برداشته شده (البته فقط کدش کامنت شده) ولی بازم میشه فایل‌هارو پیدا کرد و دانلود کرد. اما مشکل اینجاس که اسم فایل‌ها مشخص نمیکنه که محتوی فایل چیه (اسم فایل‌ها شبیه اینه 5806751faa1c4.mp3) اما مشخصات کامل توی تگ‌های فایل وجود داره مثل عنوان و راوی و غیره.

کاری که من میخواستم بکنم این بود که عنوان رو از تگ‌های فایل بخونم و فایل رو به اون عنوان تغییر نام بدم، برای خوندن مشخصات فایل ابزاری وجود داره به اسم avconv که بخشی از libav هست و خب تو مک راحت میشه با brew نصبش کرد:

brew install libav

avconv دستوری داره به این شکل که تمام تگ‌های فایل رو نشون میده:

avconv -i FILENAME

حالا باید کاری کنم که از این اطلاعات فقط عنوان رو بیرون بکشم برای این کار هم از grep استفاده میکنم و البته چون دو تا عنوان توی مشخصات فایل وجود داره و من فقط اولی رو میخوام تهش اضافه میکنم -m 1 آخرش میشه یه چیزی شبیه این:

avconv -i "$i" 2>&1 | grep title -m 1

چیزی که این دستور برمیگردونه شبیه زیره و یکم چیزای اضافه توش هست و باید حذفشون کنیم:

title           : 663.صد سال تنهایی (قسمت سی و دوم).mp3

برای حذف کردن این اضافات هم دستوری وجود داره به اسم sed که کارمون رو راه میندازه:

avconv -i "$i" 2>&1 | grep title -m 1 | sed "s/[ ]*title[ ]*: [0-9]*.//; s/.mp3//"

حالا شد! این عنوان فایل که میخواستیم رو برمیگردونه، حالا مونده این عنوان رو بذاریم تو یه متغییر و اسم فایل رو به با اون عوض کنیم و کل جریان رو بذاریم تو یه لوپ که روی همه فایل‌های موجود توی فولدر اجرا بشه، آخر سر دستورمون میشه چیزی شبیه این:

for i in *.mp3; do TITLE=$(avconv -i "$i" 2>&1 | grep title -m 1 | sed "s/[ ]*title[ ]*: [0-9]*.//; s/.mp3//"); echo mv "$i" "$TITLE.mp3"; done;

توسعه پلاگین Content Generator اسکچ برای استفاده از ui Faces

چند روز پیش مطلبی توی مدیوم دیدم که یاد میداد چطور پلاگین Content Generator اسکچ رو به اصطلاح هک کنیم و موارد مصرفش رو گسترش بدیم.

امروز داشتم طرحی توی اسکچ میزدم که لازم داشتم تا در جاهایی از عکس پروفایل افراد استفاده کنم.

خوشبختانه سایت ui Faces برای این کار وجود داره که از قضا API هم داره.

من هم یک نگاهی به پلاگین‌های موجود توی Content Generator انداختم و دیدم که کار یکیشون شبیه کاریه من میخوام انجام بدم، فقط کافی بود یک مقدار تغییر توی کد ایجاد کنم تا با استفاده از API سایت ui Faces یک عکس پروفایل رندم بگیره و بندازه تو اسکچ.

نتیجه شد کدی که اینجا میتونید بهش دسترسی داشته باشین، کافیه این فایل رو بگیرید و بذارید تو پوشه :

Content Generator Sketch Plugin/Images

 

توسعه تم دروپال با Gulp

تو پست قبلی در مورد Grunt حرف زدیم و دیدیم که چطور میشه باهاش کارهای معمول در طول
انجام پروژه رو سریع‌تر و بصورت خودکار انجام بدیم.

پروژه دیگه‌ای که همین کار رو انجام میده Gulp هست، کارش دقیقا شبیه Grunt هست با این تفاوت که شیوه کدنویسی تو اون یکم فرق داره و میشه گفت که ساده‌تر هست و همچنین سرعت انجام وظایف تو اون سریع‌تره.

اگه دوست دارید با گالپ بیشتر آشنا بشید و مرحله به مرحله طریقه کار کردن با اون رو یاد بگیرید میتونید این پست اسمشینگ رو بخونید.

من تو این پست میخوام روش استفاده از گالپ برای توسعه تم دروپال رو توضیح بدم.

نصب و تنظیمات

برای نصب گالپ هم لازمه که روی کامپیوترتون Node.js نصب باشه، ند رو میتونید از بخش دانلود سایتش دانلود و نصب کنید.

بعد از اینکه از نصب بودن ند روی سیستمتون مطمئن شدید نوبت میرسه به نصب خود گالپ، کافیه خط زیر رو توی خط فرمان تایپ کنید:

$ npm install -g gulp

بعد از نصب گالپ میتونید با تایپ کردن خط زیر از درست نصب شدنش مطمئن بشید:

$ gulp --version

نکته: دروپال بطور پیش‌فرض داخل تمام فولدرهای موجود توی فولدر تم رو برای پیدا کردن فایل‌های info و php میگرده و این باعث میشه اگر پلاگین‌های گالپ رو توی شاخه اصلی تم نصب کنید داخل سایتتون مدام با پیغام‌های خطا مواجه بشین.
برای رفع این مشکل باید یک فولدر درست کنید که اسمش با نقطه شروع میشه، دروپال داخل این فولدرهارو نمیگرده، برای مثال من توی این پروژه یک فولدر به اسم .npm درست میکنم و بقیه کارهای مربوط به گالپ رو توی این فولدر انجام میدم.

در کل ساختار فایل‌هامون به این صورت خواهد بود:

.npm
|-- package.json
|-- gulpfile.js
src
|-- sass
|-- js
|-- img
css
js
img

تو فولدر .npm دوتا فایل به اسم‌های package.json و gulpfile.js ایجاد کنید.
داخل فایل package.json خطوط زیر رو کپی کنید:

{
    "name": "GulpExample",
    "description": "Drupal Theming with gulp.",
    "version": "0.0.1",
    "devDependencies": {}
}

این فایل برای مدیریت پلاگین‌های بکار رفته داخل پروژه استفاده میشه.

حالا نوبت میرسه به نصب گالپ در پروژه، خط زیر رو توی خط فرمان اجرا کنید:

npm install --save-dev gulp

تو این پروژه قصد داریم مدیریت کامل فایل‌های تم رو به گالپ بسپاریم، برای این کار از پلاگین‌های زیر استفاده میکنیم:

اول باید هرکدوم از پلاگین‌ها رو به گالپ معرفی کنیم، برای این کار داخل فایل gulpfile.js خطوط زیر رو کپی میکنیم:

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    notify = require('gulp-notify'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    autoprefixer = require('gulp-autoprefixer'),
    CSSminify = require('gulp-minify-css'),
    shell = require('gulp-shell');

در اینجا ما برای هر پلاگین یک متغییر تخصیص دادیم که از این به بعد توی کد از این متغییرها استفاده میکنیم.
قدم بعدی مدیریت پیغام‌های خطاس، گالپ بطور معمول وقتی با خطا مواجه میشه روند اجرای برنامه رو قطع میکنه و بیرون میپره که ما باید جلوی این رو بگیریم برای این کار از دو پلاگین gulp-plumber و gulp-notify استفاده میکنیم.
اولین کار اینه که تابع زیر رو بعد از معرفی متغییرها داخل فایل gulpfile.js قرار بدیم:

var onError = function (err) {
  console.log(err);
  notify({ message: 'Error!' });
};

حالا نوبت میرسه به تعریف تسک‌ها یا وظیفه‌هایی که قراره بندازیم گردن گالپ.

// compile sass files.
gulp.task('sass', function() {
  gulp.src('../src/sass/*.scss')
  .pipe(plumber({
    errorHandler: onError
  }))
  .pipe(sass())
  .pipe(gulp.dest('../css'));
});

این اولین تسکی هست که معرفی میکنیم، کارش کامپایل کردن فایل‌های Sass هست.

هر تسک توی گالپ به این صورت معرفی میشه:

gulp.task('TASK_NAME', callback);

در خط بعد مشخص میشه که این تسک باید روی چه فایل‌هایی اجرا بشه:

gulp.src('../src/sass/*.scss')

با خوندن مطلبی که اول پست معرفی کردم میتونید یاد بگیرید که الگوهای معرفی مسیر و فایل‌ها چطور کار میکنه.

در قدم‌های بعد با استفاده از pipe کارهایی که قراره روی فایل‌های مشخص شده انجام بشه رو مشخص میکنیم، در این مرحله از پلاگین‌هایی که اول فایل معرفی کردیم استفاده میکنیم.
برای مثال توی خط ۴ با استفاده از پلاگین gulp-plumber میگیم که در صورت رخ دادن خطا هنگام کامپایل فایل‌ها از برنامه بیرون نیا و پیغام خطا رو به ما نشون بده.
در خط ۷ هم از پلاگین gulp-sass استفاده شده که فایل‌های Sass رو برای ما کامپایل میکنه.

اما در آخر باید بگیم که این فایل‌ها رو برای ما کجا و چطور ذخیره کنه.

pipe(gulp.dest('../css'))

به همین ترتیب بقیه تسک‌ها رو هم معرفی میکنیم.

// concat and minify css files.
gulp.task('css', function() {
  gulp.src(['../css/*.css', '!../css/css.css'])
  .pipe(autoprefixer('last 2 version'))
  .pipe(CSSminify())
  .pipe(concat('css.css'))
  .pipe(gulp.dest('../css'));
});

// uglify js files.
gulp.task('js', function() {
  gulp.src(['../src/js/*.js', '!../src/js/*.min.js'])
  .pipe(plumber({
    errorHandler: onError
  }))
  .pipe(uglify())
  .pipe(gulp.dest('../js'));
});

// run drush.
gulp.task('drush', shell.task(['drush cc all']));

حالا باید به گالپ بگیم که مواظب فایل‌ها باشه و هروقت تغییری روی اون‌ها صورت گرفت تسک مربوط به اون فایل‌ها رو اجرا کنه:

// watch for changes.
gulp.task('watch', function() {
  gulp.watch(['../css/*.css', '!../css/css.css'], ['css']);
  gulp.watch(['../src/js/*.js', '!../src/js/*.min.js'], ['js']);
  gulp.watch('../src/sass/*.scss', ['sass']);
  gulp.watch(['../**/*.{inc,info}', '../template.php'], ['drush']);
});

البته باید یک تسک معمول هم تعریف کنیم که وقتی برای اولین بار دستور گالپ رو اجرا میکنید تسک‌های معرفی شده رو اجرا کنه:

gulp.task('default', ['sass', 'css', 'js', 'drush', 'watch']);

بعد از این کافیه تا توی ترمینال برید به مسیر فولدر .npm و بزنید gulp

یک نمونه کامل از فایل گالپ برای دروپال رو میتونید اینجا نگاه کنید

 

شروع کار با Grunt

Grunt یک ابزار برای انجام وظایف بصورت اتوماتیک است که به افزایش سرعت انجام پروژه کمک میکنه.
بطور کلی میشه Grunt رو برای انجام بسیاری از وظایف که لازم در طول پروژه به دفعات بصورت
دستی انجام بشن تنظیم کرد.

از Grunt میشه برای انجام خیلی کارها مثل تعیین اعتبار فایل‌های HTML و Javascript کام‍پایل کردن فایل‌های Sass یا LESS فشرده‌سازی فایل‌های CSS و Javascript یا خیلی کارهای پیچیده‌تر استفاده کرد و همه این کارها رو فقط با یک دستور انجام داد.

نصب Grunt

از اونجایی که Grunt روی Node.js نوشته شده اول باید مطمئن بشید که ند روی کامپیوترتون نصبه٬ اگر هم نصب نیست میتونید به سایت ند برید و
اونجا فایل نصب رو بگیرید و روی کامپیوترتون نصب کنید.

بعد از نصب نود توی خط فرمان دستور زیر رو اجرا کنید:

$ npm install grunt-cli -g

بعد از اجرای دستور بالا برای اینکه مطمئن بشید Grunt نصب شده یا نه دستور زیر رو اجرا کنید:

$ grunt --version

##تنظیمات Grunt
تمام تنظیمات Grunt بطور کلی توی دو فایل package.json و gruntfile.js انجام میشه.

###package.json
یه فایل به اسم package.json توی root پروژه‌تون درست کنید و خطوط زیر رو توش
ک‍پی کنید:

{
    "name": "myProject",
    "version": "0.1.0",
    "private": true,
    
    "devDependencies": {
        "grunt": "~0.4.2"
    }
}

بعد از درست کردن این فایل توی خط فرمان به جایی که پروژه‌تون هست برید و دستور زیر رو اجرا کنید:

$ npm install

با این دستور کل متعلقات grunt که توی devDependencies مشخص کردیم داخل یه فولدر به اسم node_modules دانلود میشه.

یک راه ساده‌تر برای اضافه کردن Grunt یا هر پلاگین دیگه‌ای به پروژه استفاده از دستور npm install <module> --save-dev هست که بجای <module> اسم پلاگین رو قرار میدین٬ با این کار هم فایل‌های مربوط به پلاگین دانلود میشه هم اسم اون به قسمت devDependencies اضافه میشه.

برای مثال:

$ npm install grunt --save-dev

###gruntfile.js
یه فایل دیگه به اسم gruntfile.js توی root پروژه بسازید و کدهای زیر رو توش بنویسید٬ توی این فایل میتونید تنظیمات مربوط به وظایف Grunt رو بنویسید.

module.exports = function(grunt) {
    // Do something...
}

تا حالا اگه همه چیز رو درست انجام داده باشید و دستور grunt رو توی خط فرمان اجرا کنید باید پیام زیر رو دریافت کنید:

$ grunt
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

حالا میخوایم یک پروژه شروع کنیم که توش به کمک Gruntهم فایل‌های HTML رو معتبرسازی کنیم و هم فایل‌های Sass رو کامپایل کنیم.

اول با نصب پلاگین‌های لازم شروع میکنیم٬ برای این کار کافیه فایل package.json رو مثل زیر تغییر بدیم:

{
    "name": "myProject",
    "version": "0.1.0",
    "private": true,
    
    "devDependencies": {
        "grunt":                "~0.4.2",
        "grunt-htmlhint":       "*",
        "grunt-contrib-cssmin": "*",
        "grunt-contrib-sass":   "*",
        "grunt-contrib-watch":  "*",
        "matchdep":             "*"     
    }
}

بعد دستور زیر رو اجرا کنیم:

$ npm install

حالا باید یکم تغییرات توی فایل gruntfile.js بدیم:

module.exports = function(grunt) {

    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    grunt.registerTask('default', []);

};

خط سوم به کمک پلاگین matchdep تمام پکیج‌ها رو توی Grunt لود کردیم.

###معتبرسازی HTML
حالا یک فایل به اسم index.html درست میکنیم و خط‌های زیر را درون اون ک‍پی میکنیم:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grunt example</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<div class="wrapper">
    <h1>Grunt Example</h1>
    <hr>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, consequuntur, fugiat, dolores tenetur sapiente dolor vero eaque rem esse voluptatem cum rerum ipsam dolorem placeat quas culpa itaque. Eos, quisquam.
    </p>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

</body>
</html>

برای معتبرسازی این فایل از پلاگین htmlhint استفاده میکنیم٬ برای این کار کافیه خطوط زیر رو داخل grunt.initConfig اضافه کنید:

htmlhint: {
    build: {
        options: {
            'tagname-lowercase': true,
            'attr-lowercase': true,
            'attr-value-double-quotes': true,
            'id-unique': true
        },
        src: ['index.html']
    }
}

حالا اگه توی خط فرمان بنویسیم grunt htmlhint فایل index.html با مواردی که بالا مشخص شده سنجیده میشه و اگر مشکلی باشه بهمون اعلام میکنه.

کامپایل کردن Sass

برای اینکه پلاگین Sass روی Grunt کار کنه باید Sass روی کامپیوتر شما نصب باشه.
یک فایل به اسم style.scss تو مسیر assets/dev/css درست کنید و کدهای زیر رو توش کپی کنید:

$width: 450px;
$bg_color: #efefef;
$font_family: Helvetica, sans-serif;
$content_bg_color: #ffffff;
$separator_color: #f1f1f1;

body {
    background: $bg_color;
    font-family: $font_family;
    line-height: 1.5;
}

.wrapper {
    width: $width;
    margin: 0 auto;
    padding: 30px;
    background: $content_bg_color;

    hr {
        background: $separator_color;
        border: none;
        padding: 5px 0;
    }
}

حالا کدهای زیر رو به grunt.initConfig اضافه کنید:

sass: {
    build: {
        files: {
            'assets/css/style.css': 'assets/dev/css/style.scss'
        }
    }
}

بعد از این هروقت دستور grunt sass رو اجرا کنید فایل style.scss تو مسیر assets/css/style.css کامپایل میشه.

حالا میخواییم فایل CSS تولید شده رو فشرده کنیم٬ کدهای زیر رو به grunt.initConfig اضافه میکنیم:

cssmin: {
    build: {
        src: 'assets/css/style.css',
        dest: 'assets/css/style.css'
    }
}

حالا باید دستورات sass و cssmin رو با هم داخل یه دستور جا بدیم که هرموقع اجرا شد هم فایل ما کامپایل بشه هم فشرده بشه٬ برای اینکار دستور زیر به فایل gruntfile.js اضافه میکنیم:

grunt.registerTask('css', ['sass', 'cssmin']);

با این خط دستورات sass و cssmin توی دستور css مخلوط شدن.

###اجرای دستورات بطور خودکار با ذخیره فایل
چیزی که اول مطلب گفتیم این بود که با اجرای یک دستور تمام کارهای پیچیده‌ای که لازمه انجام بشه برای این کار از پلاگین watch استفاده میکنیم.

باید کدهای زیر رو به grunt.initConfig اضافه کنیم:

watch: {
    html: {
        files: ['index.html'],
        tasks: ['htmlhint']
    },
    css: {
        files: ['assets/dev/css/*.scss'],
        tasks: ['css']
    }
}

حالا کافیه دستور grunt watch رو اجرا کنیم تا با هر بار ذخیره شدن فایل‌ها دستورات
مربوط به اونها خودکار اجرا بشه.

فایل‌های مربوط به این پروژه رو میتونید از اینجا دریافت کنید.