├── .gitignore ├── README.md ├── docs ├── asset-manifest.json ├── favicon.ico ├── index.html ├── manifest.json ├── service-worker.js └── static │ ├── css │ ├── main.b813a14f.css │ └── main.b813a14f.css.map │ ├── js │ ├── main.0cc7e895.js │ └── main.0cc7e895.js.map │ └── media │ └── logo.5d5d9eef.svg ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.js ├── App.test.js ├── Components │ ├── Bookmark.js │ ├── Bookmarks.js │ ├── Content.js │ ├── Footer.js │ ├── Header.js │ ├── NewStory.js │ ├── Post.js │ ├── Posts.js │ ├── RichText │ │ ├── BlockStyleControls.js │ │ ├── InlineStyleControls.js │ │ └── StyleButton.js │ └── SinglePost.js ├── RichText.css ├── data.js ├── helper.js ├── index.css ├── index.js ├── logo.svg └── registerServiceWorker.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /docs/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.b813a14f.css", 3 | "main.css.map": "static/css/main.b813a14f.css.map", 4 | "main.js": "static/js/main.0cc7e895.js", 5 | "main.js.map": "static/js/main.0cc7e895.js.map", 6 | "static\\media\\logo.svg": "static/media/logo.5d5d9eef.svg" 7 | } -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zonayedpca/react-mini-blog/0720dcd3655ca9d2eef1ff12bf69f6176dd65e23/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | React Mini Blog - By Zonayed Ahmed
-------------------------------------------------------------------------------- /docs/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /docs/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/react-mini-blog/index.html","b615c9e710f70f24c0f3a94b84274a9b"],["/react-mini-blog/static/css/main.b813a14f.css","e4877cba59fee31cceefebc734cefa2b"],["/react-mini-blog/static/js/main.0cc7e895.js","8529dc97337edbdc860383604872ef9b"],["/react-mini-blog/static/media/logo.5d5d9eef.svg","5d5d9eefa31e5e13a6610d9fa7a283bb"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="/react-mini-blog/index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}}); -------------------------------------------------------------------------------- /docs/static/css/main.b813a14f.css: -------------------------------------------------------------------------------- 1 | body{margin:0;padding:0;font-family:sans-serif}.RichEditor-root{background:#fff;border:1px solid #ddd;font-family:Georgia,serif;font-size:14px;padding:15px}.RichEditor-editor{border-top:1px solid #ddd;cursor:text;font-size:16px;margin-top:10px}.RichEditor-editor .public-DraftEditor-content,.RichEditor-editor .public-DraftEditorPlaceholder-root{margin:0 -15px -15px;padding:15px}.RichEditor-editor .public-DraftEditor-content{min-height:100px}.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root{display:none}.RichEditor-editor .RichEditor-blockquote{border-left:5px solid #eee;color:#666;font-family:Hoefler Text,Georgia,serif;font-style:italic;margin:16px 0;padding:10px 20px}.RichEditor-editor .public-DraftStyleDefault-pre{background-color:rgba(0,0,0,.05);font-family:Inconsolata,Menlo,Consolas,monospace;font-size:16px;padding:20px}.RichEditor-controls{font-family:Helvetica,sans-serif;font-size:14px;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.RichEditor-styleButton{color:#999;cursor:pointer;margin-right:16px;padding:2px 0;display:inline-block}.RichEditor-activeButton{color:#5890ff}*{-webkit-box-sizing:border-box;box-sizing:border-box}.App{margin:0 auto;width:1000px}.btn{background:#fff;border:1px solid rgba(0,0,0,.1);padding:10px 20px;font-size:14px;border-radius:5px}a.btn{text-decoration:none;color:#000}.btn:hover{cursor:pointer;border-color:#000}.navbar{padding:30px 0}.navbar ul{margin:0;padding:0}.navbar ul li{display:inline-block;width:33.33333%;text-align:center}.navbar ul li img{background-color:#20232a;height:40px;width:40px}.navbar ul li:first-child{text-align:left;margin:0}.navbar ul li:last-child{text-align:right;margin:0}.all-posts{width:calc(100% - 370px);float:left}.bookmarks-sidebar{width:360px;float:right}.post{margin-bottom:30px;padding:0 25px}.post a{color:#000;text-decoration:none}.post h3{font-size:26px;margin-bottom:15px}.post p{line-height:1.8}.post ul{margin:0;padding:0}.post ul li{list-style:none;display:inline-block}.post ul li button{margin-right:15px}.bookmarks-sidebar{background-color:#fafafa;padding:30px 25px}.bookmark{position:relative;padding-left:35px;margin-bottom:35px}.bookmark h5{font-size:18px;margin-bottom:0}.bookmark h5 a{text-decoration:none;color:#000}.bookmark p{font-size:16px;color:rgba(0,0,0,.8);margin:0}.bookmark .number{position:absolute;left:0;background-color:#000;color:#fff;font-size:11px;font-weight:900;height:25px;width:25px;border-radius:100%;text-align:center;top:0;line-height:25px}.input-title{font-size:32px;width:100%;font-weight:700;border:none;-webkit-box-shadow:none;box-shadow:none;padding:15px 0}.input-title:focus{outline:none}.richtext-editor{width:74.07407%;margin:0 auto}.RichEditor-styleButton{background-color:#000;color:#fff;padding:2px 5px;margin:0;margin-right:10px;border:2px solid transparent}.RichEditor-activeButton{border-color:#000;color:#000;background-color:transparent}.public-DraftEditorPlaceholder-root{padding:0;position:absolute;color:rgba(0,0,0,.3);font-weight:700;font-size:18px}.public-DraftEditorPlaceholder-inner{font-size:18px}.btn-more{margin-right:15px}.btn-remove-bookmarks{background-color:#000;color:#fff}.btn-remove{background-color:#f44336;color:#fff;margin-left:15px}.btn-submit{margin-top:15px}.single-post{width:74.07407%;margin:0 auto}.single-post .header{font-size:42px;font-weight:900;margin-bottom:30px}.DraftEditor-editorContainer h1,.single-post h1{margin:0;font-size:38px}.DraftEditor-editorContainer h2,.single-post h2{font-size:34px}.DraftEditor-editorContainer h3,.single-post h3{font-size:30px}.DraftEditor-editorContainer h4,.single-post h4{font-size:26px}.DraftEditor-editorContainer h5,.single-post h5{font-size:22px}.DraftEditor-editorContainer h6,.single-post h6{font-size:18px}.DraftEditor-editorContainer ol li,.DraftEditor-editorContainer ul li,.single-post ol li,.single-post ul li{padding:12px 0;font-size:21px}.DraftEditor-editorContainer a,.single-post a{color:#000;text-decoration:underline}.DraftEditor-editorContainer p,.single-post p{margin:0;font-size:22px;line-height:1.7}.DraftEditor-editorContainer p code,.single-post p code{background-color:rgba(0,0,0,.05);padding:3px 5px;font-size:.8em}.DraftEditor-editorContainer figure,.single-post figure{margin:30px auto;text-align:center}.DraftEditor-editorContainer blockquote,.single-post blockquote{border-left:4px solid #000;margin:0;padding:10px 25px;font-style:italic}.DraftEditor-editorContainer pre,.single-post pre{background-color:rgba(0,0,0,.05);padding:20px;white-space:pre-wrap}.DraftEditor-editorContainer pre code,.single-post pre code{font-size:17px;color:rgba(0,0,.75)}.post-foot{border-top:1px solid rgba(0,0,0,.1);margin:0;margin-top:35px;padding:35px 0}.msg-success{color:#4caf50}.msg-error{color:#f44336}.post-foot li{list-style:none;display:inline-block}.bookmark-page{margin-top:100px}.bookmark-page h1{border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:30px}footer{clear:both;padding:60px 0}.footer ul{margin:0;padding:0;padding-top:60px;border-top:1px solid rgba(0,0,0,.1);text-align:center}.footer ul li{list-style:none;display:inline-block;margin:0 15px}.footer ul li a{background-color:#000;color:#fff;text-decoration:none;padding:2px 5px;border-radius:4px} 2 | /*# sourceMappingURL=main.b813a14f.css.map*/ -------------------------------------------------------------------------------- /docs/static/css/main.b813a14f.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.css","RichText.css","App.css"],"names":[],"mappings":"AAAA,KACE,SACA,UACA,sBAAwB,CCH1B,iBACE,gBACA,sBACA,0BACA,eACA,YAAc,CAGhB,mBACE,0BACA,YACA,eACA,eAAiB,CAGnB,sGAEE,qBACA,YAAc,CAGhB,+CACE,gBAAkB,CAGpB,gEACE,YAAc,CAGhB,0CACE,2BACA,WACA,uCACA,kBACA,cACA,iBAAmB,CAGrB,iDACE,iCACA,iDACA,eACA,YAAc,CAGhB,qBACE,iCACA,eACA,kBACA,yBACG,sBACC,qBACI,gBAAkB,CAG5B,wBACE,WACA,eACA,kBACA,cACA,oBAAsB,CAGxB,yBACE,aAAe,CChEjB,EACE,8BACQ,qBAAuB,CAGjC,KACE,cACA,YAAc,CAGhB,KACE,gBACA,gCACA,kBACA,eACA,iBAAmB,CAGrB,MACE,qBACA,UAAY,CAGd,WACE,eACA,iBAAmB,CAGrB,QACE,cAAgB,CAGlB,WACE,SACA,SAAW,CAGb,cACE,qBACA,gBAIA,iBAAmB,CAGrB,kBACE,yBACA,YACA,UAAY,CAGd,0BACE,gBACA,QAAU,CAGZ,yBACE,iBACA,QAAU,CAGZ,WACE,yBACA,UAAY,CAGd,mBACE,YACA,WAAa,CAGf,MACE,mBACA,cAAgB,CAGlB,QACE,WACA,oBAAsB,CAGxB,SACE,eACA,kBAAoB,CAGtB,QACE,eAAiB,CAGnB,SACE,SACA,SAAW,CAGb,YACE,gBACA,oBAAsB,CAGxB,mBACE,iBAAmB,CAGrB,mBACE,yBACA,iBAAmB,CAGrB,UACE,kBACA,kBACA,kBAAoB,CAGtB,aACE,eACA,eAAiB,CAGnB,eACE,qBACA,UAAY,CAGd,YACE,eACA,qBACA,QAAU,CAGZ,kBACE,kBACA,OACA,sBACA,WACA,eACA,gBACA,YACA,WACA,mBACA,kBACA,MACA,gBAAkB,CAGpB,aACE,eACA,WACA,gBACA,YACA,wBACQ,gBACR,cAAgB,CAGlB,mBACE,YAAc,CAGhB,iBACE,gBACA,aAAe,CAGjB,wBACE,sBACA,WACA,gBACA,SACA,kBACA,4BAA8B,CAGhC,yBACE,kBACA,WACA,4BAA8B,CAGhC,oCACE,UACA,kBACA,qBACA,gBACA,cAAgB,CAGlB,qCACE,cAAgB,CAGlB,UACE,iBAAmB,CAGrB,sBACE,sBACA,UAAY,CAGd,YACE,yBACA,WACA,gBAAkB,CAGpB,YACE,eAAiB,CAGnB,aACE,gBACA,aAAe,CAGjB,qBACE,eACA,gBACA,kBAAoB,CAGtB,gDACE,SACA,cAAgB,CAGlB,gDACE,cAAgB,CAGlB,gDACE,cAAgB,CAGlB,gDACE,cAAgB,CAGlB,gDACE,cAAgB,CAGlB,gDACE,cAAgB,CAGlB,4GACE,eACA,cAAgB,CAGlB,8CACE,WACA,yBAA2B,CAG7B,8CACE,SACA,eACA,eAAiB,CAGnB,wDACE,iCACA,gBACA,cAAiB,CAGnB,wDACI,iBACA,iBAAmB,CAGvB,gEACE,2BACA,SACA,kBACA,iBAAmB,CAGrB,kDACE,iCACA,aACA,oBAAsB,CAGxB,4DACE,eACA,mBAAwB,CAG1B,WACE,oCACA,SACA,gBACA,cAAgB,CAGlB,aACE,aAAe,CAGjB,WACE,aAAe,CAGjB,cACE,gBACA,oBAAsB,CAGxB,eACE,gBAAkB,CAGpB,kBACE,uCACA,mBAAqB,CAGvB,OACE,WACA,cAAgB,CAGlB,WACE,SACA,UACA,iBACA,oCACA,iBAAmB,CAGrB,cACE,gBACA,qBACA,aAAe,CAGjB,gBACE,sBACA,WACA,qBACA,gBACA,iBAAmB","file":"static/css/main.b813a14f.css","sourcesContent":["body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.css",".RichEditor-root {\r\n background: #fff;\r\n border: 1px solid #ddd;\r\n font-family: 'Georgia', serif;\r\n font-size: 14px;\r\n padding: 15px;\r\n}\r\n\r\n.RichEditor-editor {\r\n border-top: 1px solid #ddd;\r\n cursor: text;\r\n font-size: 16px;\r\n margin-top: 10px;\r\n}\r\n\r\n.RichEditor-editor .public-DraftEditorPlaceholder-root,\r\n.RichEditor-editor .public-DraftEditor-content {\r\n margin: 0 -15px -15px;\r\n padding: 15px;\r\n}\r\n\r\n.RichEditor-editor .public-DraftEditor-content {\r\n min-height: 100px;\r\n}\r\n\r\n.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {\r\n display: none;\r\n}\r\n\r\n.RichEditor-editor .RichEditor-blockquote {\r\n border-left: 5px solid #eee;\r\n color: #666;\r\n font-family: 'Hoefler Text', 'Georgia', serif;\r\n font-style: italic;\r\n margin: 16px 0;\r\n padding: 10px 20px;\r\n}\r\n\r\n.RichEditor-editor .public-DraftStyleDefault-pre {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;\r\n font-size: 16px;\r\n padding: 20px;\r\n}\r\n\r\n.RichEditor-controls {\r\n font-family: 'Helvetica', sans-serif;\r\n font-size: 14px;\r\n margin-bottom: 5px;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.RichEditor-styleButton {\r\n color: #999;\r\n cursor: pointer;\r\n margin-right: 16px;\r\n padding: 2px 0;\r\n display: inline-block;\r\n}\r\n\r\n.RichEditor-activeButton {\r\n color: #5890ff;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/RichText.css","* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.App {\n margin: 0 auto;\n width: 1000px;\n}\n\n.btn {\n background: #fff;\n border: solid 1px rgba(0, 0, 0, 0.1);\n padding: 10px 20px;\n font-size: 14px;\n border-radius: 5px;\n}\n\na.btn {\n text-decoration: none;\n color: #000;\n}\n\n.btn:hover {\n cursor: pointer;\n border-color: #000;\n}\n\n.navbar {\n padding: 30px 0;\n}\n\n.navbar ul {\n margin: 0;\n padding: 0;\n}\n\n.navbar ul li {\n display: inline-block;\n width: calc(100% / 3);\n}\n\n.navbar ul li {\n text-align: center;\n}\n\n.navbar ul li img {\n background-color: #20232a;\n height: 40px;\n width: 40px;\n}\n\n.navbar ul li:first-child {\n text-align: left;\n margin: 0;\n}\n\n.navbar ul li:last-child {\n text-align: right;\n margin: 0;\n}\n\n.all-posts {\n width: calc(100% - 370px);\n float: left;\n}\n\n.bookmarks-sidebar {\n width: 360px;\n float: right;\n}\n\n.post {\n margin-bottom: 30px;\n padding: 0 25px;\n}\n\n.post a {\n color: #000;\n text-decoration: none;\n}\n\n.post h3 {\n font-size: 26px;\n margin-bottom: 15px;\n}\n\n.post p {\n line-height: 1.8;\n}\n\n.post ul {\n margin: 0;\n padding: 0;\n}\n\n.post ul li {\n list-style: none;\n display: inline-block;\n}\n\n.post ul li button {\n margin-right: 15px;\n}\n\n.bookmarks-sidebar {\n background-color: #fafafa;\n padding: 30px 25px;\n}\n\n.bookmark {\n position: relative;\n padding-left: 35px;\n margin-bottom: 35px;\n}\n\n.bookmark h5 {\n font-size: 18px;\n margin-bottom: 0;\n}\n\n.bookmark h5 a {\n text-decoration: none;\n color: #000;\n}\n\n.bookmark p {\n font-size: 16px;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n}\n\n.bookmark .number {\n position: absolute;\n left: 0;\n background-color: #000;\n color: #fff;\n font-size: 11px;\n font-weight: 900;\n height: 25px;\n width: 25px;\n border-radius: 100%;\n text-align: center;\n top: 0;\n line-height: 25px;\n}\n\n.input-title {\n font-size: 32px;\n width: 100%;\n font-weight: 700;\n border: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n padding: 15px 0;\n}\n\n.input-title:focus {\n outline: none;\n}\n\n.richtext-editor {\n width: calc(100% / 1.35);\n margin: 0 auto;\n}\n\n.RichEditor-styleButton {\n background-color: #000;\n color: #fff;\n padding: 2px 5px;\n margin: 0;\n margin-right: 10px;\n border: 2px solid transparent;\n}\n\n.RichEditor-activeButton {\n border-color: #000;\n color: #000;\n background-color: transparent;\n}\n\n.public-DraftEditorPlaceholder-root {\n padding: 0;\n position: absolute;\n color: rgba(0, 0, 0, 0.3);\n font-weight: 700;\n font-size: 18px;\n}\n\n.public-DraftEditorPlaceholder-inner {\n font-size: 18px;\n}\n\n.btn-more {\n margin-right: 15px;\n}\n\n.btn-remove-bookmarks {\n background-color: #000;\n color: #fff;\n}\n\n.btn-remove {\n background-color: #F44336;\n color: #fff;\n margin-left: 15px;\n}\n\n.btn-submit {\n margin-top: 15px;\n}\n\n.single-post {\n width: calc(100% / 1.35);\n margin: 0 auto;\n}\n\n.single-post .header {\n font-size: 42px;\n font-weight: 900;\n margin-bottom: 30px;\n}\n\n.single-post h1, .DraftEditor-editorContainer h1 {\n margin: 0;\n font-size: 38px;\n}\n\n.single-post h2, .DraftEditor-editorContainer h2 {\n font-size: 34px;\n}\n\n.single-post h3, .DraftEditor-editorContainer h3 {\n font-size: 30px;\n}\n\n.single-post h4, .DraftEditor-editorContainer h4 {\n font-size: 26px;\n}\n\n.single-post h5, .DraftEditor-editorContainer h5 {\n font-size: 22px;\n}\n\n.single-post h6, , .DraftEditor-editorContainer h6 {\n font-size: 18px;\n}\n\n.single-post ul li, .single-post ol li, .DraftEditor-editorContainer ul li, .DraftEditor-editorContainer ol li {\n padding: 12px 0;\n font-size: 21px;\n}\n\n.single-post a, .DraftEditor-editorContainer a {\n color: #000;\n text-decoration: underline;\n}\n\n.single-post p, .DraftEditor-editorContainer p {\n margin: 0;\n font-size: 22px;\n line-height: 1.7;\n}\n\n.single-post p code, .DraftEditor-editorContainer p code {\n background-color: rgba(0,0,0,.05);\n padding: 3px 5px;\n font-size: 0.8em;\n}\n\n.single-post figure, .DraftEditor-editorContainer figure {\n margin: 30px auto;\n text-align: center;\n}\n\n.single-post blockquote, .DraftEditor-editorContainer blockquote {\n border-left: 4px solid #000;\n margin: 0;\n padding: 10px 25px;\n font-style: italic;\n}\n\n.single-post pre, .DraftEditor-editorContainer pre {\n background-color: rgba(0,0,0,.05);\n padding: 20px;\n white-space: pre-wrap;\n}\n\n.single-post pre code, .DraftEditor-editorContainer pre code {\n font-size: 17px;\n color: rgba(0, 0, 0.75);\n}\n\n.post-foot {\n border-top: solid 1px rgba(0, 0, 0, 0.1);\n margin: 0;\n margin-top: 35px;\n padding: 35px 0;\n}\n\n.msg-success {\n color: #4CAF50;\n}\n\n.msg-error {\n color: #F44336;\n}\n\n.post-foot li {\n list-style: none;\n display: inline-block;\n}\n\n.bookmark-page {\n margin-top: 100px;\n}\n\n.bookmark-page h1 {\n border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n padding-bottom: 30px;\n}\n\nfooter {\n clear: both;\n padding: 60px 0;\n}\n\n.footer ul {\n margin: 0;\n padding: 0;\n padding-top: 60px;\n border-top: solid 1px rgba(0, 0, 0, 0.10);\n text-align: center;\n}\n\n.footer ul li {\n list-style: none;\n display: inline-block;\n margin: 0 15px;\n}\n\n.footer ul li a {\n background-color: #000;\n color: #fff;\n text-decoration: none;\n padding: 2px 5px;\n border-radius: 4px;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/media/logo.5d5d9eef.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-mini-blog", 3 | "version": "0.1.0", 4 | "homepage": "https://zonayedpca.github.io/react-mini-blog", 5 | "private": true, 6 | "dependencies": { 7 | "draft-js": "^0.10.5", 8 | "draft-js-export-html": "^1.2.0", 9 | "react": "^16.4.1", 10 | "react-dom": "^16.4.1", 11 | "react-render-html": "^0.6.0", 12 | "react-router-dom": "^4.3.1", 13 | "react-scripts": "1.1.4", 14 | "uuid": "^3.2.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zonayedpca/react-mini-blog/0720dcd3655ca9d2eef1ff12bf69f6176dd65e23/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React Mini Blog - By Zonayed Ahmed 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .App { 6 | margin: 0 auto; 7 | width: 1000px; 8 | } 9 | 10 | .btn { 11 | background: #fff; 12 | border: solid 1px rgba(0, 0, 0, 0.1); 13 | padding: 10px 20px; 14 | font-size: 14px; 15 | border-radius: 5px; 16 | } 17 | 18 | a.btn { 19 | text-decoration: none; 20 | color: #000; 21 | } 22 | 23 | .btn:hover { 24 | cursor: pointer; 25 | border-color: #000; 26 | } 27 | 28 | .navbar { 29 | padding: 30px 0; 30 | } 31 | 32 | .navbar ul { 33 | margin: 0; 34 | padding: 0; 35 | } 36 | 37 | .navbar ul li { 38 | display: inline-block; 39 | width: calc(100% / 3); 40 | } 41 | 42 | .navbar ul li { 43 | text-align: center; 44 | } 45 | 46 | .navbar ul li img { 47 | background-color: #20232a; 48 | height: 40px; 49 | width: 40px; 50 | } 51 | 52 | .navbar ul li:first-child { 53 | text-align: left; 54 | margin: 0; 55 | } 56 | 57 | .navbar ul li:last-child { 58 | text-align: right; 59 | margin: 0; 60 | } 61 | 62 | .all-posts { 63 | width: calc(100% - 370px); 64 | float: left; 65 | } 66 | 67 | .bookmarks-sidebar { 68 | width: 360px; 69 | float: right; 70 | } 71 | 72 | .post { 73 | margin-bottom: 30px; 74 | padding: 0 25px; 75 | } 76 | 77 | .post a { 78 | color: #000; 79 | text-decoration: none; 80 | } 81 | 82 | .post h3 { 83 | font-size: 26px; 84 | margin-bottom: 15px; 85 | } 86 | 87 | .post p { 88 | line-height: 1.8; 89 | } 90 | 91 | .post ul { 92 | margin: 0; 93 | padding: 0; 94 | } 95 | 96 | .post ul li { 97 | list-style: none; 98 | display: inline-block; 99 | } 100 | 101 | .post ul li button { 102 | margin-right: 15px; 103 | } 104 | 105 | .bookmarks-sidebar { 106 | background-color: #fafafa; 107 | padding: 30px 25px; 108 | } 109 | 110 | .bookmark { 111 | position: relative; 112 | padding-left: 35px; 113 | margin-bottom: 35px; 114 | } 115 | 116 | .bookmark h5 { 117 | font-size: 18px; 118 | margin-bottom: 0; 119 | } 120 | 121 | .bookmark h5 a { 122 | text-decoration: none; 123 | color: #000; 124 | } 125 | 126 | .bookmark p { 127 | font-size: 16px; 128 | color: rgba(0, 0, 0, 0.8); 129 | margin: 0; 130 | } 131 | 132 | .bookmark .number { 133 | position: absolute; 134 | left: 0; 135 | background-color: #000; 136 | color: #fff; 137 | font-size: 11px; 138 | font-weight: 900; 139 | height: 25px; 140 | width: 25px; 141 | border-radius: 100%; 142 | text-align: center; 143 | top: 0; 144 | line-height: 25px; 145 | } 146 | 147 | .input-title { 148 | font-size: 32px; 149 | width: 100%; 150 | font-weight: 700; 151 | border: none; 152 | box-shadow: none; 153 | padding: 15px 0; 154 | } 155 | 156 | .input-title:focus { 157 | outline: none; 158 | } 159 | 160 | .richtext-editor { 161 | width: calc(100% / 1.35); 162 | margin: 0 auto; 163 | } 164 | 165 | .RichEditor-styleButton { 166 | background-color: #000; 167 | color: #fff; 168 | padding: 2px 5px; 169 | margin: 0; 170 | margin-right: 10px; 171 | border: 2px solid transparent; 172 | } 173 | 174 | .RichEditor-activeButton { 175 | border-color: #000; 176 | color: #000; 177 | background-color: transparent; 178 | } 179 | 180 | .public-DraftEditorPlaceholder-root { 181 | padding: 0; 182 | position: absolute; 183 | color: rgba(0, 0, 0, 0.3); 184 | font-weight: 700; 185 | font-size: 18px; 186 | } 187 | 188 | .public-DraftEditorPlaceholder-inner { 189 | font-size: 18px; 190 | } 191 | 192 | .btn-more { 193 | margin-right: 15px; 194 | } 195 | 196 | .btn-remove-bookmarks { 197 | background-color: #000; 198 | color: #fff; 199 | } 200 | 201 | .btn-remove { 202 | background-color: #F44336; 203 | color: #fff; 204 | margin-left: 15px; 205 | } 206 | 207 | .btn-submit { 208 | margin-top: 15px; 209 | } 210 | 211 | .single-post { 212 | width: calc(100% / 1.35); 213 | margin: 0 auto; 214 | } 215 | 216 | .single-post .header { 217 | font-size: 42px; 218 | font-weight: 900; 219 | margin-bottom: 30px; 220 | } 221 | 222 | .single-post h1, .DraftEditor-editorContainer h1 { 223 | margin: 0; 224 | font-size: 38px; 225 | } 226 | 227 | .single-post h2, .DraftEditor-editorContainer h2 { 228 | font-size: 34px; 229 | } 230 | 231 | .single-post h3, .DraftEditor-editorContainer h3 { 232 | font-size: 30px; 233 | } 234 | 235 | .single-post h4, .DraftEditor-editorContainer h4 { 236 | font-size: 26px; 237 | } 238 | 239 | .single-post h5, .DraftEditor-editorContainer h5 { 240 | font-size: 22px; 241 | } 242 | 243 | .single-post h6, , .DraftEditor-editorContainer h6 { 244 | font-size: 18px; 245 | } 246 | 247 | .single-post ul li, .single-post ol li, .DraftEditor-editorContainer ul li, .DraftEditor-editorContainer ol li { 248 | padding: 12px 0; 249 | font-size: 21px; 250 | } 251 | 252 | .single-post a, .DraftEditor-editorContainer a { 253 | color: #000; 254 | text-decoration: underline; 255 | } 256 | 257 | .single-post p, .DraftEditor-editorContainer p { 258 | margin: 0; 259 | font-size: 22px; 260 | line-height: 1.7; 261 | } 262 | 263 | .single-post p code, .DraftEditor-editorContainer p code { 264 | background-color: rgba(0,0,0,.05); 265 | padding: 3px 5px; 266 | font-size: 0.8em; 267 | } 268 | 269 | .single-post figure, .DraftEditor-editorContainer figure { 270 | margin: 30px auto; 271 | text-align: center; 272 | } 273 | 274 | .single-post blockquote, .DraftEditor-editorContainer blockquote { 275 | border-left: 4px solid #000; 276 | margin: 0; 277 | padding: 10px 25px; 278 | font-style: italic; 279 | } 280 | 281 | .single-post pre, .DraftEditor-editorContainer pre { 282 | background-color: rgba(0,0,0,.05); 283 | padding: 20px; 284 | white-space: pre-wrap; 285 | } 286 | 287 | .single-post pre code, .DraftEditor-editorContainer pre code { 288 | font-size: 17px; 289 | color: rgba(0, 0, 0.75); 290 | } 291 | 292 | .post-foot { 293 | border-top: solid 1px rgba(0, 0, 0, 0.1); 294 | margin: 0; 295 | margin-top: 35px; 296 | padding: 35px 0; 297 | } 298 | 299 | .msg-success { 300 | color: #4CAF50; 301 | } 302 | 303 | .msg-error { 304 | color: #F44336; 305 | } 306 | 307 | .post-foot li { 308 | list-style: none; 309 | display: inline-block; 310 | } 311 | 312 | .bookmark-page { 313 | margin-top: 100px; 314 | } 315 | 316 | .bookmark-page h1 { 317 | border-bottom: solid 1px rgba(0, 0, 0, 0.1); 318 | padding-bottom: 30px; 319 | } 320 | 321 | footer { 322 | clear: both; 323 | padding: 60px 0; 324 | } 325 | 326 | .footer ul { 327 | margin: 0; 328 | padding: 0; 329 | padding-top: 60px; 330 | border-top: solid 1px rgba(0, 0, 0, 0.10); 331 | text-align: center; 332 | } 333 | 334 | .footer ul li { 335 | list-style: none; 336 | display: inline-block; 337 | margin: 0 15px; 338 | } 339 | 340 | .footer ul li a { 341 | background-color: #000; 342 | color: #fff; 343 | text-decoration: none; 344 | padding: 2px 5px; 345 | border-radius: 4px; 346 | } 347 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter as Router, Route } from 'react-router-dom'; 3 | 4 | import Header from './Components/Header'; 5 | import Content from './Components/Content'; 6 | import Bookmark from './Components/Bookmark'; 7 | import NewStory from './Components/NewStory'; 8 | import SinglePost from './Components/SinglePost'; 9 | import Footer from './Components/Footer'; 10 | 11 | import './App.css'; 12 | import data from './data'; 13 | 14 | export default class App extends Component { 15 | constructor(props) { 16 | super(props); 17 | this.state = { 18 | posts: data 19 | } 20 | 21 | this.handleBookmark = this.handleBookmark.bind(this); 22 | this.handleRemoveBookmark = this.handleRemoveBookmark.bind(this); 23 | this.handleSubmission = this.handleSubmission.bind(this); 24 | this.handleRemove = this.handleRemove.bind(this); 25 | } 26 | 27 | handleBookmark(data) { 28 | let posts = this.state.posts; 29 | posts = posts.map(post => post === data ? {id: post.id, title: post.title, body: post.body, bookmark: true} : post); 30 | this.setState({posts}); 31 | } 32 | 33 | handleRemoveBookmark(data) { 34 | let posts = this.state.posts; 35 | posts = posts.map(post => post === data ? {id: post.id, title: post.title, body: post.body, bookmark: false} : post); 36 | this.setState({posts}); 37 | } 38 | 39 | handleSubmission(data) { 40 | let posts = this.state.posts; 41 | posts = [data, ...posts]; 42 | this.setState({posts}); 43 | } 44 | 45 | handleRemove(post, history) { 46 | let posts = this.state.posts; 47 | posts = posts.filter(onepost => onepost !== post); 48 | this.setState({posts}); 49 | history.push('/'); 50 | this.handleWindow(); 51 | } 52 | 53 | handleWindow() { 54 | window.scrollTo(0, 0); 55 | } 56 | 57 | render() { 58 | return ( 59 | 60 |
61 |
} /> 62 | post.bookmark)} handleBookmark={this.handleBookmark} handleRemoveBookmark={this.handleRemoveBookmark} />} /> 63 | } /> 64 | post.bookmark)} />} /> 65 | } /> 66 |
68 |
69 | ); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Components/Bookmark.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Bookmarks from './Bookmarks'; 3 | 4 | export default ({bookmarks}) => { 5 | return ( 6 |
7 |

Your Bookmarks

8 | 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/Components/Bookmarks.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { leveningStr } from '../helper'; 4 | 5 | export default ({bookmarks}) => { 6 | const { length } = bookmarks; 7 | const showPost = length > 0 ? bookmarks.map(({id, title, body}, index) =>
{(index + 1)}
{title}

{leveningStr(body, 35)}

) :

No Bookmark Found

; 8 | return
{showPost}
9 | } 10 | -------------------------------------------------------------------------------- /src/Components/Content.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Posts from './Posts'; 4 | import Bookmarks from './Bookmarks'; 5 | 6 | export default ({posts, bookmarks, handleBookmark, handleRemoveBookmark}) => { 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 |

Bookmarks

14 | 15 |
16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/Components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => { 4 | return ( 5 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/Components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import logo from '../logo.svg'; 5 | 6 | export default ({match: {url}}) => { 7 | return ( 8 |
9 |
10 |
    11 |
  • {url === '/' ? New Story : Home}
  • 12 |
  • react-logo
  • 13 |
  • Bookmarks
  • 14 |
15 |
16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/Components/NewStory.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import uuidv1 from 'uuid/v1'; 3 | import {Editor, EditorState, RichUtils, getDefaultKeyBinding} from 'draft-js'; 4 | import {stateToHTML} from 'draft-js-export-html'; 5 | 6 | import BlockStyleControls from './RichText/BlockStyleControls'; 7 | import InlineStyleControls from './RichText/InlineStyleControls'; 8 | 9 | import '../RichText.css'; 10 | 11 | export default class NewStory extends Component { 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | editorState: EditorState.createEmpty(), 16 | title: '', 17 | body: '', 18 | done: 'no' 19 | }; 20 | 21 | this.focus = () => this.refs.editor.focus(); 22 | this.onChange = this.onChange.bind(this); 23 | this.handleKeyCommand = this._handleKeyCommand.bind(this); 24 | this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this); 25 | this.toggleBlockType = this._toggleBlockType.bind(this); 26 | this.toggleInlineStyle = this._toggleInlineStyle.bind(this); 27 | this.handleSubmit = this.handleSubmit.bind(this); 28 | } 29 | 30 | onChange(editorState) { 31 | this.setState({editorState}); 32 | const contentState = this.state.editorState.getCurrentContent(); 33 | const html = stateToHTML(contentState); 34 | this.state.title && this.state.body ? this.setState({done: 'done'}) : console.log('Made by Zonayed Ahmed, My portfolio: https://www.zonayed.me'); 35 | this.setState({body: html}); 36 | } 37 | 38 | _handleKeyCommand(command, editorState) { 39 | const newState = RichUtils.handleKeyCommand(editorState, command); 40 | if (newState) { 41 | this.onChange(newState); 42 | return true; 43 | } 44 | return false; 45 | } 46 | 47 | _mapKeyToEditorCommand(e) { 48 | if (e.keyCode === 9 /* TAB */) { 49 | const newEditorState = RichUtils.onTab( 50 | e, 51 | this.state.editorState, 52 | 4, /* maxDepth */ 53 | ); 54 | if (newEditorState !== this.state.editorState) { 55 | this.onChange(newEditorState); 56 | } 57 | return; 58 | } 59 | return getDefaultKeyBinding(e); 60 | } 61 | 62 | _toggleBlockType(blockType) { 63 | this.onChange( 64 | RichUtils.toggleBlockType( 65 | this.state.editorState, 66 | blockType 67 | ) 68 | ); 69 | } 70 | 71 | _toggleInlineStyle(inlineStyle) { 72 | this.onChange( 73 | RichUtils.toggleInlineStyle( 74 | this.state.editorState, 75 | inlineStyle 76 | ) 77 | ); 78 | } 79 | 80 | handleSubmit() { 81 | const { title, body } = this.state; 82 | if(title && body) { 83 | let newStory = {id: uuidv1(), title, body, bookmark: false}; 84 | this.props.handleSubmission(newStory); 85 | this.setState({editorState: EditorState.createEmpty(), title: '', body: '', done: 'submitted'}); 86 | } 87 | } 88 | 89 | render() { 90 | const { editorState } = this.state; 91 | let className = 'RichEditor-editor'; 92 | var contentState = editorState.getCurrentContent(); 93 | if (!contentState.hasText()) { 94 | if (contentState.getBlockMap().first().getType() !== 'unstyled') { 95 | className += ' RichEditor-hidePlaceholder'; 96 | } 97 | } 98 | 99 | const { title, done } = this.state; 100 | 101 | return ( 102 |
103 | this.setState({title: e.target.value})} placeholder="Title" /> 104 | 108 | 112 |
113 | 123 |
124 | {done ==='done' ? : (done==='submitted' ? Your story has been submitted : You havent finished writing your story)} 125 |
126 | ); 127 | 128 | function getBlockStyle(block) { 129 | switch (block.getType()) { 130 | case 'blockquote': return 'RichEditor-blockquote'; 131 | default: return null; 132 | } 133 | } 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/Components/Post.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderHTML from 'react-render-html'; 3 | import { Link } from 'react-router-dom'; 4 | import { leveningStr } from '../helper'; 5 | 6 | export default ({post, handleBookmark, handleRemoveBookmark}) => { 7 | const { id, title, body, bookmark } = post; 8 | return ( 9 |
10 |

{title}

11 |

{renderHTML(leveningStr(body, 250))}

12 | 16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/Components/Posts.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Post from './Post'; 4 | 5 | export default ({posts, handleBookmark, handleRemoveBookmark}) => { 6 | const showPost = posts.map(post => ); 7 | 8 | return
{showPost}
9 | } 10 | -------------------------------------------------------------------------------- /src/Components/RichText/BlockStyleControls.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import StyleButton from './StyleButton'; 4 | 5 | const BLOCK_TYPES = [ 6 | {label: 'H1', style: 'header-one'}, 7 | {label: 'H2', style: 'header-two'}, 8 | {label: 'H3', style: 'header-three'}, 9 | {label: 'H4', style: 'header-four'}, 10 | {label: 'H5', style: 'header-five'}, 11 | {label: 'H6', style: 'header-six'}, 12 | {label: 'Blockquote', style: 'blockquote'}, 13 | {label: 'UL', style: 'unordered-list-item'}, 14 | {label: 'OL', style: 'ordered-list-item'}, 15 | {label: 'Code Block', style: 'code-block'}, 16 | ]; 17 | 18 | export default(props) => { 19 | const {editorState} = props; 20 | const selection = editorState.getSelection(); 21 | const blockType = editorState 22 | .getCurrentContent() 23 | .getBlockForKey(selection.getStartKey()) 24 | .getType(); 25 | return ( 26 |
27 | {BLOCK_TYPES.map((type) => 28 | 35 | )} 36 |
37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /src/Components/RichText/InlineStyleControls.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import StyleButton from './StyleButton'; 4 | 5 | var INLINE_STYLES = [ 6 | {label: 'Bold', style: 'BOLD'}, 7 | {label: 'Italic', style: 'ITALIC'}, 8 | {label: 'Underline', style: 'UNDERLINE'}, 9 | {label: 'Monospace', style: 'CODE'}, 10 | ]; 11 | 12 | export default(props) => { 13 | const currentStyle = props.editorState.getCurrentInlineStyle(); 14 | 15 | return ( 16 |
17 | {INLINE_STYLES.map((type) => 18 | 25 | )} 26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /src/Components/RichText/StyleButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class StyleButton extends React.Component { 4 | constructor() { 5 | super(); 6 | this.onToggle = (e) => { 7 | e.preventDefault(); 8 | this.props.onToggle(this.props.style); 9 | }; 10 | } 11 | render() { 12 | let className = 'RichEditor-styleButton'; 13 | if (this.props.active) { 14 | className += ' RichEditor-activeButton'; 15 | } 16 | return ( 17 | 18 | {this.props.label} 19 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/Components/SinglePost.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderHTML from 'react-render-html'; 3 | 4 | export default ({match: {params: {id}}, history, posts, handleBookmark, handleRemoveBookmark, handleRemove}) => { 5 | let post = posts.filter(post => post.id === id); 6 | post = post[0]; 7 | 8 | return ( 9 |
10 |

{post.title}

11 | {renderHTML(post.body)} 12 |
    13 |
  • {post.bookmark ? : }
  • 14 |
  • 15 |
16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/RichText.css: -------------------------------------------------------------------------------- 1 | .RichEditor-root { 2 | background: #fff; 3 | border: 1px solid #ddd; 4 | font-family: 'Georgia', serif; 5 | font-size: 14px; 6 | padding: 15px; 7 | } 8 | 9 | .RichEditor-editor { 10 | border-top: 1px solid #ddd; 11 | cursor: text; 12 | font-size: 16px; 13 | margin-top: 10px; 14 | } 15 | 16 | .RichEditor-editor .public-DraftEditorPlaceholder-root, 17 | .RichEditor-editor .public-DraftEditor-content { 18 | margin: 0 -15px -15px; 19 | padding: 15px; 20 | } 21 | 22 | .RichEditor-editor .public-DraftEditor-content { 23 | min-height: 100px; 24 | } 25 | 26 | .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root { 27 | display: none; 28 | } 29 | 30 | .RichEditor-editor .RichEditor-blockquote { 31 | border-left: 5px solid #eee; 32 | color: #666; 33 | font-family: 'Hoefler Text', 'Georgia', serif; 34 | font-style: italic; 35 | margin: 16px 0; 36 | padding: 10px 20px; 37 | } 38 | 39 | .RichEditor-editor .public-DraftStyleDefault-pre { 40 | background-color: rgba(0, 0, 0, 0.05); 41 | font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; 42 | font-size: 16px; 43 | padding: 20px; 44 | } 45 | 46 | .RichEditor-controls { 47 | font-family: 'Helvetica', sans-serif; 48 | font-size: 14px; 49 | margin-bottom: 5px; 50 | user-select: none; 51 | } 52 | 53 | .RichEditor-styleButton { 54 | color: #999; 55 | cursor: pointer; 56 | margin-right: 16px; 57 | padding: 2px 0; 58 | display: inline-block; 59 | } 60 | 61 | .RichEditor-activeButton { 62 | color: #5890ff; 63 | } 64 | -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: '1', 4 | title: "এক পলকে Gulp JS — টাস্ক স্বয়ংক্রিয় করুন", 5 | body: '

Gulp JS মূলত একটা টুলস আপনার নিত্যপ্রয়োজনীয় টাস্ককে অটোম্যাট করার জন্যে। আমাদের ওয়েব অ্যাপ্লিকেশন বা ওয়েব ডেভেলপমেন্ট এ অনেক কাজ আছে যেগুলো বারবার করতে হয়। ধরুন আপনি SASS দিয়ে স্টাইল করতেছেন, এখন প্রত্যেকবার আপনার ফাইল দেখার জন্যে SASS ফাইলটাকে কম্পাইল করে প্লেইন CSS এ নিতে হয়। এজন্যে আপনাকে প্রয়োজনীয় কমান্ড দিয়ে কম্পাইল করতে হয়। যদিও SASS এরও অটোম্যাট(watch) কম্পাইল কমান্ড দেওয়ার অপশন আছে। কিন্তু আপনার প্রোজেক্টে এই SASS কে CSS এ নেওয়া ছাড়াও আরো এরকম অনেক কাজ থাকতে পারে। যেমন আপনি চাচ্ছেন আপনার প্রোডাকশন ভার্শনে মিনিমাইজড স্ক্রিপ্ট ফাইলগুলো থাকবে, কিন্তু ডেভেলপমেন্ট এর সময় আপনি ডেভেলপমেন্ট ফাইলই রাখবেন। কিন্তু এক্ষেত্রে ডেভেলপমেন্ট এর সময় বারবার মিনিমাইজড করে করে কাজ করা বিরক্তকর, একই সাথে আপনি ডেভেলপমেন্ট ভার্শনে মডিউল আকারে অনেকগুলো ফাইলে স্ক্রিপ্ট লিখলেন, এখন প্রোডাকশন এ চাচ্ছেন সেগুলো একসাথে করে ফেলতে। আবার যদি আপনার প্রোজেক্টে অনেক মেম্বার থাকে, তাহলে তাদেরকেও আপনার কাজগুলো করতে হবে, প্রয়োজনীয় মিনিমাইজড ভার্শন করার টুলস, SASS থেকে CSS করার টুলস, কমান্ড সবই নতুন করে ইন্সটল করা, কমান্ড দেওয়া সব করতে হবে। এটা আসলে অনেক বিরক্তকর। আপনি আপনার আসল কাজই করবেন নাকি টুলস ইন্সটলেশন আর কমান্ড দিতে দিতেই দিন শেষ করে দিবেন? অবশ্যই চাইবেন এমন কোনো টুলস যেটা সবকিছু অটোম্যাট করে দিতে পারবে। হ্যাঁ, গাল্প এর কাজ এরকম কিছুই। তাই আমি আজকে Gulp নিয়ে কথা বলবো।

প্রথমেই আপনার ম্যাশিনে নোড জেএস ইন্সটল করা থাকতে হবে। এবার একটি ডিরেক্টরি নিয়ে সেখানে আমরা Gulp এর ব্যাসিকগুলো দেখবো। আপনি যে কমান্ড লাইন ইউজ করেন সেটি ওপেন করুন। একটা ডিরেক্টরি ক্রিয়েট করুন। যেখানে আপনার Gulp এর জন্যে প্রয়োজনীয় সব ফাইলগুলো থাকবে।

mkdir gulp-practice
cd gulp-practice

এবার এই ডিরেক্টরিতে npm প্রোজেক্ট ইনিশিয়েট করুনঃ

npm init

সবকিছু বাই ডিফল্ট ভাবেই রাখতে পারেন, চাইলে আপনি আপনার মনমতোও দিতে পারেন। এতে কোনো ইফেক্ট পড়বে না।

এখন আপনার আসল Gulp সহ Gulp CLI ও ইন্সটল করতে হবে। এখানে gulpডেভ ডিপেন্ডেন্সি আর gulp-cli গ্লোবাললি ইন্সটল করতে হবেঃ

npm install -g gulp-cli
npm install --save-dev gulp

এখন প্রোজেক্টের রুট ডিরেক্টরিতে gulpfile.js নামে একটি ফাইল ক্রিয়েট করতে হবে যেটাতেই মূলত Gulp এর অটোম্যাট টাস্ক রানারের কোডগুলো থাকবে। অনেকটা Config ফাইলের মতোই।

touch gulpfile.js

এবার আপনার gulpfile.js ফাইলটি আপনার পছন্দের কোড এডিটরে ওপেন করুন।

Gulp এ মূলত নিচের এই মেথডগুলোই বেশী ইউজ করা হয়। সবকিছু অনেকটা এগুলোর উপরেই করা হয়।

gulp.task টাস্ক বানানোর জন্যে ইউজ করা হয়।

gulp.src যে ফাইলের উপর অ্যাকশন নেওয়া হবে সেটার লোকেশান…

gulp.dest অ্যাকশন নেওয়া ফাইলটা যেখানে সেইভ করবেন…

gulp.watch কোনো ফাইলকে নজরদারীতে রাখার জন্যে, ঐ ফাইলে কিছু চ্যাঞ্জ হলেই আপনার দেওয়া টাস্ক অটোম্যাটিকভাবেই অ্যাপ্লাই হয়ে যাবে।

টাস্ক তৈরী করাঃ

gulp.task দিয়ে টাস্ক ক্রিয়েট করা হয়। এটা সাধারণত দুইটা আর্গুমেন্ট নেয়। প্রথমটা আপনার টাস্কের নাম এবং দ্বিতীয়টায় একটা কলব্যাক ফাংশন। এই ফাংশনের ভিতরেই আপনি কি করতে চাচ্ছেন সেগুলোর কোড লিখবেন।

gulp.task(\'taskName\', function() {
 // What do you want to do
});

আমরা যেহেতু gulp ইউজ করেছি তাই এটা অবশ্যই require করিয়ে নিতে হবেঃ

const gulp = require(\'gulp\');

যেমন খুব সিম্পলভাবে একটা টেক্সট console.log করাতে চাইলেঃ

gulp.task(\'hello\', function() {
  console.log(\'Hi! This is my First Task!!\');
});

এখন Gulp এর এই টাক্স রান করাতে আপনাকে gulp-cli ইউজ করতে হবে। যেহেতু আমরা এটা গ্লোবাললি ইন্সটল করে নিয়েছি তাই এখন আমরা কমান্ড লাইনে gulp কমান্ড ইউজ করতে পারবো। প্রথমে কমান্ড লাইনে gulp লিখে তারপর আপনার টাস্কের নাম লিখতে হবে। অবশ্যই মনে রাখবেন এই কমান্ড প্রোজেক্টের রুটে বা যেখানে gulpfile.js ফাইলটা রয়েছে সেখান থেকে রান করাতে হবে। এবার আমরা উপরের ডিমো console.log টা রান করাবো। আপনার কমান্ড লাইনে লিখুনঃ

gulp hello

তারপর এন্টার চাপলে দেখবেন আপনার লেখা প্রিন্ট হয়েছেঃ

যদিও এটা এতোটা কাজের মনে হচ্ছে না, কিন্তু কিভাবে একটা টাস্ক বানানো হয় এবং রান করাতে হয় সেটা এখন আশা করি ক্লিয়ার।

ফাইল কপি করাঃ

এখন আমাদের ডেভেলমেন্ট এ অনেক সময় একটা ডেভেলপমেন্ট ভার্শন থাকে, আরেকটা প্রোডাকশন ভার্শন থাকে। ধরি আমাদের এরকম(ডাউনলোড করে নিন) স্ট্রাকচার আছে মেইন প্রোজেক্ট এরঃ

এখন src এর ভিতরের সব ডেভেলপমেন্ট ভার্শন। এখন বাই কনভেনশন আমরা dist নামে একটা ডিরেক্টরিতে প্রোডাকশন ভার্শনটা রাখি। এখন যদি আমরা ডেভেলপমেন্ট ভার্শন থেকে প্রোডাকশন ভার্শনে নেওয়ার জন্যে একটা টাস্ক ক্রিয়েট করতে চাচ্ছি। about.html আর index.html কে কপি করে dist ডিরেক্টির ভিতরে নিতে চাচ্ছি। লক্ষ্য করুন আমাদের কিন্তু dist নামে কোনো ডিরেক্টরিই নাই। সমস্যা নাই, gulp ডিরেক্টরি না থাকলে ক্রিয়েট করে দিবেঃ

gulp.task(\'copy\', function() {
  gulp.src(\'./src/*.html\').pipe(gulp.dest(\'./dist/\'));
});

এখানে প্রথমে টাস্ক ক্রিয়েট করে তারপর সোর্স দেওয়া হয়েছে। * দিয়ে বুঝানো হয়েছে আমরা সব নামের html ফাইলগুলো চাচ্ছি কপি করতে। তারপর pipe()এর ভিতরে ডেসটিনেশন দিয়েছি যেখানে আমরা ফাইলগুলো কপি করতে চাচ্ছি। এভাবেই pipe() করে আপনি যে অ্যাকশন নিতে চাচ্ছেন নিতে হবে।

এবার টাস্ক রান করুনঃ

gulp copy

দেখুন এবার dist নামে একটা ডিরেক্টরি ক্রিয়েট হয়েছে এবং সব html ফাইল সেখানে কপি হয়ে গেছেঃ

SASS কে CSS এ নেওয়াঃ

এজন্যে আমরা gulp এর gulp-sass প্লাগিন ইউজ করবো। এরকম gulp এর অনেক প্লাগিন আছে বিভিন্ন টাস্ক কমপ্লিট করার জন্যে। gulp এর অফিশিয়াল ওয়েবসাইটের তথ্য অনুযায়ী এখন পর্যন্ত gulp এর ৩,৬৯৫+ প্লাগিন রয়েছে। অলমোস্ট ইউজ করা হয় এমন সব কাজ করার প্লাগিনই পাবেন। প্রথমে gulp-sass ডেভ ডিপেন্ডেন্সি হিসেবে ইন্সটল করে নিনঃ

npm install --save-dev gulp-sass

এখন আমাদের প্রোজেক্টের src/css/style.scss ফাইলের ভিতরে কিছু SASS লিখা যাক, যেটা আমরা dist এর ভিতরে আসল CSS এ কনভার্ট করে নিয়ে যাবোঃ

$bgColor: #333;
$fontColor: #fff;
body {
 background: $bgColor;
 color: $fontColor;
}

এবার এটাকে কনভার্ট করে জায়গামতো নেওয়ার জন্যে নতুন আরেকটা টাস্ক ক্রিয়েট করা যাকঃ

gulp.task(\'sass\', function() {
 gulp.src(\'./src/css/*.scss\')
   .pipe(sass())
     .pipe(gulp.dest(\'./dist/css\'));
});

এখানে যেহেতু sass() ইউজ করেছি এটা অবশ্যই আগে require করিয়ে নিতে হবেঃ

const sass = require(\'gulp-sass\');

এখানে দেখুন এভাবেই pipe() ইউজ করে একটা অ্যাকশন (SASS কে CSS এ কনভার্ট করে) নিয়ে তারপর ডেসটিনেশন দিয়েছি। এবার এই টাস্ক রান করুনঃ

gulp sass

আর দেখুন আপনার CSS ফাইল একদম যেভাবে দিয়েছেন সেভাবেই চলে গিয়েছে।

স্ক্রিপ্টকে মিনিমাইজ করাঃ

আমাদের প্রোজেক্টে দুইটা স্ক্রিপ্ট ফাইল আছে। এবার এগুলোর ভিতরে কিছু লিখা যাক। alert.js ওপেন করে লিখিঃ

// Alert a message on the browser window
// Really Exciting
//
//
alert(\'I am learning Gulp JS\');
//
//
console.log(\'Log Nothing\');
', 6 | bookmark: true 7 | }, 8 | { 9 | id: '2', 10 | title: "জাভাস্ক্রিপ্ট ব্যাসিকসঃ With Zonayed", 11 | body: '

জাভাস্ক্রিপ্ট! জাভাস্ক্রিপ্ট কি? জাভাস্ক্রিপ্ট একটা প্রোগ্রামিং ল্যাংগুয়েজ। হাই লেভেল প্রোগ্রামিং ল্যাংগুয়েজ। হাই লেভেল ল্যাংগুয়েজ মানে? হাই লেভেল ল্যাংগুয়েজ মানে এই ল্যাংগুয়েজ অনেকটা সফটলি কোডেড। আপনাকে আপনার ম্যাশিন সম্পর্কে খুব বেশী কিছু জানতে হবে না এর জন্যে। যেমন সি ইউজ করতে গেলে আপনাকে ম্যাশিন কিভাবে কাজ করে, কিভাবে কোড কম্পাইল করে, কিভাবে রান করে, মেমোরি কতটুকু নিবে এগুলা ভাবতে হয়। হাই লেভেল ল্যাংগুয়েজে এতোকিছু ভাবতে হয় না। এখানে ল্যাংগুয়েজই আপনার হয়ে অনেক কাজ করে দিবে। এতে সুবিধা কি? হ্যা সুবিধা হলো আপনি একটা কপ্লেক্স অ্যাপ বানাবেন এখন আপনাকে অ্যাপের ফানশানিলিটি নিয়ে না ভেবে, সেগুলা নিয়া না কাজ করে যদি একদম রুট থেকে শুরু করেন, কোন টাইপের ডাটা নিবেন, মেমোরি কতটুকু যাবে এগুলা নিয়াই ভাবতে হয়, সময় দিতে হয় তাহলে দেখা যাবে আপনার অ্যাপের ব্যাকবোনই বানাতে বানাতে হয় আপনার বাজেট শেষ, নয়তো আপনি মোটিভেশন হারিয়ে ফেলছেন। সেক্ষেত্রে জাভাস্ক্রিপ্ট এর মতো হাই লেভেল ল্যাংগুয়েজ ফ্লেক্সিবল হওয়ায় আপনি বিহ্যাইন্ড দ্যা সীনে কি হচ্ছে না হচ্ছে এতোকিছু না ভেবেও আপনার মেইন কাজ স্টার্ট করতে পারবেন। আপনার অ্যাপেন মেইন ফানশানিলিটিতে মন সময় দুইটাই দিতে পারতছেন। তাই জাভাস্ক্রিপ্ট কে ল্যাংগুয়েজ হিসাবে বাছাই করা এই সময়ে যথোপযুক্ত সিদ্ধান্ত বলে আমি মনে করি।

এই ২০১৮ তে আরো প্রোগ্রামিং ল্যাংগুয়েজ ও তো আছে। কোনটা চুজ করবো? আজকে জাভাস্ক্রিপ্ট শিখলে কালকে যদি এটা মার্কেটে আর না থাকে? হ্যা এইটার একটা ভালো আন্সার আছে। যারা কম্পিউটার সাইন্সের স্টুডেন্ট তারা হয়তো জানেন এখানে প্রোগ্রামিং এর দুনিয়ায় সবগুলার কন্সেপ্টই অনেকটা এক। বলতে পারেন সব একই বেসের উপর তৈরী করা। তার মানে সামনে যে ল্যাংগুয়েজ আসবে বা অন্য কোনো টেকনোলিজি আসবে সেটার কন্সেপ্টও এগুলা থেকেই যাবে। মানে আপনি শিখলে ফালানো যাবে না কখনো। আমি কখনো বলবো না অনেক জব আছে জাভাস্ক্রিপ্ট এর উপর মার্কেটে, অনেক টাকা ইনকাম করা যায়। এগুলা তো সবাই জানে। কিন্তু আমি টেকনিকাল কারণগুলো বলবো কেন শিখবেন। আপনার সবকিছুর কন্সেপ্ট একই হওয়ায় আপনি ভালো করে একটা বুঝতে পারলেই পরে যেকোনোটায় সুইচ করে ফেলতে পারবেন। কোনো কোনো ল্যাঙ্গুয়েজে লাইব্রেরী বলে, কোনোটায় মডিউল বলে, কোনোটায় প্যাকেজ বলে। হয়তো একেকটায় একেক নামে ডাকা হয় কিন্তু মেইন আইডিয়া সবসময়ই সেইম। আর ল্যাংগুয়েজ সুইচে সবাই সবসময় আন ইজি ফীল করে। কিন্তু নতুন একটা ল্যাংগুয়েজ তৈরী হয় পুরোনোটার কিছু লিমিটেশনের জন্যই। মানে নতুন ল্যাংগুয়েজ হলেই বুঝবেন এটা আরো ফ্লেক্সিবল। আমি নিজের অভিজ্ঞতা থেকে বলতেছি কোনো জিনিস শিখতে কঠিন হলে সেটা নিয়া কাজ করা ইজি হয়। সেইম থিওরি অ্যাপ্লাই হবে ফ্রেমওয়ার্ক এর ক্ষেত্রেও। নতুন নতুন ফ্রেমওয়ার্ক আসে তার মানে এই না যে এইটা স্ট্যাবল না। অবশ্যই একেকটা ফ্রেমওয়ার্ক এর স্পেশালিটি একেক রকম আর মেইন কথা হলো পুরোনোটার কিছু লিমিটেশন কাটাতেই নতুনটা এসেছে। তাই ভয় করে বা না ভেবে আপনার কাজ সোজা শিখতে নেমে পড়ুন আর শিখা শুরু করেন। সেটা জাভাস্ক্রিপ্ট ই হউক আর পাইথনই হউক।

সে উদ্দেশ্যে আমি জাভাস্ক্রিপ্ট এর উপরে লেখা শুরু করেছি। আমার লেখা কয়েকটা ভাগে ভাগে হবে। ইতিমধ্যে আমি ব্যাসিক নিয়ে লেখা শেষ করে ফেলেছি।আমার জাভাস্ক্রিপ্ট এর ব্যাসিক নিয়ে লেখাগুলো নিচে লিস্ট করে দেওয়া হলো। ব্যাসিকে টোটাল ১৮ টা পর্ব আছে। যতটুকু সম্ভব ব্যাসিকের মধ্যে ততটুকু নিয়েই আলোচনা করেছিঃ

এখন পরবর্তি পর্বে আমি জাভাস্ক্রিপ্ট অ্যাডভান্স নিয়ে লিখবো। সেখানেও এরকম কয়েকটা পর্বে ভাগ করে লিখবো।

A Small Teaser ;)

সে জন্যে মিডিয়ামে বা সোশ্যাল মিডিয়াতে আমাকে ফলো করতে পারেন। অথবা আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!

', 12 | bookmark: false 13 | }, 14 | { 15 | id: '3', 16 | title: "JavaScript: The World’s Most Misunderstood Programming Language", 17 | body: '

Our University has organized a Hackathon few days ago. Usually, they provide us some problems and we have to solve them using some major languages like C, C++, Java or Python. But They didn’t keep the option for JavaScript. I was asking one of the coordinator whether I could use JavaScript or not. He totally replied negatively and neglected it. He said JavaScript is not programming language, it’s just a scripting language

So this is how the world’s most famous and powerful Programming Language, JavaScript is misunderstood by everyone. They don’t consider it as Programming Language. And in the mean time, most of us are also confused whether It is actually a programming language like C/C++ or not. So that’s why today I am going to discuss about it.

JavaScript has been misunderstood. And it is a top open secret that this is actually the most underrated Programming Language. There are several reasons for that. First I am focusing on those reasons:

  1. The JavaScript name itself is confusing. Most of the time people think it as a subset of Java programming language.
  2. Also some people think it as only a scripting language, which is a subset of Java as it is called as JavaScript (Script of Java or something like that)
  3. JavaScript is very popular among the web as scripting language. Most of us think that this is the only reason why people use it
  4. The ECMA committee which is responsible for the standard of JavaScript specifications makes very poor quality documentation which is very hard to understand and also people get confused easily
  5. Most of the JavaScript programmer doesn’t have enough programming basic. They can easily start with JavaScript without even knowing anything about the programming world which lead them to write poor code. As it is very high in number, other people coming from any other programming language think that it is not maintaining programming standards
  6. The JavaScript is said to be a Object Oriented Programming language, but till its most popular version called ES5, there was the concept of objects which can hold data but there was no concept of class or anything like that what makes most of the people confused

And there are some other reasons as well. But they are the most highlighted reasons why people get confused and think it as a normal scripting language, not a programming language like C, C++

Now I am going to discuss what JavaScript is actually and How we can get to know about it whether it is actually a programming language or not:

  1. JavaScript is not a subset of Java. It doesn’t have any connection with Java. Its syntax is like other major languages most of the time. But it doesn’t mean it is following Java. They are totally two different Programming Language.
  2. C is the mother of all languages. C will be the same always. But That doesn’t mean JavaScript is not a programming language. Most of the time JavaScript is found to be faster than those languages for using some uncommon strategies.
  3. JavaScript is mostly used in the web. But it is not the only thing that it can do. Have you ever seen that you can use it for machine learning, you can use it for Arduino as well? I am leaving the discussion on Node JS, because most of the people know about it. But I will discuss about those things that people don’t know about.
  4. JavaScript is a very nice dynamic and Object Oriented Programming Language and It is very easy to learn actually.
  5. You will find three time period for the Programming Languages. Procedural Programming Language > Object Oriented Programming Language > Functional Programming Language. So, functional programming language is the future now. JavaScript is removing all its weak points in the new versions and also moving toward functional programming language slowly which is very futuristic
  6. JavaScript’s new specification ES6 has all the concept from Object Oriented Programming Language
  7. Though amateurs can use JavaScript as it is very easy to learn. But if you are familiar with the world of programming then you can even use it to implement sorting, searching algorithms and so other stuff just like other languages. It depends on your habit, practices. JavaScript allows everything you will find in the other languages.
  8. Every machine/device nowadays comes with at least one JavaScript engine which makes it truly cross platform programming language and also it can help you to make cross platform application.

Some Inspirations:

If someone talks about the future of JavaScript then this is what we can expect in future. Let me give some references:

  1. Deeplearn.js: If you are interested in machine learning than you should take a look at this framework

deeplearn.js
a hardware-accelerated machine intelligence library for the webdeeplearnjs.org

2. Johnny-Five: If you trying to work with Arduino then It is a must see framework for you:

Johnny-Five: The JavaScript Robotics & IoT Platform
Johnny-Five is the original JavaScript Robotics & IoT Platform. Released by Bocoup in 2012, Johnny-Five is maintained…johnny-five.io

3. Propel ML: If you know numpy, then you will be surprised JavaScript also has something like that

propelml/propel
propel - Differential Programming in JavaScript.github.com

4. KerasJS: With KerasJS, you can run Keras models in the browser, with GPU support using WebGL. Models can also be run in Node.js, but only in CPU mode.

Keras.js - Run Keras models in the browser
Edit descriptiontranscranial.github.io

5. Brain JS: Brain.js is a set of JavaScript libraries for training neural networks and Naive-Bayesian classifier.

brain.js
GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over…github.com

6. Electron JS: You want to make desktop application? What if you don’t have to built the application separate for every operating system? Yes, Electron is used to make cross platform desktop application

Electron |Build cross platform desktop apps with JavaScript, HTML, and CSS.
Build cross platform desktop apps with JavaScript, HTML, and CSS.electronjs.org

And there are many more available on the internet and many more to come in future. So what do you think about JavaScript now? Let me know your own preferences and expectations. Thank You!

This post has been previously published in my Blog. If you are very curious about the current technologies going on with JavaScript then you might want to visit my blog once. You can also subscribe me from there so that It will be easy for you get my stories just into your inbox. Thanks for being with me for a long time.

NewStory.js:32

 

Our University has organized a Hackathon few days ago. Usually, they provide us some problems and we have to solve them using some major languages like C, C++, Java or Python. But They didn’t keep the option for JavaScript. I was asking one of the coordinator whether I could use JavaScript or not. He totally replied negatively and neglected it. He said JavaScript is not programming language, it’s just a scripting language

So this is how the world’s most famous and powerful Programming Language, JavaScript is misunderstood by everyone. They don’t consider it as Programming Language. And in the mean time, most of us are also confused whether It is actually a programming language like C/C++ or not. So that’s why today I am going to discuss about it.

JavaScript has been misunderstood. And it is a top open secret that this is actually the most underrated Programming Language. There are several reasons for that. First I am focusing on those reasons:

  1. The JavaScript name itself is confusing. Most of the time people think it as a subset of Java programming language.
  2. Also some people think it as only a scripting language, which is a subset of Java as it is called as JavaScript (Script of Java or something like that)
  3. JavaScript is very popular among the web as scripting language. Most of us think that this is the only reason why people use it
  4. The ECMA committee which is responsible for the standard of JavaScript specifications makes very poor quality documentation which is very hard to understand and also people get confused easily
  5. Most of the JavaScript programmer doesn’t have enough programming basic. They can easily start with JavaScript without even knowing anything about the programming world which lead them to write poor code. As it is very high in number, other people coming from any other programming language think that it is not maintaining programming standards
  6. The JavaScript is said to be a Object Oriented Programming language, but till its most popular version called ES5, there was the concept of objects which can hold data but there was no concept of class or anything like that what makes most of the people confused

And there are some other reasons as well. But they are the most highlighted reasons why people get confused and think it as a normal scripting language, not a programming language like C, C++

Now I am going to discuss what JavaScript is actually and How we can get to know about it whether it is actually a programming language or not:

  1. JavaScript is not a subset of Java. It doesn’t have any connection with Java. Its syntax is like other major languages most of the time. But it doesn’t mean it is following Java. They are totally two different Programming Language.
  2. C is the mother of all languages. C will be the same always. But That doesn’t mean JavaScript is not a programming language. Most of the time JavaScript is found to be faster than those languages for using some uncommon strategies.
  3. JavaScript is mostly used in the web. But it is not the only thing that it can do. Have you ever seen that you can use it for machine learning, you can use it for Arduino as well? I am leaving the discussion on Node JS, because most of the people know about it. But I will discuss about those things that people don’t know about.
  4. JavaScript is a very nice dynamic and Object Oriented Programming Language and It is very easy to learn actually.
  5. You will find three time period for the Programming Languages. Procedural Programming Language > Object Oriented Programming Language > Functional Programming Language. So, functional programming language is the future now. JavaScript is removing all its weak points in the new versions and also moving toward functional programming language slowly which is very futuristic
  6. JavaScript’s new specification ES6 has all the concept from Object Oriented Programming Language
  7. Though amateurs can use JavaScript as it is very easy to learn. But if you are familiar with the world of programming then you can even use it to implement sorting, searching algorithms and so other stuff just like other languages. It depends on your habit, practices. JavaScript allows everything you will find in the other languages.
  8. Every machine/device nowadays comes with at least one JavaScript engine which makes it truly cross platform programming language and also it can help you to make cross platform application.

Some Inspirations:

If someone talks about the future of JavaScript then this is what we can expect in future. Let me give some references:

  1. Deeplearn.js: If you are interested in machine learning than you should take a look at this framework

deeplearn.js
a hardware-accelerated machine intelligence library for the webdeeplearnjs.org

2. Johnny-Five: If you trying to work with Arduino then It is a must see framework for you:

Johnny-Five: The JavaScript Robotics & IoT Platform
Johnny-Five is the original JavaScript Robotics & IoT Platform. Released by Bocoup in 2012, Johnny-Five is maintained…johnny-five.io

3. Propel ML: If you know numpy, then you will be surprised JavaScript also has something like that

propelml/propel
propel - Differential Programming in JavaScript.github.com

4. KerasJS: With KerasJS, you can run Keras models in the browser, with GPU support using WebGL. Models can also be run in Node.js, but only in CPU mode.

Keras.js - Run Keras models in the browser
Edit descriptiontranscranial.github.io

5. Brain JS: Brain.js is a set of JavaScript libraries for training neural networks and Naive-Bayesian classifier.

brain.js
GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over…github.com

6. Electron JS: You want to make desktop application? What if you don’t have to built the application separate for every operating system? Yes, Electron is used to make cross platform desktop application

Electron |Build cross platform desktop apps with JavaScript, HTML, and CSS.
Build cross platform desktop apps with JavaScript, HTML, and CSS.electronjs.org

And there are many more available on the internet and many more to come in future. So what do you think about JavaScript now? Let me know your own preferences and expectations. Thank You!

This post has been previously published in my Blog. If you are very curious about the current technologies going on with JavaScript then you might want to visit my blog once. You can also subscribe me from there so that It will be easy for you get my stories just into your inbox. Thanks for being with me for a long time.

', 18 | bookmark: true 19 | }, 20 | { 21 | id: '4', 22 | title: "What is Lorem Ipsum?", 23 | body: '

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

', 24 | bookmark: false 25 | }, 26 | { 27 | id: '5', 28 | title: "Where does Lorem Ipsum come from?", 29 | body: '

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

', 30 | bookmark: false 31 | }, 32 | { 33 | id: '6', 34 | title: "Why do we use Lorem Ipsum?", 35 | body: '

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

', 36 | bookmark: false 37 | }, 38 | { 39 | id: '7', 40 | title: "Where can I get some Lorem Ipsum?", 41 | body: '

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

', 42 | bookmark: true 43 | }, 44 | { 45 | id: '8', 46 | title: "How do we write List Items in Lorem Ipsum", 47 | body: '

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

NewStory.js:32

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

', 48 | bookmark: false 49 | }, 50 | { 51 | id: '9 ', 52 | title: "JavaScript: The World’s Most Misunderstood Programming Language", 53 | body: '

Our University has organized a Hackathon few days ago. Usually, they provide us some problems and we have to solve them using some major languages like C, C++, Java or Python. But They didn’t keep the option for JavaScript. I was asking one of the coordinator whether I could use JavaScript or not. He totally replied negatively and neglected it. He said JavaScript is not programming language, it’s just a scripting language

So this is how the world’s most famous and powerful Programming Language, JavaScript is misunderstood by everyone. They don’t consider it as Programming Language. And in the mean time, most of us are also confused whether It is actually a programming language like C/C++ or not. So that’s why today I am going to discuss about it.

JavaScript has been misunderstood. And it is a top open secret that this is actually the most underrated Programming Language. There are several reasons for that. First I am focusing on those reasons:

  1. The JavaScript name itself is confusing. Most of the time people think it as a subset of Java programming language.
  2. Also some people think it as only a scripting language, which is a subset of Java as it is called as JavaScript (Script of Java or something like that)
  3. JavaScript is very popular among the web as scripting language. Most of us think that this is the only reason why people use it
  4. The ECMA committee which is responsible for the standard of JavaScript specifications makes very poor quality documentation which is very hard to understand and also people get confused easily
  5. Most of the JavaScript programmer doesn’t have enough programming basic. They can easily start with JavaScript without even knowing anything about the programming world which lead them to write poor code. As it is very high in number, other people coming from any other programming language think that it is not maintaining programming standards
  6. The JavaScript is said to be a Object Oriented Programming language, but till its most popular version called ES5, there was the concept of objects which can hold data but there was no concept of class or anything like that what makes most of the people confused

And there are some other reasons as well. But they are the most highlighted reasons why people get confused and think it as a normal scripting language, not a programming language like C, C++

Now I am going to discuss what JavaScript is actually and How we can get to know about it whether it is actually a programming language or not:

  1. JavaScript is not a subset of Java. It doesn’t have any connection with Java. Its syntax is like other major languages most of the time. But it doesn’t mean it is following Java. They are totally two different Programming Language.
  2. C is the mother of all languages. C will be the same always. But That doesn’t mean JavaScript is not a programming language. Most of the time JavaScript is found to be faster than those languages for using some uncommon strategies.
  3. JavaScript is mostly used in the web. But it is not the only thing that it can do. Have you ever seen that you can use it for machine learning, you can use it for Arduino as well? I am leaving the discussion on Node JS, because most of the people know about it. But I will discuss about those things that people don’t know about.
  4. JavaScript is a very nice dynamic and Object Oriented Programming Language and It is very easy to learn actually.
  5. You will find three time period for the Programming Languages. Procedural Programming Language > Object Oriented Programming Language > Functional Programming Language. So, functional programming language is the future now. JavaScript is removing all its weak points in the new versions and also moving toward functional programming language slowly which is very futuristic
  6. JavaScript’s new specification ES6 has all the concept from Object Oriented Programming Language
  7. Though amateurs can use JavaScript as it is very easy to learn. But if you are familiar with the world of programming then you can even use it to implement sorting, searching algorithms and so other stuff just like other languages. It depends on your habit, practices. JavaScript allows everything you will find in the other languages.
  8. Every machine/device nowadays comes with at least one JavaScript engine which makes it truly cross platform programming language and also it can help you to make cross platform application.

Some Inspirations:

If someone talks about the future of JavaScript then this is what we can expect in future. Let me give some references:

  1. Deeplearn.js: If you are interested in machine learning than you should take a look at this framework

deeplearn.js
a hardware-accelerated machine intelligence library for the webdeeplearnjs.org

2. Johnny-Five: If you trying to work with Arduino then It is a must see framework for you:

Johnny-Five: The JavaScript Robotics & IoT Platform
Johnny-Five is the original JavaScript Robotics & IoT Platform. Released by Bocoup in 2012, Johnny-Five is maintained…johnny-five.io

3. Propel ML: If you know numpy, then you will be surprised JavaScript also has something like that

propelml/propel
propel - Differential Programming in JavaScript.github.com

4. KerasJS: With KerasJS, you can run Keras models in the browser, with GPU support using WebGL. Models can also be run in Node.js, but only in CPU mode.

Keras.js - Run Keras models in the browser
Edit descriptiontranscranial.github.io

5. Brain JS: Brain.js is a set of JavaScript libraries for training neural networks and Naive-Bayesian classifier.

brain.js
GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over…github.com

6. Electron JS: You want to make desktop application? What if you don’t have to built the application separate for every operating system? Yes, Electron is used to make cross platform desktop application

Electron |Build cross platform desktop apps with JavaScript, HTML, and CSS.
Build cross platform desktop apps with JavaScript, HTML, and CSS.electronjs.org

And there are many more available on the internet and many more to come in future. So what do you think about JavaScript now? Let me know your own preferences and expectations. Thank You!

This post has been previously published in my Blog. If you are very curious about the current technologies going on with JavaScript then you might want to visit my blog once. You can also subscribe me from there so that It will be easy for you get my stories just into your inbox. Thanks for being with me for a long time.

NewStory.js:32

 

Our University has organized a Hackathon few days ago. Usually, they provide us some problems and we have to solve them using some major languages like C, C++, Java or Python. But They didn’t keep the option for JavaScript. I was asking one of the coordinator whether I could use JavaScript or not. He totally replied negatively and neglected it. He said JavaScript is not programming language, it’s just a scripting language

So this is how the world’s most famous and powerful Programming Language, JavaScript is misunderstood by everyone. They don’t consider it as Programming Language. And in the mean time, most of us are also confused whether It is actually a programming language like C/C++ or not. So that’s why today I am going to discuss about it.

JavaScript has been misunderstood. And it is a top open secret that this is actually the most underrated Programming Language. There are several reasons for that. First I am focusing on those reasons:

  1. The JavaScript name itself is confusing. Most of the time people think it as a subset of Java programming language.
  2. Also some people think it as only a scripting language, which is a subset of Java as it is called as JavaScript (Script of Java or something like that)
  3. JavaScript is very popular among the web as scripting language. Most of us think that this is the only reason why people use it
  4. The ECMA committee which is responsible for the standard of JavaScript specifications makes very poor quality documentation which is very hard to understand and also people get confused easily
  5. Most of the JavaScript programmer doesn’t have enough programming basic. They can easily start with JavaScript without even knowing anything about the programming world which lead them to write poor code. As it is very high in number, other people coming from any other programming language think that it is not maintaining programming standards
  6. The JavaScript is said to be a Object Oriented Programming language, but till its most popular version called ES5, there was the concept of objects which can hold data but there was no concept of class or anything like that what makes most of the people confused

And there are some other reasons as well. But they are the most highlighted reasons why people get confused and think it as a normal scripting language, not a programming language like C, C++

Now I am going to discuss what JavaScript is actually and How we can get to know about it whether it is actually a programming language or not:

  1. JavaScript is not a subset of Java. It doesn’t have any connection with Java. Its syntax is like other major languages most of the time. But it doesn’t mean it is following Java. They are totally two different Programming Language.
  2. C is the mother of all languages. C will be the same always. But That doesn’t mean JavaScript is not a programming language. Most of the time JavaScript is found to be faster than those languages for using some uncommon strategies.
  3. JavaScript is mostly used in the web. But it is not the only thing that it can do. Have you ever seen that you can use it for machine learning, you can use it for Arduino as well? I am leaving the discussion on Node JS, because most of the people know about it. But I will discuss about those things that people don’t know about.
  4. JavaScript is a very nice dynamic and Object Oriented Programming Language and It is very easy to learn actually.
  5. You will find three time period for the Programming Languages. Procedural Programming Language > Object Oriented Programming Language > Functional Programming Language. So, functional programming language is the future now. JavaScript is removing all its weak points in the new versions and also moving toward functional programming language slowly which is very futuristic
  6. JavaScript’s new specification ES6 has all the concept from Object Oriented Programming Language
  7. Though amateurs can use JavaScript as it is very easy to learn. But if you are familiar with the world of programming then you can even use it to implement sorting, searching algorithms and so other stuff just like other languages. It depends on your habit, practices. JavaScript allows everything you will find in the other languages.
  8. Every machine/device nowadays comes with at least one JavaScript engine which makes it truly cross platform programming language and also it can help you to make cross platform application.

Some Inspirations:

If someone talks about the future of JavaScript then this is what we can expect in future. Let me give some references:

  1. Deeplearn.js: If you are interested in machine learning than you should take a look at this framework

deeplearn.js
a hardware-accelerated machine intelligence library for the webdeeplearnjs.org

2. Johnny-Five: If you trying to work with Arduino then It is a must see framework for you:

Johnny-Five: The JavaScript Robotics & IoT Platform
Johnny-Five is the original JavaScript Robotics & IoT Platform. Released by Bocoup in 2012, Johnny-Five is maintained…johnny-five.io

3. Propel ML: If you know numpy, then you will be surprised JavaScript also has something like that

propelml/propel
propel - Differential Programming in JavaScript.github.com

4. KerasJS: With KerasJS, you can run Keras models in the browser, with GPU support using WebGL. Models can also be run in Node.js, but only in CPU mode.

Keras.js - Run Keras models in the browser
Edit descriptiontranscranial.github.io

5. Brain JS: Brain.js is a set of JavaScript libraries for training neural networks and Naive-Bayesian classifier.

brain.js
GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over…github.com

6. Electron JS: You want to make desktop application? What if you don’t have to built the application separate for every operating system? Yes, Electron is used to make cross platform desktop application

Electron |Build cross platform desktop apps with JavaScript, HTML, and CSS.
Build cross platform desktop apps with JavaScript, HTML, and CSS.electronjs.org

And there are many more available on the internet and many more to come in future. So what do you think about JavaScript now? Let me know your own preferences and expectations. Thank You!

This post has been previously published in my Blog. If you are very curious about the current technologies going on with JavaScript then you might want to visit my blog once. You can also subscribe me from there so that It will be easy for you get my stories just into your inbox. Thanks for being with me for a long time.

', 54 | bookmark: false 55 | }, 56 | { 57 | id: '10', 58 | title: "Actually We’re not friends, We’re Family", 59 | body: '

I think the best gift given from Allah is the friendship. Friendship is a bond which cannot be broken with any power. Who you are and where you from, your power can’t break a friendship. I can say, even Hitlar didn’t have this power to break it. It is the toughest relationship in this galaxy.

I’ve got some friends in my life. They’re the most valuable person to me. There is no other reasons for it, only friendship. Most of the friends I’ve got in my life are very simple in their nature. They’re very friendly. They can sacrifice anything for me. They give me inspirations when I need. In fact I get everything. My life couldn’t be perfect if I didn’t meet some people. I don’t want to mention their name here because I can’t describe them with my bad English. After all, I have to say that I’ve got a best friend circle in the world. We’ve got us, we’ve got each other. Thanks duds for being with me….

', 60 | bookmark: true 61 | } 62 | ] 63 | -------------------------------------------------------------------------------- /src/helper.js: -------------------------------------------------------------------------------- 1 | export const leveningStr = (data, amount) => { 2 | let string = data.split(/<\/?\w*>/); 3 | string = string.reduce((data, one)=>data+=one); 4 | string = string.substr(0, amount); 5 | return string; 6 | } 7 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | --------------------------------------------------------------------------------