#Sass Tutorial for Beginners

[tutorialwithexample]

Unlock the Power of Sass: A Beginner-Friendly Tutorial

Welcome to our "Sass Tutorial for Beginners"! If you're just starting with web design or looking to refine your CSS skills, Sass (Syntactically Awesome Stylesheets) is a great tool to explore. Sass extends CSS, adding features like variables, nesting, and mixins, making your stylesheets more efficient and maintainable.

Why Sass? Sass helps you write cleaner and more organized code. It allows you to use variables for colors and fonts, making updates easy. Nesting lets you structure your CSS more logically, mirroring your HTML's structure. Mixins are reusable pieces of code, perfect for functions like gradients or button styles.

Getting Started with Sass To begin, you'll need a preprocessor to compile Sass into CSS. You can install a Sass compiler through Node.js or use tools like CodeKit or Prepros. Once set up, you can start writing in .scss files.

Basic Features to Explore

Variables: Store common values like colors or fonts for easy reuse.

Nesting: Keep your styles neat and mimic your HTML's hierarchy.

Mixins: Reuse styles and avoid repetitive code.

Sass makes CSS more powerful and easier to manage, especially for larger projects. Ready to dive in? Check out more details and examples in our comprehensive guide at Tutorial and Example. Happy coding!

[jtpoint]

This "Sass Tutorial for Beginners" covers the basics of Sass, including setup, variables, nesting, and mixins, helping newcomers enhance their CSS skills and streamline their stylesheet development.

[izicodes]

Mini React.js Tips #5 | Resources ✨

Continuing the #mini react tips series, this time it's SCSS/SASS' time to shine! CSS is great and all but I am a SCSS girlie and I wanted to learn how to add SCSS files to my projects. It's a bit different to how to add CSS files to your project so heads up~!

What you'll need:

know how to create a React project >> click

know the default React project's file structure >> click

know how to create a component >> click

know basic SCSS or SASS

basic knowledge of using the Terminal

What The Project Will Look Like:

*very basic but just want some SCSS styling to prove that the tips work~!

Big disclaimer: I have deleted all the code inside of the App()'s return() so that the default project is gone and the guide starts on a clean slate. I have also created a NavBar component beforehand as my testing component for this guide~!

[ 1 ] Open Terminal And Install Sass: Launch the terminal within your project folder. Execute the following command to install Sass as a development dependency for your project:

npm install -D sass

[ 2 ] Create SCSS File: In the 'src' folder, create your SCSS file - it ends with .scss for SCSS files and .sass for SASS files. Feel free to organize it into subfolders for a structured project.

[ 3 ] Style Your SCSS: Open the newly created SCSS file and add your styles, take advantage of variables, nesting, and more. (This is not all of my SCSS code):

[ 4 ] Import SCSS in Component: In the React component file where you want to apply these styles, import your SCSS file at the top:

import './[location of you SCSS/SASS file]';

[ 5 ] Run the Development Server: Start your development server with the command in the Terminal (the 'Local' link) + make sure your component is in the App() in App.jsx:

npm run dev

Congratulations! You've successfully added SCSS/SASS to your React project~!

Resources:

BroCode's 'React Full Course for Free' 2024 >> click

How to use Sass in React with Vite >> click

Sass Tutorial for Beginners - CSS With Superpowers >> click

React Official Website >> click

🐬Previous Tip: Tip #3 Adding CSS files to your project >> click

Stay tuned for the other posts I will make on this series #mini react tips~!

[unitygym20]

Are you ready to venture into the world of calisthenics? If you're a beginner looking to increase your strength, flexibility, and overall fitness level, then you're in the right place. Our latest YouTube video features Rad Burmeister, guiding you through an intuitive Calisthenics home workout. But that's not all - with this, you also get a FREE printable program card for your handy reference!The workout focuses on two key areas - Straight Arm Scapular Strength (SASS) exercises and lower body shrimp squats and eccentric Nordics strength exercises. But why, you might wonder, are these two so crucial?Straight Arm Scapular Strength (SASS) exercises are crucial for building foundational strength. SASS targets the muscles around your shoulder blades, leading to improved stability, balance, and power for your upper body movements. Whether you're reaching for something on a high shelf, swinging a tennis racket, or perfecting your pull-up, SASS exercises will make you stronger and more efficient. Lower body strength, on the other hand, is crucial for athletic performance.But the core strength of our program lies not just in these exercises alone - it's how they're integrated in the Unify Movement System (UMS). The UMS approach is built on the philosophy of integrating strength and flexibility, leading to maximum workout efficiency. The result? Better fitness outcomes in less time!When you train for strength while neglecting flexibility, you limit your potential for growth. Similarly, if you focus on flexibility without strength, you risk instability and injury. The UMS understands this delicate balance and blends both aspects seamlessly into your training regime. With UMS, every workout moves you towards being stronger, more flexible, and overall, fitter.Our latest YouTube video provides comprehensive tutorials for the SASS and stretching exercises, making it easy for you to follow along. And remember, your free printable program card is just a download away - it'll help you keep track of your sets and reps, and make your workout experience all the more convenient.By aligning your workout goals with our integrated system, you're signing up for a powerful transformation. It's time to explore what you're truly capable of with Rad Burmeister and the power of UMS. Press play today, and witness the change in you!

[outoftheblue-if]

AAAAHHH 💖💖💖 just saw your instagram story and it looks so good!!!! I'm so excited!!!! If it's not too much trouble, how did you learn twine? Specifically making the game look nice? Reading through your blog (and a few others) has really made me wanna write my own IF, but twine UI/CSS stuff is really overwhelming to me ;-;

Thank you so much, anon! 😍 I'm so happy you like what you've seen so far! Not too much trouble at all! ✨

Twine is honestly not that difficult to use, once you get used to it, though I can understand how it can be overwhelming to start off. I actually have a degree in frontend development, so HTML, CSS, Javascript & jQuery, which are the coding languages used, are already familiar to me, but you don't need a lot of knowledge to build your own game.

Twine already comes with a ready interface, so really all you need to make it look nice is some knowledge of CSS. There are so many great tutorials out there to help you out, such as this and this, which is all about styling and customising, and you can also find detailed tutorials and references to all that CSS is capable of at W3schools, which I use a lot. There are also some ready made twine templates to use like this one by @nyehilismwriting .

@townofcrosshollow also has a great “how to” guide on building games in Twine here, as well as several other coding resources here that is worth checking out ✨ There is also a detailed list of all of Twine’s features with examples here that I use a lot. And I know there’s a channel dedicated to coding help on @interact-if‘s Discord server if you ever get stuck. 

The reason why my game interface looks a little different is because I partly built it from scratch using the StoryInterface feature in Twine, and a lot of extra jQuery/JavaScript to make it work. I also use Visual Studio Code to build it, instead of working directly in Twine, so I can use things like Sass and Node to make it easier. Like I said, there are so many tutorials out there to help you out, but I would be more than happy to make a video or something to show how I built mine if people are interested in that. Let me know 😍

Beyond that, it’s all about trial and error, really! I’m also more than happy to assist with any coding difficulties, if I can, so you’re welcome to reach out if you’re stuck on something. The important part is to have fun with it, I think! 

Hope this helped, anon, and I hope you decide to go for it! ✨ Twine is a really great tool for beginners and once you get familiar with it, pretty easy to use. 

Thank you again for your lovely message! ✨❤️

[loadingthis7]

Responsive Design App Mac

Noun Project

Design App For Mac

Responsive Web Design App Mac

Responsive Design App Mac Desktop

Seashore is an open source image editor that utilizes the Mac OS X’s Cocoa Framework. Responsive design, react native, web dev, mobile app development, tutorial Published at DZone with permission of Gilad David Maayan. See the original article here. Oct 04, 2017 Responsive design support — allowing you to display the same pages differently on devices with different-sized screens — was rudimentary at best; you can swap between desktop and tablet versions, but if you've finished creating one layout, you'll have to start all over from a blank page to create the other.

The Noun Project is the perfect resource for designers that need generic UI/UX icons. They host an enormous collection of well-designed icons for everyday needs, like status icons, media buttons and menu icons. Their macOS app lives in your menu bar, ready to pop down and provide access to the huge array of icons from your desktop. If you pair it with a paid subscription to the Noun Project, you’ll get access to every icon on the site. Free accounts contains a smaller subset of icons.

Sketch

Sketch is a powerful vector editor designed for the web. It’s built to help designers create vector assets for websites and apps. It’s powerful and flexible, with a ton of tools tuned specifically to the needs of UX and UI developers. Stop fighting with Illustrator and check out a better—and cheaper—option.

JPEGMini

JPEGMini is a tool for compression JPGs before sharing them. Like it’s web-based client TinyPNG, it uses image optimization tricks to cut down the file size of large JPGs. The app can also resize images, saving them to a unique destination or overwriting the originals in the process. The Pro version even includes plugins for Lightroom and Photoshop, compressing your images straight out of the gate. If you need to process a ton of photos for your website but don’t want to suck up all your users’ bandwidth in the process, JPEGMini will be a huge help.

LittleIpsum

LittleIpsum is a free menu bar app that generates Lorem ipsum text for use in webpage mockups. It’s cool because it can quickly create text in a variety of lengths, and it’s always at your fingertips. Just click twice to copy a preset Lorem ipusm block of the chosen length to the clipboard, and then paste as normal.

Tower

Tower is a GUI for Git version control. It helps users work with Git by abstracting away the cryptic command line codes, simplifying Git version control while retaining its abilities. Considering how widespread Git is as a version control methodology, having a good client in your tool belt might make your life just a little easier.

Coda

Coda comes from beloved macOS developer Panic, which builds well designed and superbly functional Mac apps for designers and developers. Panic calls Coda “everything you need to hand-code a website, in one beautiful app.” It’s essentially a super-powerful IDE for building websites from scratch, including a powerful text editor, a WebKit-based preview module, and robust file and project management. If you’re looking for an all-in-one tool to help you build websites by hand, this is what you need.

Sublime Text

Sublime Text‘s praise have been sung far and wide across the development landscape. It’s a powerful, flexible text editor with a huge feature set geared specifically towards developers and programmers. It pioneered now-mandatory features like multi-caret editing (write in more than one place at a time!), massive customization and a built-in file manager. For users that need to get down and dirty with code, you couldn’t ask for a better text editor. The only downside is the $70 price tag. For users with shallow pockets, GitHub’s Atom is a free alternative with almost as much power and even greater flexibility.

CodeKit

CodeKit is just about essential for macOS web developers. It speeds up your web development workflow significantly by automatically refreshing browsers every time you save your code, but that’s not all it does. It also complies languages like CoffeeScript, Less, and Sass, and includes cutting edge tools like an auto-prefixer for vendor-specific prefixes and Babel.js for “next-generation” JavaScript. All in all, it makes web development on the Mac a much less tedious process.

FileZilla

FileZilla is a free, open-source FTP clients. You can use it to sync with remote servers using FTP and SFTP. If you’re doing any major web development, you know that an FTP client is a must for updating remote files. If you want a powerful but free alternative to slow or expensive apps, FileZilla fits the bill.

Design App For Mac

Sequel Pro

It’s developer calls Sequel Pro is a “fast, easy-to-use Mac database management application for working with MySQL databases.” It’s by far the most mentioned and most recommended Mac app for working with MySQL, the dominant database language of today. Great for advanced users and beginners alike.

MAMP

If you work on back-end or server-side development, you’ll need to have a functional testing environment on your mac. You can get a lot of the tools you need in one go with MAMP. MAMP stands for My Apache, MySQL, PHP, which are the three software packages it installs on your Mac.

You might also like:

The 20 Best OS X Apps for Designers & Web Developers

Top Mac Designer Apps

4 Alternatives To The MacBook Pro For Designers

Author: Alex Fox

Web Development Tools

Apple has brought its expertise in macOS and iOS development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can even preview your webpages for various screen sizes, orientations, and resolutions. To access these tools, enable the Develop menu in Safari’s Advanced preferences.

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a webpage, making development more efficient across macOS, iOS and tvOS. The clean unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. In macOS Sierra, you can discover new ways to debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a webpage. The rendered HTML is fully editable on the left and details about the webpage’s nodes, styles, and layers are available in the sidebar on the right.

Network. See a detailed list of all network requests made to load every webpage resource, so you can quickly evaluate the response, status, timing, and more.

Resources. Find every resource of a webpage, including documents, images, scripts, stylesheets, XHRs, and more. You can confirm whether everything was successfully delivered in the format and structure you expect.

Timelines. Understand all the activity that occurs on an open webpage, such as network requests, layout & rendering, JavaScript & events, and memory. Everything is neatly plotted on a timeline or recorded by frame, helping you discover ways to optimize your site.

Responsive Web Design App Mac

Debugger. Use the debugger to help you find the cause of any JavaScript errors on your webpage. You can set break points which allow you to pause script execution and easily observe the data type and value of each variable as it’s defined.

Storage. Find details about the data stored by a webpage such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. You can also see logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Responsive Design Mode

Responsive Design App Mac Desktop

Safari has a powerful new interface for designing responsive web experiences. The Responsive Design Mode provides a simple interface for quickly previewing your webpage across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. In addition, you can click on a device to toggle its orientation, taking it from portrait to landscape and even into Split View on an iPad.

[winstone]

top 8 coding websites

 1,  HackerRank,  is a websites for beginners programs that want to learn coding for fun other for people who want to learn it, also teaching coding languages. 

2. FreeCodingCamp,  is a sites that provides enormous quality posts, guides, and material for beginner programming enthusiasts to practice and master their coding skills.

3. GeeksforGeeks,  is a platforms for free content on learning more about numerous programming languages and other coding-related topics.

4.Codecademy,  is a brilliant place for beginner developers and programming enthusiasts to invest their time and effort to enhance their coding skills.

5. codementor,  is a community where people can learn programming by working on curated projects.

6.HackerEarth,  is Similar to HackerRank, HackerEarth provides a platform for both developers and companies.

7.W3Schools,  is a training website for learning web technologies online. Content includes tutorials and references relating to HTML, CSS, JavaScript, JSON, PHP, Python, AngularJS, React.js, SQL, Bootstrap, Sass, Node.js, jQuery, XQuery, AJAX, XML, Raspberry Pi, C++, C# and Java.

8.  GitHub and Stack Overflow,  is one of the best websites for any type of coding-related project. It provides you with multiple options.

sources :https://towardsdatascience.com/10-best-free-websites-to-learn-programming-939ec029009b

[paulocanilan-art]

List of Free Online Courses: Build New Skills As Learning Doesn’t Stop

Nobody can take your will to learn away from you; even if you're in quarantine or in the middle of a crisis, there's always a way to discover new skills and use it as your sword.

Trying to figure out the best ways to study when you're trapped at home? Worry no more, since in these times, you can simply enroll in virtual university classes to help you exercise your brain without paying a dime. There's certainly a class for you, whether you're interested in programming, graphic design, speech writing, or conflict resolution.

Here are six websites where you may get free educational courses to take from the comfort of your own home:

edX

edX provides free classes from renowned institutions in a variety of disciplines. It offers online university-level courses in a variety of areas to a global student base, with certain courses available for free. It also performs learning research depending on how users interact with its platform. It provides a wide range of humanities and natural science courses.

DataCamp

Like in Codeacademy, DataCamp is really good at learning a particular skill. It is a time-flexible, online data science learning platform offering tutorials and courses in data science. It has free beginner courses or the option to pay a subscription fee for access to all premium courses. It offers beginner-friendly coding classes and challenges in R, Python and SQL.

Coursera

Courseraoffers massive open online courses, specializations, and degrees and has almost 4,000 courses from major universities covering nearly every subject. Much of Coursera’s content is free, you can also upgrade to a paid plan to receive official course completion certificates or even enroll in online degree programs﹘from creative problem solving to personal branding, its free courses will help you build important career skills.

Udemy

Udemy has got some of the best courses by some amazing trainers all over the world. On completion of a course, you get a certificate of completion. You may also be interested in checking out our compilation of Best Udemy Courses.

CodeAcademy

In Codeacademy, you can learn all the technical skills you need. It also offers free coding classes to its basic courses covering different programming languages including Python, Java, JavaScript, Ruby, SQL, C++, Swift, and Sass, as well as markup languages HTML and CSS. If you want to access more thorough training, you will have to upgrade your account into a paid subscription.

YouTube

YouTube is a very helpful video-sharing platform whether you want to learn to draw, play an instrument, DIY ideas, or discover how-to videos. You can find pretty much anything on YouTube, especially the skills-based videos and channels; CrashCourse and TED-Ed are good channels to search for educational purposes.

In these unexpected trying times, it’s important that learning continues, even if it can’t happen in person. On the aforementioned list, the resources provide access to expert faculty, best practices, and other online learning resources for people who are studying, teaching or working remotely.

[bestscourses]

Laravel - Top 10 Best & Free Laravel online certification courses

https://www.bestscourses.com/Programming/best-free-Laravel-courses-certification/

Please find the below list of Top 10 Laravel online Certification Courses, classes, training programs, tutorial from top online education platforms - Learn Laravel from expert instructors

1. Become a Laravel Developer (Linkedin learning) 2. PHP with Laravel for beginners - Become a Master in Laravel (Udemy) 3. Master Laravel & Create High-Level Applications with Laravel (Udemy) 4. Laravel & Realtime: Build Several Realtime Apps with Laravel (Udemy) 5. RESTful API with Laravel: Build a Real API with Laravel (Udemy) 6. Laravel 8 PHP Framework A - Z Build Professional Ecommerce (Udemy) 7. Laravel 7 for Beginners practical course (Udemy) 8. Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass (Udemy) 9. Laravel 7 Tutorial for Beginners - Free course (Udemy) 10. Official Laravel Docs (Beginners, Intermediate, Advanced) - Free (Laravel Docs)

[freeonlinecoursesudemy]

Build Pro Websites From Scratch with HTML, CSS & SASS

HTML,CSS and SASS is the most important point to start designer career in software engineer field. They are essential subjects to learn in your software developer journey. It is really easy to learn them. The crucial thing you need to do is practicing every day. You will be able to create your own full responsive website design from scratch. You can create your own portfolio website design and your customers' website design after completing that video series. OVERVIEW OF VIDEOS’ CONTENTS There are more than 80 videos in this course. We will keep adding new example tutorials to help you to have better real world project experiences. You are able to download project files to overview on your side after watching tutorials. We believe in importance of practicing. Therefore, we are going to keep uploading new real word projects constantly. Who this course is for: Absolute Beginners Website Design Beginners Website Design Students People who want to have a career in this field Read the full article

[izicodes]

Hiya! Just wanted to share some Web Dev learning course videos I found really helpful! They're all pretty long and full of content! These videos can be the foundation of your web development journey and be used as a reference! If you do decide to work through the videos, do remember to code along - the best way to learn is by doing and, with programming especially, creating projects as well to apply what you've learned!

Most of the videos, if not at all, cover things like:

HTML5

CSS3

JavaScript

Responsive Design + Mobile design

jQuery

GitHub Tutorials

Tailwind CSS fundamentals

React fundamentals

Node.js

Next.js and more!

Now, onto the videos themselves below!

Web Development Tutorials For Beginners playlist by LearnCode.academy [link] 💻

Covers: HTML5, CSS, JavaScript, GitHub, Responsive Design

Full Course Web Development [22 Hours] | Learn Full Stack Web Development From Scratch by Codedamn [link] 💻

Covers: HTML5, CSS, JavaScript, React, Tailwind CSS, React Query, Node.js, Next.js

Full Stack Web Development for Beginners by FreeCodeCamp.org [link]

Covers: HTML, CSS, JavaScript, Node.js, MongoDB

Introduction To Responsive Web Design by FreeCodeCamp.org [link]

Covers: HTML, CSS, Flexbox, Media Queries

Web Development In 2022 - A Practical Guide by Traversy Media [link]

Covers: HTML, CSS, JavaScript, Sass, PostCSS, TypeScript fundamentals, Testing, Databases, GrapghQL, WordPress, REST APIs, UI kits & Libraries, Moblie Development fundamentals, Web3

Front End Development Full Course 2022 | Front End Development Tutorial For Beginners by Simplilearn [link]

Covers: Git and GitHub, HTML, CSS, JavaScript, ReactJS, Angular

Learn Web Development from Scratch by Edureka [link]

Covers: HTML, CSS, JavaScript, Node.js, Express.js, MongoDB, TypeScript

┌── ⋆⋅☆⋅⋆

Well, that’s all! I hope the videos are helpful!! 😋

Have a nice day/night and happy programming 👍🏾💗

└── ⋆⋅☆⋅⋆

[t-baba]

Setting up an ES6 Project Using Babel and webpack

In this article, we’re going to look at creating a build setup for handling modern JavaScript (running in web browsers) using Babel and Webpack.

This is needed to ensure that our modern JavaScript code in particular is made compatible with a wider range of browsers than it might otherwise be.

JavaScript, like most web-related technologies, is evolving all the time. In the good old days, we could drop a couple of <script> tags into a page, maybe include jQuery and a couple of plugins, then be good to go.

However, since the introduction of ES6, things have got progressively more complicated. Browser support for newer language features is often patchy, and as JavaScript apps become more ambitious, developers are starting to use modules to organize their code. In turn, this means that if you’re writing modern JavaScript today, you’ll need to introduce a build step into your process.

As you can see from the links beneath, converting down from ES6 to ES5 dramatically increases the number of browsers that we can support.

ES6 compatibility

ES5 compatibility

The purpose of a build system is to automate the workflow needed to get our code ready for browsers and production. This may include steps such as transpiling code to a differing standard, compiling Sass to CSS, bundling files, minifying and compressing code, and many others. To ensure these are consistently repeatable, a build system is needed to initiate the steps in a known sequence from a single command.

Prerequisites

In order to follow along, you’ll need to have both Node.js and npm installed (they come packaged together). I would recommend using a version manager such as nvm to manage your Node installation (here’s how), and if you’d like some help getting to grips with npm, then check out SitePoint’s beginner-friendly npm tutorial.

Set Up

Create a root folder somewhere on your computer and navigate into it from your terminal/command line. This will be your <ROOT> folder.

Create a package.json file with this:

npm init -y

Note: The -y flag creates the file with default settings, and means you don’t need to complete any of the usual details from the command line. They can be changed in your code editor later if you wish.

Within your <ROOT> folder, make the directories src, src/js, and public. The src/js folder will be where we’ll put our unprocessed source code, and the public folder will be where the transpiled code will end up.

Transpiling with Babel

To get ourselves going, we’re going to install babel-cli, which provides the ability to transpile ES6 into ES5, and babel-preset-env, which allows us to target specific browser versions with the transpiled code.

npm install babel-cli babel-preset-env --save-dev

You should now see the following in your package.json:

"devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1" }

Whilst we’re in the package.json file, let’s change the scripts section to read like this:

"scripts": { "build": "babel src -d public" },

This gives us the ability to call Babel via a script, rather than directly from the terminal every time. If you’d like to find out more about npm scripts and what they can do, check out this SitePoint tutorial.

Lastly, before we can test out whether Babel is doing its thing, we need to create a .babelrc configuration file. This is what our babel-preset-env package will refer to for its transpile parameters.

Create a new file in your <ROOT> directory called .babelrc and paste the following into it:

{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } } ] ] }

This will set up Babel to transpile for the last two versions of each browser, plus Safari at v7 or higher. Other options are available depending on which browsers you need to support.

With that saved, we can now test things out with a sample JavaScript file that uses ES6. For the purposes of this article, I’ve modified a copy of leftpad to use ES6 syntax in a number of places: template literals, arrow functions, const and let.

"use strict"; function leftPad(str, len, ch) { const cache = [ "", " ", " ", " ", " ", " ", " ", " ", " ", " " ]; str = str + ""; len = len - str.length; if (len <= 0) return str; if (!ch && ch !== 0) ch = " "; ch = ch + ""; if (ch === " " && len < 10) return () => { cache[len] + str; }; let pad = ""; while (true) { if (len & 1) pad += ch; len >>= 1; if (len) ch += ch; else break; } return `${pad}${str}`; }

Save this as src/js/leftpad.js and from your terminal run the following:

npm run build

If all is as intended, in your public folder you should now find a new file called js/leftpad.js. If you open that up, you’ll find it no longer contains any ES6 syntax and looks like this:

"use strict"; function leftPad(str, len, ch) { var cache = ["", " ", " ", " ", " ", " ", " ", " ", " ", " "]; str = str + ""; len = len - str.length; if (len <= 0) return str; if (!ch && ch !== 0) ch = " "; ch = ch + ""; if (ch === " " && len < 10) return function () { cache[len] + str; }; var pad = ""; while (true) { if (len & 1) pad += ch; len >>= 1; if (len) ch += ch;else break; } return "" + pad + str; }

Continue reading %Setting up an ES6 Project Using Babel and webpack%

by Chris Perry via SitePoint https://ift.tt/2HA1AmE

[shuakkinda-blog]

Joshua crushing on you !! // scenario

A bullet-point scenario starring our LA boy, Joshua Hong!!

Send in reaction and scenario requests on my page if you’d like to :)

- Josh is legit the kind of boy that my parents want me to bring home LMAO

- I don’t even have to list out why bc we all know that he is the epitome of a gentleman

- well, most of the time

- if you didn’t hear

- Josh has this secret “not-so-gentlemanly” side lolol

- I KNOW I KNOW IT CAN BE A LITTLE HARD TO IMAGINE AT FIRST BC THE BOY LOOKS LIKE A HARMLESS BUNNY

- but svt keeps bringing up how different Joshua can be off camera and I can’t help but think that they mean he’s 5000x more sassy irl

- and no not the bad kind of sassy, I mean the fun kind

- the type of sassy that keeps the conversation interesting 

- why I’m bring this up is because although Josh would want to show his gentlemanly side to his crush

- he’d also want to show his crush that he’s not always the passive, quiet type

- Josh knows there’s another side of him that could ALSO get him the girl he’s after

- and if she can handle this hidden side of his

- then he’ll know that this girl is definitely meant to be with him

- AY SCENARIO TIME !

- so as an intern at pledis, you’re given access to all of the company building’s facilites ay it’s lit

- from the water dispensing machines to the high quality speaker systems

- they’re all at your disposal

- as long as no one else is using them at the moment

- so one day you’re finishing up the last of your daily internship tasks when you spot a guitar atop a random table !!

- do yall know where I’m going w this?

- what does this guitar even have to do with you, you ask?

- well you’ve actually been wanting to learn how to play this m a g i c a l instrument for awhile 

- but you could never find a guitar that you could readily use for learning

- and since pledis is aLLOWINg you uSe whAtEver you wAnt in the buiLDINg

- you’re like:

- “wHAT THE HECK LET’S DO IT.”

- so you get the guitar in your hands and take it to a vacant office in the building

- at first you think it’ll be a breeze learning the instrument because THE INTERNET is by your side

- and guitar tutorials exist all over youtube soOoOOo

- WELL I’M SORRY YOU’RE WRONG IT’S ACTUALLY PRETTY HARD LMAO

- even with the help of “guitar for dummies” beginner tutorials, you just can’t seem to make the chords sound decent without straining your fingers in the process lol

- and even with all the pain, your playing still doesn’t sound too good

- BUT BEING THE STRONG INDEPENDENT PERSON YOU ARE, YOU! DON’T! GIVE! UP!

- so you decide to make this “guitar practice” a routine thing after finishing your tasks around the building

- M E A N W H I L E

- Joshua, having arrived to the building on the day you took the guitar for the first time, comes up to the room where he keeps the guitar

- he stops his tracks at the sight of an empty table, the table he usually returns the guitar to

- “it’s not here??” he says internally

- “oh well, I guess it’ll be back by tomorrow,” he shrugs and carries on

- but the next day, the guitar isn’t there agaiN

- and Josh starts to get a little worried about its whereabouts

- he looks around the rest of the room, thinking someone might’ve placed it elsewhere after using it

- buh n0pe

- he kinda gets a little lazy in his search and gives up for the day

- “maybe tomorrow,” he tells himself

- he actually ends up telling himself this for a whole week bc it just never reappears again lol

- and with that week passing, Josh’s worry for the beloved six-stringed instrument only grows

- so he asks people around the building if they’ve seen it anywhere

- almost everyone says they haven’t seen it recently

- until Josh comes across Jihoon

- “hey Ji,” he calls out the producer, who is fetching himself a drink from the water dispenser outside his studio

- Jihoon’s eyes move to Josh, letting him know that he’s got his attention

- “have you seen the Taylor guitar anywhere? You know, the one that I always place on the table upstairs?”

- “no, I haven’t,” he replies plainly

- “Oh, okay. Thanks,” Josh’s eyes dart down at the floor in hopelessness

- but just before Jihoon retreats to his studio again, he takes a step back

- “actually,” he catches Josh’s attention again. “I was upstairs a few minutes ago and I heard someone playing a guitar in one of the vacant offices on the third floor, but I didn’t check who was playing.”

- “I know it wasn’t you because-” Jihoon snickers before he can continue his sentence

- “what? Was it bad?” Josh laughs lightly

- “it wasn’t too bad, but it definitely didn’t sound like a pro either.”

- “I’ll take that as a compliment for myself,” Joshua smiles and shakes his head. “Thanks, Ji.”

- “no problem. Good luck trying to get it back.”

- so Josh heads up to the office floor to investigate

- and upon arriving on the designated floor, he hears strumming coming from down the hall

- he creeps quietly through the floor until the strumming is loud enough

- then he crouches down next to the door of the office you’re in

- but before he could peek into the room...

- “UGHHGG WHY DOES THIS HURT SO MUCH,” you yelp

- and Josh, frightened by the sudden yelling, falls out of his position next to the office door, and his knee makes an audible thud

- you look back at the doorway and hEY IT’S THAT JOSHUA DUDE FROM SVT

- ... wait wTF IT’S THAT JOSHUA DUDE FROM SVT!1!1!!?!

- you guys know the basic things about each other from when you were formally introduced at the beginning of your internship, but that’s about it

- Josh’s face blushes pink upon being caught and he quickly gets up to brush off his knees

- “ah, uh, I’m- I’m sorry, I didn’t mean to... you know,” he struggles to find words

- you’re speechless for a few moments, but you eventually work up the courage to say something at least

- “how long were you waiting there for?” you laugh nervously

- “uhh... not long I promise,” he smiles and puts hands up in defense

- “regardless, you probably heard how bad I was,” you cover your mouth out of shyness

- “oh nonono, you’re actually not that bad,” he tries to make you feel better

- “did you not just hear me out there?” you laugh at him. “Trust me, I’m pretty bad.”

- “okay okay, so maybe you’re... just okay, but I think you’ve got a lot of potential.”

- and inside you’re kinda like WHERE? WHAT POTENTIAL? LOL

- but what he said gives you a little bit of hope and you can’t help but smile

- “I guess,” you tap the guitar nervously. “I just started learning about a week ago. I found this guitar on to-”

- “on top of a table on the second floor, I know,” Josh smiles

- oh shit, is this guitar his? you think

- “wait, have I been stealing your guitar?”

- “mm well it’s not really mine,” he replies. “But I use it the most out of every one in this building.”

- “well, with the exception of this past week, when it went missing,” he laughs

- “oh my god I’m so sorry for not asking. I just-” you think of a better way to apologize, but Josh, being an unDeRsTaNDiNg gEntLEmAn, is quick to forgive you

- “It’s fine, don’t worry about it. All of the facilities here are meant to be shared with everyone anyways.”

- Inside you’re all sassy n shit like, DAS RIGHT BIH I’M JUST FOLLOWING THE RULES K

- but on the outside you’re just:

- “ah I know but I think out of everyone here, you should have priority over the guitar, you know. Because you actually perform with it.”

- “yeah, but I’d love for you to be able to learn too. I don’t even perform with a guitar that often. It’s honestly just a side-hobby,” he tries to justify

- “hey, if you want, I can give you some lessons or something,” he offers shyly

- “I don’t know,” you contemplate aloud. “I’m pretty hopeless with this guitar thing... I’ve been using the easiest guitar tutorials on youtube and I still can’t get it right.”

- “I know. I went through that too,” Josh shares some sympathy. “But don’t you think learning the guitar in person is better than learning it from some random guy on the internet?”

- “well technically, you are some random guy off of the internet too,” you tease fr tho we wouldn’t know about svt if it woren’t for the internet

- “HEY, at least I don’t look like some old man that lives in an outhouse, like the guy in that tutorial there,” he points to your laptop screen

- he’s super nice for offering but

- jeez this guy’s attitude though, you think to yourself

- is it sass?? or humor??

- and i thought he was supposed to be the gentleman of the group...

 - ... WHATEVER I LOVE IT

- and aw shit he’s kinda cute too... I’d pick him over this old dude on the tutorial vids any day lmao

- so you accept the offer for a lesson or two

- and it’s mostly because you’re curious about Josh

- you know his public reputation as a nice guy/gentleman

- but this encounter with him definitely showcased another side of him

- and you want to know more about it...

- so the first lesson happens the day after you guys meet

- and you don’t know this but Josh is actually pretty stoked to be teaching you the guitar

- he’s been meaning to talk to you for awhile, but he never really had a legitimate excuse to do so

- until now :3

- and although he thinks he’s gonna revert to his “nice guy” self out of nervousness with you

- your easygoing attitude makes it easy for him to loosen up and be his true self

- he cracks funny insults and jokes here and there and it just makes the whole lesson really fun

- after having such a good time, you guys agree to make this a regular thing

- but slowly, as you get better at the guitar, your little lessons become less like lessons and more like regular hangouts

- a lot of times you’ll find yourselves just jamming out to whatever songs you feel like playing

- not only are you learning more about the guitar, but more about each other as well

- these “lessons” are honestly what the both of you look forward to the most everyday :’)

- one day, during one of your hangouts, you show Josh a song on the guitar that you’ve been practicing for awhile

- he recognizes the song and begins singing along with you

- it’s probably one of those throwback love songs you both heard when you guys were kids bc tbh he’d be huge sucker for those lol

- and as he goes through the lyrics

- he realizes something

- what he’s singing... he means it... for you

- it’s cute when this hits him because he kinda loses track of the song and thinks about the lyrics to himself while he stares at you AHH

- and you’ll have to snap him out of his thoughts like, “hey Josh, why’d you suddenly stop singing?”

- you’d also have to wave a hand at his face to get him to stop staring at you

- Josh shakes his head after snapping out of his daze and apologizes

- “oh my bad, I’m sorry, uh... Wanna take it from the top again?” he laughs nervously

- and at night he’ll think about that moment he kinda lost himself in the lyrics with you

- and he’d replay a particular thought in his head:

- Josh, I’m pretty sure you like y/n...

- but does she feel the same?

- CRUSHING HABITS DISCUSSION TIME !!!

- I think the one thing that would bother Josh when he’s crushing on you would be the question that’s two bullet-points up ^^^^^

- do you feel the same? HECK YEAH DUDE TAKE ME NOW

- this would be the basis of all the little things he does to you when crushing on you

- well for one, he’d be the type to move closer to you when hanging out with you just to see how you’d react

- prior to his crush on you, he’d just point to the strings you need to press on the guitar when teaching you

- but while he’s crushing, he’s definitely gonna come up behind you and put his arms around you so that you guys can play the on the same guitar at the same time

- and if you ask him why he’s changed his “method of teaching”

- he’s probably gonna use some stupid excuse like,

- “it’s just easier this way, okay?” AIGHT JOSH AIGHT

- and oh boy this guy’s gonna be so damn proud every time his gets you flustered

- he’d do this by shamelessly throwing a few random compliments here and there like:

- “hey Josh, this riff sounds pretty doesn’t it,” you say before pluck away gently at the strings of the guitar

- “I don’t know,” he says as he furrows his eyes at the instrument

- “why? What’s wrong with it?” you ask

- “hmm, I just think there are prettier things out there,” he’d pause as he looks up to your eyes

- “like you.”

- “what?” your cheeks tint pink and a tiny laugh escapes your lips

- Josh starts laughing at your face. “It was joke, y/n.” ISTG JOSHUA

- your cheeks heat up until the pink shade turns into a red. “HEY, that’s- that’s...” you struggle to find words

- “a lie, I know,” he smiles. “God, y/n, I get it. You’re pretty. You don’t have rub it in my face.”

- “JOSH WTH THAT’S NOT WHAT I MEA-”

- “Stop stop, I don’t wanna hear it,” he hold up a finger to your lips to make you shut up and die internally rip you

- also

- from time to time you’ll feel the need to ask why the hell Josh agreed to help you learn guitar in the first place

- bc he’s honestly such a great teacher and you fEEL SO UNWORTHY OF HIS KINDNESS

- “hey Josh, why me of all people?”

- “pardon?”

- “why did you offer to teach me guitar when we first met? You heard me and I sucked. Like real bad.”

- he laughs

- “doesn’t everything I do for you make it obvious?” Josh says as he cleans out the dust on the guitar

- “huh?”

- “jeez, y/n, anyone can see through all of this. You’re just oblivious,” he laughs before blowing the surface of the newly dusted instrument

- “J-Josh are you trying to say-” you think he’s trying to say he likes you but he cuts you off

- “that you’re dumb? Yes,” he smiles slyly

- you roll your eyes and get up from your seat, annoyed by all the useless things Josh is saying to you

- “wait y/n,” he laughs and grabs your wrist before you could walk out of the room.

- you try to tug your wrist out of his grip, but it’s too strong

- “c’mon y/n, I need you to keep making me smile,” he says, his eyes softening at the sight of your face again

- you redden once again

- “so stay,” he continues as he loosens his grip on your wrist and moves his hand down to yours

- you let go of his hand and he follows. “why are you always trying to use dumb lines on me,” you sigh and struggle to hide a shy smile

- “but they work, don’t they,” he smirks as you sit back down next to him

- Josh would feel comfortable making his crush on you obvious as long as you give off signals that you like him too

- or at least get flustered when he says something nice about you goddamnit

- SO YEAH you’ll be up at night wondering if Josh really means the words he’s always teasing you with

- honestly he’s just trying to get you to confess to him before he can

- Josh just wants to make sure you’ve fallen for him like he did for you :’)

- BUT if you’re a tough person to crack, he’ll eventually reach his own breaking point and will have to tell you how he feels somehow

- LEMME EXPLAIN

- on some days when you guys can’t meet up (aka days when Josh’s schedule doesn’t allow him to go to the company building while you’re there), Josh sends you a text with a song or two that he thinks would be nice to try on the guitar

- and one day, instead of a few song titles and their artists, you get a link

- so you tap on the link and it leads you to a private document

- it has chords and lyrics scattered across the page

- but you don’t recognize the song

- and wtf it doesn’t even have an artist name or title on it

- so you search some of the lyrics up

- but nothing matches up to it

- so you text Josh back and you’re like:

- you: “hey man what’s with song you sent me?”

- Josh: “what’s wrong? do you not like it?”

- you: “I don’t know the song and this document doesn’t have a title or the artist’s name???” “so I can’t even search it up and give it a listen first”

- Josh: “well if you’re wondering who the artist is”

- Josh: “it’s me”

- Josh: “:D”

- you: “hAh nice joke Josh” “no really who’s the artist”

- Josh: “I just said it’s me”

- you: “JOSHUA HONG TELL ME WHO WROTE THIS SONG BEFORE I GET ANY MORE FRUSTRATED”

- Josh: “y/n I’m not kidding, I wrote the song”

- Josh: “and I put it into a document so you could try it”

- you: “Josh how the fuck am I supposed to play it if I don’t even know whAT IT’S SUPPOSED TO SOUND LIKE???”

- Josh: “Idk make it up? lol”

- you: “I still don’t believe it’s yours” “the lyrics are too nice”

- Josh: “I’m offended”

- Josh: “but thanks I wrote it anyways”

- you both stare at your phones simultaneously before Josh continues

- Josh: “it’s fine if you don’t believe me. I just want you to look through it and tell me what you think”

- you: “well it’s nice, like woozi-quality music...”

- you: “mAYBE HE WROTE IT”

- Josh: “okay but would Jihoon talk about you in his lyrics?”

- you: “wait what?”

- you: “I don’t get it”

- you: “waiT JOSH”

- you: “THIS SONG”

- you: “THE LYRICS”

- you: “ARE YOU TRYNA SAY SOMETHING HERE?”

- you: “HONG ANSWER ME”

- you: “I KNOW YOU READ YOUR TEXTS FROM YOUR HOME SCREEN”

- you: “WHAT DO I HAVE TO DO TO GET YOU TO ANSWER ME”

- Josh: “text me when you get it”

- you stare at your phone once again

- Josh, what are you trying to say?

- you decide to give the lyrics another glance

- and you pick up on something familiar in a few of the verses

- “the songs are pretty, but there are prettier things like you”

- “I hold you close because it’s easier this way”

- “doesn’t everything I do for you make it obvious? see through?”

- “I need you to keep making me smile, so stay”

- did he just use the compliments he used to tease you with...

- to make a song?

- you immediately send a text to Josh

- you: “we need to talk when you get back”

- you wait for a quick response, but there’s none

- in fact, you check your messages, and it says he read it

- but nothing

- no word from Josh

- you’re kinda mad at him for the rest of the day for not replying

- the fact that he might just be confessing to you with these song lyrics keeps you up at night

- and you just wanted to talk it out with him to make sure everything’s crystal clear

- the next day you go to pick up the guitar in it’s usual spot, assuming you and Josh have no plans today since he’s so “busy”

- but the guitar isn’t there

- this can only be the works of a Joshua Hong, you think

- so you text him again:

- you: “Josh where is the guitar?”

- Josh: “I have it”

- you: “where”

- Josh: “find me ;)”

- you: “JOSHUA”

- you really want to talk to him today so you start your desperate search

- and you pretty much look everywhere except...

- wAIT THE VACANT OFFICE FLOOR, you scream internally before scrambling for the stairs

- and as you’re nearing that floor, you can hear the distant strumming of a guitar coming from one of the offices YALL KNOW

- and to no surprise, you find yourself at the doorway of the office you used to practice the guitar in all by yourself

- the office that Joshua found you in

- Joshua stops playing the guitar at the sight of you and smiles

- “why didn’t you reply to my text last night?” you ask in annoyance

- “because I knew you figured it out,” he says softly

- “yeah, I think... I mean, I could be taking it the wrong way but-”

- “go ahead. Tell me what you think I’m trying to say,” he leans back on his chair and waits patiently for your response

- you’re about to tell him you think it’s a confession to you

- but you know damn well that Josh is gonna embarrass you and say it means something else

- so you change up your answer

- “you’re trying to tell me that I’m dumb,” you smile coolly. “Like you always do.”

- “... you’re right,” he perks up a wider smile

- this was not the response you were expecting

- “JOSH,” you yell and pause for a moment to think about it

- “am I really?” you ask in an upset tone

- “yeah, y/n. You’re too dumb to realize that it was a co-”

- “CONFESSION I KNOW,” you say in frustration

- Joshua shies away, shifting his glance from your face to your shoes

- “looks like you’re not that dumb after all...”

- he actually... confessed?

- “well,” you clear your throat quietly. “I was pretty mad at you last night for not clearing this all up with me then, but consider yourself... forgiven.” a smile spreads across your face

- “what’s that supposed to mean?” Josh gets up from his seat and puts the guitar aside. He comes up close to you and looks down at your face, just inches away from his

- “are you sure I’m the dumb one?” you lift a brow. “because if you can’t tell what I mean by that, it’s probably you.”

- “it’s not,” his mouth curves up as he lifts your chin and lets his lips inch closer to yours

- but he stops before they can touch

- “wait, is this okay with you?” he asks hesitantly

- “Josh, as much as I love your gentlemanly side, I think it’s kind of ruining the moment,” you laugh

- “I’ll take that as a yes,” he replies before locking his lips with yours

- who knew someone could understand both sides of me so well? Josh smiles to himself

[netsmp]

UDEMY 5 Courses: The Complete 2020 PHP Full Stack Web Developer Bootcamp, HTML, CSS, JavaScript and BootStrap for FREE

New Post has been published on https://netsmp.com/2020/09/30/udemy-5-courses-the-complete-2020-php-full-stack-web-developer-bootcamp-html-css-javascript-and-bootstrap-for-free/

UDEMY 5 Courses: The Complete 2020 PHP Full Stack Web Developer Bootcamp, HTML, CSS, JavaScript and BootStrap for FREE

https://www.udemy.com/course/the-complete-php-full-stack-web-developer-bootcamp/?couponCode=SEPTBEE https://www.udemy.com/course/the-complete-php-full-stack-web-developer-bootcamp/?couponCode=SEPTBEE https://www.udemy.com/course/the-complete-php-full-stack-web-developer-bootcamp/?couponCode=SEPTBEE https://www.udemy.com/course/the-complete-php-full-stack-web-developer-bootcamp/?couponCode=SEPTBEE https://www.udemy.com/course/introduction-to-cloud-computing-on-amazon-aws-for-beginners/?couponCode=AWS-SALE https://www.udemy.com/course/introduction-to-cloud-computing-on-amazon-aws-for-beginners/?couponCode=AWS-SALE https://www.udemy.com/course/introduction-to-cloud-computing-on-amazon-aws-for-beginners/?couponCode=AWS-SALE https://www.udemy.com/course/ultimate-php-css-and-sass-enhance-your-javascript-skills/?couponCode=UDEMYSEP95 https://www.udemy.com/course/ultimate-php-css-and-sass-enhance-your-javascript-skills/?couponCode=UDEMYSEP95 https://www.udemy.com/course/ultimate-php-css-and-sass-enhance-your-javascript-skills/?couponCode=UDEMYSEP95 https://www.udemy.com/course/the-complete-php-full-stack-web-developer-bootcamp/?couponCode=SEPTBEE https://www.udemy.com/course/ultimate-php-course-for-absolute-beginners/?couponCode=SEPTBEE https://www.udemy.com/course/complete-php-oop-tutorials-for-absolute-beginners-projects/?couponCode=SEPTBEE https://www.udemy.com/course/html-css-javascript-and-bootstrap-for-absolute-beginners/?couponCode=SEPTBEE https://www.udemy.com/course/create-websites-with-html-css-for-beginners/?couponCode=SEPTBEE https://www.udemy.com/course/the-complete-php-full-stack-web-developer-bootcamp/?couponCode=SEPTBEE

[htmlcss4u]

Sass Tutorial for Beginners - CSS With Superpowers ☞ http://bit.ly/38m23FC #Sass #CSS

[wordpresstemplateslove]

Learn SASS and SCSS | Sass & SCSS Tutorial for Beginners ☞ http://bit.ly/2q8m7eK #php #programming