#css drop cap effect

[codenewbies]

CSS Drop Cap effect

[phantasyreign]

Tutorial: Adding a Drop Cap

Drop cap refers to the first letter that is larger than the rest of texts. Essentially, it looks like this:

In case if you don't know, the drop that I'm referring to is actually the 'w'

In this tutorial, I will show you how to create this effect by using CSS. Take note that there are many ways on how to create this effect. However, this is just my personal reference.

To create this the drop cap effect, all you need to do is just using the ::first-letter pseudo.

01. Create a class name with the pseudo element of first-letter. Let's put it as .fl::first-letter.

02. Now, design however you like. This is an example of what I did:

.fl::first-letter{ font-size:3rem; float:left; margin:0.5rem; padding:0.5rem; }

Note: Fundamentally, the above codes are the compulsory commands that you should be inserting into. You can add other stuff like background colors, text-shadows etc. Examples can be in my demo page!

03. After you done adding the CSS, we then need to add it inside our HTML area.

Inside your posts

Create a new post / Go to your post editor.

Click the gear button on your top right of the editor.

Change Text editor: Rich text to HTML.

At the first <p> that you see, add class="fl". So basically, you'll have <p class="fl">.

Inside your theme section - description, footer etc.

Identify the class name for the said section that you would like to add an drop cap. Let's say you wanna add a drop cap inside your description. If you're using my theme, usually, the class name for this section would be .desc.

Using the current class name for your description, add the pseudo element of first letter. So, it will turn to .desc::first-letter.

You can choose to design the same thing as what you did in step 02 or just design things differently.

With that, you finally create a drop cap!

Please like and/or reblog as a sign of support. If you would like to request a tutorial or have any suggestion/questions, do hmu via ask or message.

[darkestcanada]

The Marysburgh Vortex: Canada’s Bermuda Triangle

Many strange things have occurred on the eastern side of Lake Ontario.  Forming a triangle from Wolfe Island, Ontario to Point Petre, Ontario, to Mexico Bay, New York, the area is known for its many shipwrecks, disappearances, magnetic anomalies and other paranormal activities. Over 100 shipwrecks have occurred, including the vessels Eliza Quinlan (1883), Bavaria (1889), George A. Marsh (1917), and Star of Suez (1964). In 1900, the schooner Picton vanished on a clear day in late June. The schooner was captained by J. Sidley, who took his 12-year-old son, and a crew of five, to Belleville, Ontario to drop off a load of coal. A strong wind took her top sail, and two following vessels witness her vanish into thin air. All that was found was a sailor’s cap until a bottle was found by a boy in Sackett’s Harbor, New York. Inside the bottle -- corked, sealed, and wrapped in wire -- was a note scrawled in pencil saying: 

“Have lashed Vessey to me with heaving line so will be found together, J. Sidley, Picton”

Many people familiar with the Marysburgh Vortex have noted its magnetic anomalies, especially those that effect compasses. Current marine charts of the area show a noticeable and unusual ring shape feature 25 kilometres south of Kingston, noted as Charity Shoal. Located 25 feet underwater, the shoal is one kilometre in diameter and is a near perfect circle. It was recently studied by the National Geophysical Data Centre (NGDC) and the National Oceanic and Atmospheric Administration (NOAA). The NGDC noted: 

“The origin of the feature remains unknown. Although a sinkhole in the limestone terrane is a possibility, an origin related to a meteor crater, that was subsequently glaciated, seems more likely. Aeromagnetic mapping by the Geological Survey of Canada revealed a negative magnetic anomaly over Charity Shoal, which is a characteristic feature of simple impact craters.”

In 2013, the Universities Space Research Association (USRA), an non-profit research corporation, completed a study of the Charity Shoal Structure (CSS) and found its origins to be “... uncertain but it has been interpreted as an Ordovician age meteorite impact.” This would put the CSS at about 460 million years of age. The USRA found magnetic anomalies that could not be accounted for around the CSS as well. It could be that the mineral deposits or deformation of the crust by the meteor could be the cause of the magnetic anomalies. Meteorites often come in two forms: stoney and of iron-nickel or parts of small planets when the solar system was formed.” Should an iron-nickel meteorite be the cause of the CSS, it would rival Arizona’s Barringer Crater; formed by an iron-nickel meteor about 160 feet in diameter. 

Sources

https://en.wikipedia.org/wiki/Marysburgh_vortex

http://ottawacitizen.com/news/local-news/king-did-a-meteor-strike-give-birth-to-the-mysterious-bermuda-triangle-of-the-north

[vishankjoshi]

Top 7 Bootstrap 4 Templates to Download in 2020

In essence, Bootstrap is a library developed by Twitter that allows us to use its open source resources, quickly and efficiently. We can create our sections and landing pages from scratch or, if you prefer to take less time, download Bootstrap 4 Templates that are already pre-designed and that you can modify to your liking.

Bootstrap creating websites is very simple , since it gives us the possibility of developing a highly organized visual aesthetic, a quick ability to adapt to any device and the use of current technologies such as HTML5, CSS3 and JavaScript.

For all these reasons, the use of Bootstrap templates to create web pages quickly and easily is increasingly common . However, there are many free and premium bootstrap templates on the market and not all of them work well. Some have unnecessary code and others are simply not 100% responsive.

The Best Bootstrap Templates for your website of 2020

In this selection, we have gathered only the 5 best for your website of 2020  and, for this, we have based on the customization capacity, the cleanliness of the code, the loading speed and the opinions and considerations of other users who already have used it.

1.  Severny Bootstrap 4 Admin

If you are looking to build a website that’s user-friendly to access and manage, then an efficient control panel is a must. Severny Bootstrap 4 Admin is a Bootstrap admin template which fits this need perfectly with unique features and thoughtful design aesthetic. Offering greater control of your admin dashboards and control admin panels, this is one of the best Bootstrap 4 templates that comes in 10 different styles, each one with a modular content architecture that’s up to date with the latest design and UX trends.

Once you purchase a WrapPixel’s template you can rest easy knowing that you’ll be entitled to a free download of all our future updates for lifetime.

Our dedicated support team is at your service for any queries or clarifications. Simply send us your query at Wrappixel Support for quick resolution of your concerns.

2. Canvas - The best-selling responsive Bootstrap 4 Template of 2020

Canvas had to be in this selection yes or yes because it is the most popular of all . And it is a great choice for any type of business or web venture due to its great flexibility and simplicity when configuring or layout.

It has more than 100 predesigned demos with different styles so that you can easily find a template that fits the needs of your project and so you don't have to design it from scratch. In addition to the demos, the following elements are included:

●       165 Types of portfolio.

●       15 Headers with 10 different styles

●       The LESS CSS and SASS files.

●       Dozens of sliders with Revolution.

●       45 Templates for blog.

●       More than 50 shortcodes to integrate several elements at once.

●       And a looong etc .

Thanks to everything that this Bootstrap 4 template has and the code cleaning and ordering that it includes , Canvas is the option that I recommend the most lately to all web designers and developers who want a lot of versatility and speed of layout.

And last but not least, you will have access to a support forum, help tickets and extensive documentation at all times.

3. Pillar - Versatile and Professional

Pillar is one of the best Bootstrap templates for the web thanks to its versatility and ability to adapt to any type of business, through a modern and clean design.

It has more than 100 responsive templates , 20 home pages , several types of buttons, hundreds of fonts directly extracted from Google Fonts, a kit of 2000 icons at your disposal and a great variety of menus with different styles and columns with drop-down menus.

Also, if you want to create a blog, Pillar comes with several pre-designed blog layouts to apply directly to your website.

It also has modules for forms, iframes or any HTML format, and insertion of YouTube and Vimeo Widgets. It constantly has updates for the improvement and inclusion of more elements and has an online support system, in addition to having documentation with several help videos to work immediately.

4. Salimo - One of my favorite Bootstrap 4 Templates of 2020

Despite its simplicity, Salimo is a Bootstrap 4 template suitable for developing any type of web page and provides us with a responsive design designed for all types of mobile devices.

Among the most outstanding features that this theme has are: Slider Revolution (to incorporate animated Sliders, with videos and even using Parallax), Working Ajax contact forms, compatibility with any browser and has W3C validation .

Like Pillar, Salimo has 12 demos of 100% customizable pre-designed pages that you can use directly on your web page, 22 types of backgrounds with 3d and parallax effects, 10 skins of different colors to apply to the entire template, portfolio option for gallery of images and videos, a large number of fonts and custom icons, in addition to the possibility of inserting YouTube and Vimeo modules.

In addition, as you can see in the download link, it has many positive evaluations, so you can be sure that it is a Bootstrap 4 template of the highest quality .

5. Pofo - A multipurpose Bootstrap Template

Pofo is a simple, flexible bootstrap template that can be adapted to any type of business. First of all, you have at your disposal a panel of SMOF options (Slightly Modded Options Framework) with which you can modify the design of your web page with great ease .

It has 8 home page layouts , 5 blog page layouts, and 25 custom widgets. In addition, among its main features are: AJAX Thumbnail Rebuild (to compress and optimize images), it is programmed to facilitate your SEO strategy, it has various formats to publish on the blog (image gallery, videos and audios) and the code is very neat and without unnecessary lines .

Finally we can generate ShortCodes to insert buttons, columns, drop caps, and everything you can think of to work in a more comfortable way.

On the other hand, it has several demos located in an XML import file, with which you can quickly build, configure and maintain your website.

6. SmartBox - A long-haul responsive Bootstrap Template

SmartBox is positioned as another of the best responsive Bootstrap templates for building business web pages (commercial agencies, magazines, portfolios, etc.), due to its great versatility and diversity of predesigned templates adapted to your business.

In addition to having a flexible design, this theme adapts to any device, even those with Retina Display. It allows you to make quick changes to colors, fonts and page backgrounds and has several sample demos that you can use to create your business website.

In turn, this Bootstrap theme has a stock of 38 ShortCodes to speed up the development of your website . Simply by placing one of these codes, rows of pre-designed content are stacked so that you don't have to layout your page by hand.

Among its main characteristics, the following stand out:

●       Filtered portfolio using AJAX.

●       Flexslider (to incorporate animated banners, images or videos).

●       Ability to translate your website using WPML.

●       Widgets for social networks.

Finally, there are several support and help videos available to guide you through the configuration, construction and maintenance of your website.

In this way we conclude with our list of the Best Bootstrap Templates for your website of 2020. We hope it has been useful to you and in case you need to continue evaluating more templates, we invite you to see our other rankings on the blog.

7.  MaterialPro Bootstrap Admin

WrapPixel’s MaterialPro Bootstrap Admin is a premium bootstrap material design template comes packed with new, fresh, and attractive designs and ready-to-use components. Based on the popular Bootstrap 4 framework and inspired by Google’s material design, the MaterialPro Bootstrap Admin template is bundled with multiple third-party plugins that make it an excellent standalone solution.

With 1000+ Downloads and 5 Star review, this MaterialPro Bootstrap Admin Template is at last of this list but not the least. WrapPixel provides amazing technical support so no worries before buying.

[themesgear]

Wedding Day Review - This lovely niche theme is Built And Suitable

About Wedding Day

Wedding Day lovely niche theme is built and suitable for Weddings and Wedding Planner Businesses. It has purpose oriented design and it is suitable for users with zero programming skills as well as advanced developers. It includes a vast collection of elegant predesigned pages that can be used for various purposes – wedding announcements, countdown, photography and gallery pages, wedding invitations, guestbook and RSVP pages. You can add the wedding venue locations on the map. You can also easily set up a gift registry.

Buy Demo Themes Basic Details Themes Name Wedding DayAvailable Store ThemeforestThemes Type WeddingGutenberg SupportNoCompatible BrowsersIE11, Firefox, Safari, Opera, Chrome, EdgeColumns Support 4+Layout ResponsiveMobile Friendly Yes DocumentationClick Here To View DocumentationThemes Demo Click Here To View Themes Demo

How To Buy Wedding Day Wedding From Theme Store

First StepIf You Want Buy Themes From Themes forest Market You Need To First Login Or Register Second Step After Register Or Login Go To Shop At Themes forestThird Step Find Your Suitable Themes From Variety Of Available Themes At Themes forest Fourth StepOnce You Selected Your Themes Click On Buy Button At Themes Forest Fifth StepMake Your Payment From Various Of Payment Mode Available At Themes forest . Final Step Once Payment Successfully Done . You Will Redirect At Thank You For Your Purchase’ Screen . Now Everything Done . From My Account Anytime To View Your Purchase Details, And Download Your Theme Or Its Updates. How To Install Wedding Day Weeding Review The normal installation method is done via your WordPress Dashboard area. From your ThemeForest Downloads Screen, click the Download button next to Wedding Day. Select All files & documentation.On your computer, unzip this package you've just downloaded. Within, you'll find a file titled "Wedding Day.zip". This is the theme file.In your WordPress Dashboard, navigate to Appearance > Themes.Click the Add New button and then click the Upload button.Select the "Wedding Day.zip" file and click Upload.Once you've installed Wedding Day, click the Activate button. Complete list of features Highlights Bonus – wedding invitation.Optimised for speed.Sleek and easy to use Drag & Drop page, blog posts and portfolio posts builder.CSS animation option for most of the elements.Easy parallax builder.Revamped Admin Option Panel.900 Premium Icon Set – $39 Value!.Layered Slider Responsive WordPress Plugin ? $15 Value!Support for the premium plugin – Quform.980, 1080 or 1260 max resolutions.Unique featured slider for pages, blog and portfolio posts.   TOP NOTCH CUSTOMER SUPPORT Help Desk with one on one email and ticket support and dedicated support staff ready to assist you.Response times usually less than 8 hours.Video install guides for beginners.Extensive set up guide for beginners.In-Dashboard Contextual Help. There are little helpers everywhere in the interface, that let you retrieve quick information about the particular fields you are currently viewing.  NEXT-GENERATION FEATURES The VamTam drag & drop page builder is tightly integrated with tinymce editor and you can switch to visual or text editor at any time without losing any changes.Responsive liquid layout (320px to 1260px).Hardware-acceleration on sliders and all javascript.Unique mobile menu.Touch Enabled Sliders with swiping.Touch Enabled Featured Slider with swiping.Gracefully degrades in older browsers.  ENDLESS LAYOUT POSSIBILITIES Boxed and full-width layout.Choose from three max resolutions – 980 px, 1080 px, – 1260 px.Any page can be home page. Set-up your own home page as you wish! Unlimited Homepage variations.Flexible 6 sidebars in body and in footer.Flexible left, right or both sidebars on inner pages and posts.Unlimited Dynamic Sidebars.Unique widget areas for posts/pages.Global archive templates.Per page and per post option panels. TECH-SAVVY Vamtam Rock Solid Theme Framework.Lighting fast. Exceptional page-load performance straight out of the box.Nothing?s required but a standard PHP web hosting .Most of the themes nowadays are bloated with effects and you can hardly scroll the page. The Wedding Day is packed with CSS animations and yet light and with exceptional loading time.Valid HTML5 and CSS3 design following all modern best practices. Designed primarily with CSS, minimal graphics means minimal load-time.Consistent code structure.No Timthumb.Native WordPress Thumbnails support.Easily modify the theme options pages with our meta programming options generator.Very well-maintained and minimalistic code structure.Pixel perfect design.Custom post type support for Portfolios and Testimonials.Unobtrusive CSS3 and jQuery-powered effects. 900 Premium Icon Set – $39 Value!. Easy Parallax builder CSS animation option on most of the elements. 15 + custom ready to use pages with amazing design. Child Theme Support for Advanced Users. Theme skin switcher with 4 predefined skins. Plenty of Shortcodes. All our themes include Custom Shortcodes that allow you to easily add buttons, lightbox, icons, drop cap, divider, styled list, tooltip and more to your posts, pages and widgets. Fullscreen background images. Set a different background image for each page Set a different background color for each page. 55 + color pickers to style every element The theme will let you customize the style and typography of every element in the design. Packed with 100+ options, it allows you to make your website look exactly like you want! Mobile Support Responsive liquid layout (320px to 1260px).Unique mobile menu.Responsive Sliders.Responsive full width portfolio with categories and swipe support.Hardware-acceleration on sliders and all javascript.Touch Enabled Sliders with swiping.Gracefully degrades in older browsers.Dedicated mobile design, looks perfect on your Iphone and Ipad.The columns of portfolio,blog and featured slider layout respond to resolution.4 column layout will go down to 2 in mobile resolutions Drag & Drop Builder The VamTam drag & drop page is a very rich tool with simple interface for building any page or post layout with simple drag & drop. You don?t need to touch one line of code for creating your page layout and elements. This tool will save you lots of time on building your pages or posts. The VamTam drag & drop page builder is tightly integrated with tinymce editor and you can switch to visual or text editor at any time without losing any changes. Tabs and Accordion elements with drag and drop interface. Drag & Drop page builder works with pages, blog and portfolio posts. Powerful Theme Option Sleek and easy to use Drag & Drop page, blog posts and portfolio posts builder.Revamped Admin Option Panel.CSS animation option on most of the elements.Easy parallax builder.Shortcode generator.Tons of shortcodes with tiny MCE visual integration! SEO Friendly Built with semantic best practices and search engines in mind!Support for All in one SEO pack plugin.Support for WordPress SEO plugin by Yoost Read the full article

[designthing-net]

DOWNLOAD Absolute - The News, Blog and Magazine Theme

Absolute is a Wordpess theme for Magazine, Newspaper and Blog. We pack in here just the things you need to start a News/Review/Blog and this theme come with a very reasonable price. This theme has so many function and yet very easy to use. Please rate

if you like the theme and leave comments so we can make this theme better products.

SUPPORT & UPDATES We know it is very important to have somebody helping you go through the installation and setup so we take support very seriously. We want customers to happy with the theme, that is why we do the support by ourself not hiring some else to do it. Please visit our SUPPORT TICKET SYSTEM. WHAT CUSTOMERS SAY ABOUT OUR THEMES FULL FEATURES LIST 7 Predefined homepage Visit Main DEMO Visit DEMO 1 Visit DEMO 2 Visit DEMO 3 Visit DEMO 4 Visit DEMO 5 Visit DEMO 6 3 Navigation Styles View Demo 1 View Demo 2 View Demo 3 6 Header Styles Flexible number of columns (1,2,3 columns) Drag drop page builder – Visual Composer included (you save $28) Responsive & Retina ready 2 Page-width options: 970px and 1170px Powerful Themeoptions with more than 70 options SEO ready + Google Snippet ready Unlimited color variation Smart Content Box (to present your content in 5 different layout) Post slider shortcode Post carousel shortcode Auto load next post (when user scroll to the end of post) 5 custom widgets Banner Headlines Recent Comments Recent Posts Social Accounts Mega menu included Sticky Menu Rating Plugin included Editor rating User rating Top rated widget Easy Tab Widget included (you save $10) Intelligent Adsense management You can add your own banners OR You can add Google Ad banner ID Many Shortcodes Accordion Banner shortcode Buttons Compare pricing table Photo gallery Tab Tour section Block Quote Dropcap Post carousel Post sliders Post grid Post thumbnail slider Smart Content Box Topic And many shortcodes by Visual Composer Social Features Social Comment supported(Facebook Comment AND Disqus Comment) Social Sharing feature Social Accounts feature Flikr, Twitter widgets supported 5 Post format supported: Standard, Gallery, Video, Audio, Image Google font ready W3 Validation Translation ready with WPML compatible RTL Languages supported 1 Click Demo installation Auto update function Animated preloading effect Caching support (Total Cache) 5 star customer support – Visit CACTUSTHEMES SUPPORT SYSTEM Image and Photos All photos in LIVE DEMO is not included in the download pack. Thanks to: Mark Sebastian Daniel Zedda

Release Log Absolute 1.5.10 (11.05.2015) #Update: Visual Composer 4.11.2.1 Absolute 1.5.10 (13.01.2015) #Fix: Logo disappears on mobile when header layout is set to 3 #Update: Visual Composer 4.9.2 Absolute 1.5.9 (29.12.2015) #Fix: Comment count is not correct in shortcodes (SCB, Carousel) #Update: Visual Composer 4.9.1 #Update: demo data and links to document #Update: improve child theme to remove import stylesheet Absolute 1.5.8.2 (06.10.2015) #Fix: Featured Posts Count in archives pages doesn’t work #Fix: improve image’s height in grid shortcode #Update: Visual Composer 4.7.4 Absolute 1.5.8.1 (25.06.2015) #Update: Visual Composer 4.5.3 Absolute 1.5.8.1 (16.05.2015) #Fix: bug with DropCap shortcode in excerpt Absolute 1.5.8 (13.05.2015) #Fix: incorrect excerpt content of gallery post #Update: limit height of category tag of items on mobile screen #Update: Visual Composer 4.5.1 #Update: Class TGM Plugin Activation 2.4.1 #Update: Theme Options 2.5.5 Absolute 1.5.7 (06.04.2015) #Fix: conflicts between theme’s sliders and VC sliders #Update: Visual Composer 4.4.3 Absolute 1.5.6 (27.03.2015) #Fix: CSS for default WordPress Calendar widget #Fix: CSS for Smart Content Box #Fix: missing first letter in excerpt if Drop Cap shortcode is used #Fix: shortcode Classic Slider does not work in Visual Composer Post Gird Absolute 1.5.5 (25.02.2015) #Fix: color in slider does not change #Fix: Visual Composer shortcode buttons are hidden #Fix: non-latin URL breaks the site #Update: support google font subset Absolute 1.5.4 (11.02.2015) #Fix: remove warning message in 404 page #Fix: shortcode #Update: add Theme Options to return shortcode to default #Update: add Theme Options to order Related Posts randomly #Update: add Theme Options to hide featured image in single posts Absolute 1.5.3 (22.1.2015) #Update: add autoplay property for Carousel and Slider shortcode #Update: Visual Composer 4.4.1 Absolute 1.5.2 (9.1.2015) #Fix: Ads margin #Fix: Custom Social Icons feature #Fix: FrontPage layout 1 in 4/12 sidebar width mode #Update: Font Awesome 4.2 #Update: Cactus Rating plugin 2.0.1 to support Font Awesome 4.2 #Add: able to show Author social accounts in single post (under featured image) Absolute 1.5.1 (31.12.2014) #Fix: issues with child theme #Fix: some minor CSS issues #Update: Option Tree 2.4.6 Absolute 1.5 (29.12.2014) #Update: Visual Composer 4.3.5 to support WordPress 4.1 #Fix: duplicated Custom Code in front-end #Fix: bug with child theme #Update: support Google Font subset family for Heading and Navigation font #Add: Background Hyperlink Absolute 1.4 (19.12.2014) #Fix: Random order in some shortcodes #Fix: text does not appear in comment form on FireFox, Safari #Fix: Auto Update feature #Fix: logo on sticky menu in Header layout 2 #Fix: some 404 errors with font files #Update: support Google Fonts Subset #Update: remove option to show/hide comment in single post in Theme Options #Update: language file Absolute 1.3 (11.12.2014) #Fix: Navigation Font Size setting does not work properly #Update: 2 more heading styles for shortcode (inbox and border bottom) #Update: default avatar for comment form #Add: Wall Ads (Side Ads) feature #Add: choose different Category Color #Add: Sticky Sidebar/Widget #Add: Option to change main sidebar width (3/12 and 4/12) Absolute 1.2 (3.12.2014) # Fix: some CSS bugs # Fix: secondary font size does not work # Add: Option to turn on/off URL PushState change in single post NOV 28th 2014: Initial Release

Read the full article

[georgiagallagherixd]

Essay Website- Jessica Hische

I based my essay on Jessica Hische as I had previously heard about her ‘Daily Drop Cap’ project and found it interesting how her career basically took off due to this project. I loved this idea of creating my own ‘drop caps’ to introduce each section of my essay and felt that I could use Sketch in order to do so. Kyle very much encouraged me to do this and suggested that instead of my original idea of placing the letters in the nav, that I should make them a larger image size and have one per section. 

Above is a selection of the ‘drop caps’ which I created in sketch completely using geometric shapes. I really like how they turned out and decided not to stick to a theme and make each one unique to show a range of skills. I tried my best to use complementing colours so that the designs stood out on the page but did not look out of place. 

Attached are screenshots of my website and it can be seen that I have included a sticky nav bar within my webpage. I think that this works effectively when scrolling down the page as once the essay begins the nav bar stays to the top. I used CSS to style my title with a typeface similar to that on Jessica Hische’s. I think that this gives an illustrated look almost like a cover page of a book which is relevant to Hische’s design work.

I chose an orange colour scheme as it is used on Jessica Hische’s website and I felt that it complemented the ‘drop cap’ letters and images I had chosen to include well. 

[t-baba]

Web Design Weekly #358

Headlines

Thinking Beyond Screens

In the attention economy, we’re all fighting for our users’ attention. This post covers how to avoid dark UX patterns and practice responsible digital design. (framer.com)

Relearn CSS layout (every-layout.dev)

Collect visual feedback on your designs.

BugHerd pins feedback directly to the page. It’s like using sticky notes on a website. Try BugHerd Free. (bugherd.com)

Articles

Drop caps & design systems

Ethan Marcotte reminds us that most design systems work is rarely flashy or sudden. Rather, it involves communication, iteration, and slow, careful research. (voxmedia.com)

Good Code Reviews, Better Code Reviews

Gergely Orosz’s personal take on what good code reviews look like and what great ones – better than good – are. (blog.pragmaticengineer.com)

How We Write Full Stack JavaScript Apps

This post is aimed at those interested to learn how Elie Steinbock and his team build full stack apps. (medium.com)

Firefox: The Evolution Of A Brand

A peek behind the curtain of how the new brand look was born. (blog.mozilla.org)

Things I Learnt The Hard Way (blog.juliobiason.net)

Tools / Resources

Everything You Need to Know About Date in JavaScript

Date within JavaScript land can actually be quite simple if you know what to watch out for. In this article, Zell Liew walks you through everything you need to know about the Date object. (css-tricks.com)

Tips for Effective Product Design

A handful of useful tips to help you create the best product you can for your users. This article covers effective ways to communicate system status and how using progressive disclosure can reduce visual load. (timgale.me)

Using Cypress to Write Tests for a React Application

Cypress is just one end-to-end testing framework that does all that clicking work for us and that’s what this post dives into. (css-tricks.com)

Gatsby site search with Lunr.js

Building site search for a static website isn’t easy. Here’s how you can leverage Lunr.js to create search components that are accessible, fast and extensible. (assortment.io)

Build a Todo App in React Using Hooks (upmostly.com)

List of (Advanced) JavaScript Questions (github.com)

Plugins are coming to Figma (figma.com)

Inspiration

Digital Craft Symposium – 2019 (youtube.com)

All Emojis (listemoji.com)

Jobs

Front End Engineer at Goodreads (Amazon)

Join Goodreads to serve more that 80 million of our customers and build UX for reviews, emails, tools for authors and librarians, and more! You’ll primarily be focused on the display layer but you’ll have opportunities to work full-stack (goodreads.com)

Senior Product Designer at Lumosity

As Product Design Lead on the Mindfulness team, you’ll work in close collaboration with Product Managers, Content Creators, Engineers, UX-Researchers, and other Designers to meet the needs of Lumosity customers. (lumosity.com)

The post Web Design Weekly #358 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly http://bit.ly/2RtKSv2

[canmom]

Let’s read Umineko! part 15

[pt. 1] [pt. 2] [pt. 3] [pt.4] [pt. 5] [pt. 6] [pt. 7] [pt. 8] [pt. 9] [pt. 10] [pt. 11] [pt. 12] [pt. 13] [pt. 14]

Last time: in purgatory, Battler has informed Beatrice that she does not exist, that he absolutely refuses to belive in her, and this is threatening her power, but she’s not all that bothered. She challenged Battler to present mundane explanations for the various things she did.

Also I said it was harpsichord music which is weird because I should have written organ music.

There’s a second tea party on the menu now, marked ?????. It’s a tea party for the ‘unhuman’.

Does this excellent host remind you of anyone?

I’m just saying.

Anyway, Beatrice is joined by an unnamed character. Perhaps from a previous When They Cry game?

This turns out to be another witch. Her name is Bernkastel.

The witches’ names are both rendered ingame in small-caps. Since it’s difficult, and non-standard-compliant, to use Unicode’s small caps (intended for semantically distinct use in linguistics), and there’s no way to write a custom span tag to apply a font-variant: small-caps css rule, I’ll continue to write their names normally.

Their conversation is entirely cryptic.

So we know of another witch, Lambdadelta, or if you prefer Λδ.

Bernkastel teleports to another part of the room, and says Λδ has a terrible power: to kill a person ‘without fail’.

But she doubts it’s truly so great. She says, however, that Λδ’s power essentially works almost surely (in the technical sense). Beatrice responds that Bernkastel has a similar power, with the condition ‘except for 0′.

Bernkastel then says Beatrice has the power to kill a person ‘endlessly’. Beatrice says this is small compared to Bernkastel’s power, and stop it with the flattery already.

Apparently we’re dealing with a multiple-universes - fragments - scenario here. And bernakstel is interested in Beatrice’s epistemological argument with Battler.

Maybe this will make sense later.

What I’m getting from this: there are many witches, and they all have an interest in probability and powers that work on a limiting-case probabilistic basis. They like flattering each other and dislike being flattered.

Conditions:

Lambdadelta: power works ‘without fail’

Bernkastel: power works ‘except for 0′

Beatrice: power works ‘endlessly’

At the end, Bernkastel breaks the fourth wall and tells us (or perhaps Battler?) ‘something troubling has happened’ to us. She says she’d offer her power, but it would be ineffective against Beatrice. But she does drop us some Beatrice Facts.

To beat Beatrice, we have to ‘expose the rules of this world and unravel them’. This is compared to learning chess by watching games. First we notice the movements and roles of the pieces, then the win condition. This will reveal her ‘heart’ for us to rip apart or crush.

Bernkastel mentions she was herself once human, and it took her 100 years to learn this much. She refers to us as ‘the pitiful one captured by Beato’.

She’s at pains to say she’s not our ally, but she wants us to mess with Beatrice for entertainment purposes.

We get another credits roll, this time for the Umineko Project team. The full ‘tips’ page appears on the menu, now including details of Kinzu’s rifle, with confirmation it’s been sawn-off. It fires .45 long-colt bullets.

The Stakes are expanded to their full name of the Seven Stakes of Purgatory. They are accurate even around corners or tight holes, but only effective on someone who has committed one of the Seven Deadly Sins.

The characters page is also now filled in. We get details on Bernkastel.

All the characters have an ‘execute’ button where you can see the text for what happens when they die. These are... not impartial descriptions.

Battler’s has an especially interesting tidbit...

‘see you’? See who now? The player?

You can also click the execute button on the witches.

Most of the text is written by Maria, but the witches’ entries seem to be by themselves.

Oh great, she has a tail. I guess if you’re a thousand year old witch you ulose your catgirl inhibitions.

Well, that wraps up Episode 1. Episode 2 will be its own post, because I want to restart the numbering. Some final comments from @red-zora:

oh boy this is only th ebeginning of the Homestuck parallels, there are so fucking many that  i am half convinced Hussie is a big fan of Ryuukishi’s  lmao

also you didn’t comment on one of my fave quotes in the entire VN, where beatrice and MAria areboth referred to as ‘the witches’ together :P

Oh I must have missed that!

the PS3 version actually doens't have the original track for the rly dramatic scene where Natsuhi turns on the others, here is the original which has Star Trek quotes in it http://video-game-jams.tumblr.com/post/161699486666/umineko-when-they-cry-system0

Oh interesting! Yeah, the Umineko-Project release has this song, but it doesn’t have the star trek quotes.

actually, Battler is 18, to clarify

whoops, I think I misremembered bc I had it in my head that he was two years away from adulthood, and that’s something that varies between countries.

[melanycherub-blog]

Best Wedding Wordpress Theme

Best Wedding Wordpress Theme : The Wedding Day is a lovely, responsive theme. It is perfect for your wedding event. It comes with RSVP Form, Countdown and Guestbook.

Best Wedding Wordpress Theme

Complete list of features

Highlights

Bonus – wedding invitation.

Optimised for speed.

Sleek and easy to use Drag & Drop page, blog posts and portfolio posts builder.

CSS animation option for most of the elements.

Easy parallax builder.

Revamped Admin Option Panel.

900 Premium Icon Set – $39 Value!.

Layered Slider Responsive WordPress Plugin ? $15 Value!

Support for the premium plugin – Quform.

980, 1080 or 1260 max resolutions.

Unique featured slider for pages, blog and portfolio posts.

 Top notch customer support

Help Desk with one on one email and ticket support and dedicated support staff ready to assist you.

Response times usually less than 8 hours.

Video install guides for beginners.

Extensive set up guide for beginners.

In-Dashboard Contextual Help. There are little helpers everywhere in the interface, that let you retrieve quick information about the particular fields you are currently viewing.

Next-generation features

The VamTam drag & drop page builder is tightly integrated with tinymce editor and you can switch to visual or text editor at any time without losing any changes.

Responsive liquid layout (320px to 1260px).

Hardware-acceleration on sliders and all javascript.

Unique mobile menu.

Touch Enabled Sliders with swiping.

Touch Enabled Featured Slider with swiping.

Gracefully degrades in older browsers.

Endless layout possibilities

Boxed and full-width layout.

Choose from three max resolutions – 980 px, 1080 px, – 1260 px.

Any page can be home page. Set-up your own home page as you wish! Unlimited Homepage variations.

Flexible 6 sidebars in body and in footer.

Flexible left, right or both sidebars on inner pages and posts.

Unlimited Dynamic Sidebars.

Unique widget areas for posts/pages.

Global archive templates.

Per page and per post option panels.

Tech-savvy

Vamtam Rock Solid Theme Framework.

Lighting fast. Exceptional page-load performance straight out of the box.Nothing?s required but a standard PHP web hosting .Most of the themes nowadays are bloated with effects and you can hardly scroll the page. The Wedding Day is packed with CSS animations and yet light and with exceptional loading time.

Valid HTML5 and CSS3 design following all modern best practices. Designed primarily with CSS, minimal graphics means minimal load-time.

Consistent code structure.

No Timthumb.Native WordPress Thumbnails support.

Easily modify the theme options pages with our meta programming options generator.

Very well-maintained and minimalistic code structure.

Pixel perfect design.

Custom post type support for Portfolios and Testimonials.

Unobtrusive CSS3 and jQuery-powered effects.

Unlimited styles

900 Premium Icon Set – $39 Value!.

Easy Parallax builder

CSS animation option on most of the elements.

15 + custom ready to use pages with amazing design.

Theme skin switcher with 4 predefined skins. Plenty of Shortcodes. All our themes include Custom Shortcodes that allow you to easily add buttons, lightbox, icons, drop cap, divider, styled list, tooltip and more to your posts, pages and widgets.

Fullscreen background images. Set a different background image for each page Set a different background color for each page.

55 + color pickers to style every element The theme will let you customize the style and typography of every element in the design. Packed with 100+ options, it allows you to make your website look exactly like you want!

Child Theme Support for Advanced Users.

9 custom widgets

Vamtam Post Formats Widgets.

Vamtam Advertisement Widget.

Vamtam Links with icons Widget.

Vamtam Contact Info Widget.

Vamtam List Subpages.

Vamtam Flickr Widget.

Vamtam Multi Widget. Shows popular,recent post, comments and tags

Vamtam Gmap Widget.

Vamtam Authors Widget.

Mobile support

Responsive liquid layout (320px to 1260px).

Unique mobile menu.

Responsive Sliders.

Responsive full width portfolio with categories and swipe support.

Hardware-acceleration on sliders and all javascript.

Touch Enabled Sliders with swiping.

Gracefully degrades in older browsers.

Dedicated mobile design, looks perfect on your Iphone and Ipad.

The columns of portfolio,blog and featured slider layout respond to resolution.4 column layout will go down to 2 in mobile resolutions

Page/Post drag & drop builder

The VamTam drag & drop page is a very rich tool with simple interface for building any page or post layout with simple drag & drop. You don?t need to touch one line of code for creating your page layout and elements. This tool will save you lots of time on building your pages or posts.

The VamTam drag & drop page builder is tightly integrated with tinymce editor and you can switch to visual or text editor at any time without losing any changes.

Tabs and Accordion elements with drag and drop interface.

Drag & Drop page builder works with pages, blog and portfolio posts.

Font replacement

You can change any text on your site to the font of your liking and you can preview fonts in the admin panel

Google fonts support – 400+ fonts

Font Face

Sidebar manager

Custom sidebars for posts and pages. Sidebar Manager allows you to replace all widgetized sidebars in our themes with unique custom sidebar.

Powerful Best Wedding Wordpress Theme options

Sleek and easy to use Drag & Drop page, blog posts and portfolio posts builder.

Revamped Admin Option Panel.

CSS animation option on most of the elements.

Easy parallax builder.

Shortcode generator.

Tons of shortcodes with tiny MCE visual integration!

10+ portfolio layouts

Re-sizable full screen portfolio with categories and touch swipe support.

Masonry style portfolio.

Filtered portfolio with cool CSS3 animations.

Featured slider for portfolio listing and portfolio posts.

One-click demo content install

Integrated Envato Toolkit – you can update the theme from the admin panel.

Demo content and configuration one click install.

Widget importer.

Layered Slider

Layered Slider Responsive WordPress Plugin ? $15 Value!

Contact Form 7

Create forms easily with Contact Form 7

Working Contact Form ? right out of the box.

Best Wedding

Wordpress Theme is SEO friendly

Built with semantic best practices and search engines in mind!

Support for All in one SEO pack plugin.

Support for WordPress SEO plugin by Yoost

Translation Ready

100% WPML compatible.

The theme is translation ready – po/mo files included.

If You like Best Wedding Wordpress Theme

-->> Buy  <<--

[ageloire]

63 Web Design Terms Every Marketer Should Know

When you're new to marketing, especially on a small team, you might have to do a lot of things at a moment's notice. And when it comes to things like blogging and social media, sure, you've got this. But soon enough, you're being pulled onto design projects. One day you're mocking up an infographic; the next, you're designing an ebook. You feel woefully unprepared -- and that design vocabulary? It can feel like a foreign language.

Sound familiar? 

We've been there -- and we know we're not the only marketers who have, at some point, needed to become fluent in this vocabulary. So we decided to share a larger glossary, to help us all step up our game a bit. By no means is this the be-all-end-all of design terminology, so feel free to add your definitions in the comments as well. Here's what we have, organized alphabetically.

The Ultimate Web Design Terms Glossary

A / B / C / D / E / F / G / H / J / K / L / M / N / O / P / R / S / T / V / W / X / Z

A

1) Alignment

The positioning of the elements in your design (e.g. text, images, etc.). These elements can be aligned to both the page and to each other. For example, this paragraph of text is aligned to the left margin, whereas the lines depicted in the image below are aligned to the right.

Source: Pixabay

2) Analogous Colors

Colors that appear adjacent to each other on a color wheel.

Source: nopira

3) Ascender

A linear extension of a letter that appears above the midline -- also see baseline, cap height, descender, and extender.

Source: Max Naylor

B

4) Baseline

The even, invisible line on which all letters of a typeface sit -- also see ascender, cap height, descender, extender, and midline.

Source: Max Naylor

C

5) Cap Height

The distance between the baseline and the top of uppercase letters -- also see ascender, descender, extender, and midline.

Source: Max Naylor

6) CMYK Color Model

Stands for cyan, magenta, yellow, and black. This set of colors is used in print design because of the way paper absorbs light.

Source: Capsoul

7) Color Wheel

A circle of colors that shows relationships between primary, secondary, and tertiary colors.

Source: nopira

8) Color Schemes

The combination of two or more colors from the color wheel -- also known as color harmonies.

9) Complementary Colors

Colors that are directly opposite of each other on the color wheel.

Source: nopira

10) Compression

Reducing a file size by eliminating excess data. Particularly helpful when emailing or saving large image files. See more on lossy and lossless compression.

11) Contrast

The accentuation of differences between colors, shapes, spacing, or any other design element.

Source: Pixabay

12) Crop

When outer parts of an image are removed to reframe the subject matter, or to resize the image's aspect ratio.

13) CSS

A piece of code that is used to designate the look and feel of a website, separate from the actual content of a web page.

D

14) Descender

An extender on a letter, appearing below the baseline -- also see ascender, cap height, and midline.

Source: Max Naylor

15) Dots per Inch (DPI)

Similar to the pixel for the web, dots are the smallest unit of measurement when printing digital images. The number of DPIs refer to the resolution of a printed digital object -- the higher the DPI, the higher the resolution.

16) Drop Shadow

A visual effect that displays a graphic as if it had a shadow behind it.

Source: Tizio

E

17) EPS

A file format used for vector images that contain both text and graphics.

18) Extender

The part of a letter that extends above the x-height or below the baseline -- also see ascender, cap height, descender, and midline.

F

19) Feathering

A design technique used to smooth out edges of a feature.

20) Font

A typeface in one specific style and size. An example would include Times New Roman Semi Bold in size 14.

G

21) GIF

An image file format that's best used for small image files with few colors and designs, or animated images. Below is an example of an animated GIF image:

Source: Manuel Almagro Rivas

22) Gradient

A design technique in which one color or portion of an image appears to fade into another.

Source: Public Domain Pictures

23) Grid

A purely hypothetical map of vertical and horizontal lines that helps align images and text within a document.

H

24) HEX Code

A code used in HTML and CSS to designate a specific color, often appearing after the pound sign (#). Below is a chart of HEX color codes:

Source: bmdavll

25) HTML

The computer language used to display content like text, images, and links on the web.

26) Hue

What most people think of as "color" -- red, orange, yellow, etc.

J

27) JPEG

An image file type that uses lossy or lossless compression, with little perception in a loss of quality. This type of file is best used for photographs and realistic paintings where there are smooth transitions between colors.

K

28) Kerning

The space between individual letters.

Source: Sherbyte

L

29) Leading

The space between lines of type.

30) Lossy

A form of data compression where detail is deleted as the file size is decreased. A usual lossy compression method is JPEG.

31) Lossless

As opposed to lossy compression, this format allows the image's detail to be restored.

M

32) Midline

The distance from the baseline to the top of most lowercase letters, including “e,” “g,” and the curve of “h." Also know as the "median," as depicted below. See ascender, cap height, and descender.

Source: Max Naylor

N

33) Negative Space

The empty space surrounding a design, whether a webpage or single image -- also see white space.

Source: Public Domain Pictures

O

34) Open Type Fonts

The current standard in font formats. It contains both the screen and printer versions in a single file, and is compatible for both Windows and Mac. The file extension is .otf.

35) Orphan

An opening line in a paragraph that appears alone at the bottom of a page. An orphan can also be a word or very short line that appears by itself at the end of a paragraph.

Source: Maat

P

36) Pantone

A color-matching system developed by the Pantone company. Largely used in print design, and used to match printed colors to those that appear on the screen during the digital phase of design.

Source: Pixabay

37) PDF

A file format best used to represent documents and presentations.

38) Pixel

The smallest element of an image on a computer.

39) Pixels per Inch (PPI)

Another measure of image resolution, according to how many pixels are present within a given section of the image.

40) PNG

An image file format that's best used when the image has large areas of uniform color, or a transparent background (unlike JPEG).

R

41) Rectangular (or Tetradic) Colors

Four colors that are two pairs of complementary colors.

Source: nopira

42) Resolution

A way of measuring the sharpness and level of detail in an image. A higher resolution usually indicates a larger file size, representing the amount of data -- like pixels or dots -- within the image.

43) RGB Color Model

An acronym standing for the colors red, green, and blue. The RGB color model is used for web design, because monitors transmit light in these colors.

Source: Mike Horvath

S

44) Saturation

How bright or intense a color is.

Source: SharkD

45) Serif

A small line attached to the end of a stroke in some fonts. "Sans serif" refers to fonts that don't have this line.

Source: GJo

46) Shade

How much black is mixed in with the hue.

47) Split-Complementary Colors

Colors that consist of a base color, plus the two colors that lie next to its complementary color.

Source: nopira

48) Square Colors

On the color wheel, four colors are spaced evenly from each other.

Source: nopira

49) Stem

The primary vertical stroke in a letter. It’s used in the letter “B” and the diagonal line of “V.”

50) Strokes

The lines that make up a letter in a typeface.

T

51) Tail

The descending stroke in a letter that’s often decorative -- for example, in the letter “Q.”

52) Terminal

The end of a stroke that doesn’t include a serif.

53) Tint

How much white is mixed in with the hue.

54) Triadic Colors

Color scheme in which three colors located at 120 degrees from each other on the color wheel are combined. It's often considered the best color scheme.

Source: nopira

55) Typeface

A design collection of characters, including letters, numbers, and punctuations. Examples include Times New Roman, Helvetica, and Arial.

V

56) Vector Image

Instead of using pixels to represent images, vectors use lines and shapes. Because they do not rely on pixels, enlarged vector images still maintain image clarity and quality.

57) Visual Hierarchy

A design principle that visually orders and emphasizes different parts of your content’s message by using colors, sizes, and layouts.

W

58) Watermark

An easy-to-see marker placed over the top of photos on the web and in print. It is used to identify the owner of an image and prevent visual content theft.

59) Weight

In typefaces, the thickness of the stroke’s width. Some examples include demibold, light, and bold.

60) White Space

The blank space surrounding an object in design -- also see negative space.

Source: Pexels

61) Widow

The section of text at the end of a paragraph that spills over into the following column or page.

Source: Maat

X

62) X-height

In a letter, the distance between the midline and baseline -- also see ascender, cap height, descender, and extender.

Source: Max Naylor

Z

63) ZIP file

A file format that compresses several files and combines them into a single folder. Compressed files do not lose any data to become smaller, and are easily restored by unzipping the ZIP file.

What other web design terms would you add to the list? Let us know in the comments. 

Editor's Note: This post was originally published in July 2013 and has been updated for accuracy and comprehensiveness.

  from HubSpot Marketing Blog https://blog.hubspot.com/marketing/non-designers-web-design-glossary

[divinector]

CSS Drop Cap Effects

[suzanneshannon]

Modifying Specific Letters with CSS and JavaScript

Changing specific characters can be a challenge in CSS. Often, we’re forced to implement our desired changes one-by-one in HTML, perhaps using the span element. But, in a few specific cases, a CSS-focused solution may still be possible. In this article, we’ll start by looking at some CSS-first approaches to changing characters, before considering at a scenario where we need to turn to JavaScript.

CSS

Right now, CSS doesn’t excel at targeting specific characters without making alterations to the HTML. However, there are a few scenarios where CSS could be the go-to.

@font-face

The @font-face rule is regularly used to create custom fonts, but its unicode-range property can also allow us to target specific characters. 

For example, imagine our site often contains ampersands in its headings. Instead of using the heading font, we want something a tad more flamboyant. We can look up the unicode value of an ampersand (U+0026) and use unicode-range to target this specific character.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300'); h1, h2, h3, h4, h5, h6 {   font-family:  'Ampersand', Montserrat, sans-serif; } @font-face {   font-family: 'Ampersand';   src: local('Times New Roman');   unicode-range: U+0026; }

Try this with the following HTML to see it in action:

<h1>Jane Austen Novels</h1> <h2>Pride & Prejudice</h2> <h2>Sense & Sensibility</h2>

::first-letter

The ::first-letter pseudo-element was primarily designed with drop caps in mind and it is supported by all major browsers.

p::first-letter {   font-size: 125%;   font-weight: bold; }

Of course, this is only useful in a relatively limited number of scenarios. There have been several calls for an  ::nth-letter pseudo-element (including here on CSS-Tricks) but, right now, that’s just a pipe dream!

::after

Using the ::after pseudo-element and content property, we can achieve a similar effect for the final character — so long as that character is always the same. For example, here’s how we could add a jazzy, italicized exclamation point after every h2 element:

h2::after {   content: '\0021';   color: red;   font-style: italic; }

font-variant-alternates

Finally, there’s the font-variant-alternates property. This is only supported by Firefox, so it’s not recommended for production, but it may be worth knowing about for really specific scenarios: if a font happens to contain alternate glyphs, we can use this property with the character-variant() function to select a preferred glyph for a character of our choice.

JavaScript

Turning to JavaScript doesn’t need to come at a cost to performance, especially if we run HTML-altering functions at build time. The most common use case is probably to find and replace specific characters in our HTML with a span element. For simplicity’s sake, I’ll begin with an example on the client-side, and after that we’ll look into running this at build with webpack.

Find and replace at runtime

Let’s imagine that, whenever we have the text “LOGO” in a header on our site, we want to add a special style to the first “O” character only, by wrapping it in a span element with the class .special-o.

const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6"); for (const heading of headings) {   heading.innerHTML = heading.innerHTML     .replace(/\bLOGO\b/g, 'L<span class="special-o">O</span>GO'); }

In the JavaScript above, we’re performing a find-and-replace on every heading tag. 

Our regular expression uses the metacharacter \b to ensure that LOGO is always a word — rather than an element of a larger word. For example, we don’t want to match the plural  “LOGOS.” Right now, it would be impossible to do this with CSS, not least because we only want to target the first “O” in the sequence.

The same principle applies if we want to replace the “O” — or even the whole word “LOGO” — with an image. 

Find and replace at build

There are plenty of build tools out there, but as webpack is so popular, we’ll use that for our example — and luckily, there’s a plugin for what we need called string-replace-loader. For those new to webpack, a loader is used to preprocess files. Here, we can perform a find-and-replace on specific files as part of our build. 

First, we need to install the plugin:

npm install --save-dev string-replace-loader

Then, inside webpack.config.js add:

module.exports = {   // ...   module: {     rules: [       {         test: /\.html$/i,         loader: 'string-replace-loader',         options: {           search: '/\bLOGO\b/g',           replace: 'L<span class="special-o">O</span>GO',         }       }     ]   } }

By changing the test property value, we could target JSX, TSX, PUG, Handlebars or any other templating file format:

/\.html$/i # HTML /\.[jt]sx$/i # JSX or TSX /\.pug$/i # PUG /\.handlebars$/i # Handlebars

The advantage of this approach is that no unnecessary JavaScript will run in our client’s browser. 

Final note

Finally, if you’re comfortable creating and editing fonts and would rather avoid CSS or JavaScript, a custom font could be a solution for many of the scenarios set out above. There are plenty of free font-editing tools such as Font Forge or Birdfont for those who want to try this more design-focused approach.

The post Modifying Specific Letters with CSS and JavaScript appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Modifying Specific Letters with CSS and JavaScript published first on https://deskbysnafu.tumblr.com/

[douglassmiith]

How Should Designers Learn To Code? The Terminal And Text Editors (Part 1)

About The Author

Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …

For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.

As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”

This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.

Understanding The Raw Materials

Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.

I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:

“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”

— Kyle Thayer

By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.

What About “Low Code”?

Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.

Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)

We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.

That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.

Where To Start?

There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.

Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.

The Terminal: An Essential Tool

The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.

The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.

Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (LinUX, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.

Regular Expressions

A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:

If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.

If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.

Here are some basic terminal commands* to help you getting started:

cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.

ls lists the files and folders in your current folder.

pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.

mkdir and a folder name will create a folder in your working directory.

using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.

Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.

Note: The following will work on the Windows command line (cmd):

cd, cd .., mkdir, Tab key for path autocomplete (ls and pwd won’t work).

The more modern Windows command line (Windows PowerShell) supports all of them:

cd, cd .., ls, pwd, mkdir, and Tab for path autocomplete.

For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.

Mass-File Management

You can manipulate files and folders en masse via the terminal — here are a few ideas:

You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!

You can quickly clean up your desktop by using mv Screen\ Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.

Create 36 folders on your computer with a single line of code! (Large preview)

Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.

Scripting And Maintenance

Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:

criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.

There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.

Advanced Tips And Tricks

Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.

But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and LinUX only. For Windows, try Chocolatey which is a solid alternative.)

If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.

If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:

Oh My ZSH

zsh-autosuggestions

zsh-syntax-highlighting

z-jump-around

Choosing A Text Editor

There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.

Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.

VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.

All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.

Editing With Multiple Cursors

Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!

This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.

Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)

Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.

[embedded content]

Using a text editor to quickly manipulate lots of text in Sublime Text (short video).

Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.

We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.

You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.

Which Code Editor Should I Use?

I’m a designer — so of course, my answer is “it depends”.

If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings (fancy word for hotkeys) and extend its built-in functionality with plugins.

If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.

Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.

Conclusion, And What’s Next?

In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.

Anything Amiss?

There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.

(mb, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

Via http://www.scpie.org/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1/

source https://scpie.weebly.com/blog/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1

[laurelkrugerr]

How Should Designers Learn To Code? The Terminal And Text Editors (Part 1)

About The Author

Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …

For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.

As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”

This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.

Understanding The Raw Materials

Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.

I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:

“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”

— Kyle Thayer

By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.

What About “Low Code”?

Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.

Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)

We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.

That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.

Where To Start?

There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.

Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.

The Terminal: An Essential Tool

The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.

The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.

Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (LinUX, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.

Regular Expressions

A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:

If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.

If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.

Here are some basic terminal commands* to help you getting started:

cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.

ls lists the files and folders in your current folder.

pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.

mkdir and a folder name will create a folder in your working directory.

using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.

Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.

Note: The following will work on the Windows command line (cmd):

cd, cd .., mkdir, Tab key for path autocomplete (ls and pwd won’t work).

The more modern Windows command line (Windows PowerShell) supports all of them:

cd, cd .., ls, pwd, mkdir, and Tab for path autocomplete.

For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.

Mass-File Management

You can manipulate files and folders en masse via the terminal — here are a few ideas:

You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!

You can quickly clean up your desktop by using mv Screen\ Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.

Create 36 folders on your computer with a single line of code! (Large preview)

Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.

Scripting And Maintenance

Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:

criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.

There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.

Advanced Tips And Tricks

Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.

But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and LinUX only. For Windows, try Chocolatey which is a solid alternative.)

If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.

If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:

Oh My ZSH

zsh-autosuggestions

zsh-syntax-highlighting

z-jump-around

Choosing A Text Editor

There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.

Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.

VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.

All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.

Editing With Multiple Cursors

Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!

This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.

Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)

Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.

[embedded content]

Using a text editor to quickly manipulate lots of text in Sublime Text (short video).

Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.

We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.

You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.

Which Code Editor Should I Use?

I’m a designer — so of course, my answer is “it depends”.

If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings (fancy word for hotkeys) and extend its built-in functionality with plugins.

If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.

Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.

Conclusion, And What’s Next?

In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.

Anything Amiss?

There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.

(mb, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1/ source https://scpie1.blogspot.com/2020/03/how-should-designers-learn-to-code.html

[riichardwilson]

How Should Designers Learn To Code? The Terminal And Text Editors (Part 1)

About The Author

Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …

For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.

As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”

This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.

Understanding The Raw Materials

Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.

I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:

“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”

— Kyle Thayer

By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.

What About “Low Code”?

Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.

Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)

We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.

That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.

Where To Start?

There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.

Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.

The Terminal: An Essential Tool

The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.

The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.

Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (LinUX, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.

Regular Expressions

A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:

If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.

If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.

Here are some basic terminal commands* to help you getting started:

cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.

ls lists the files and folders in your current folder.

pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.

mkdir and a folder name will create a folder in your working directory.

using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.

Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.

Note: The following will work on the Windows command line (cmd):

cd, cd .., mkdir, Tab key for path autocomplete (ls and pwd won’t work).

The more modern Windows command line (Windows PowerShell) supports all of them:

cd, cd .., ls, pwd, mkdir, and Tab for path autocomplete.

For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.

Mass-File Management

You can manipulate files and folders en masse via the terminal — here are a few ideas:

You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!

You can quickly clean up your desktop by using mv Screen\ Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.

Create 36 folders on your computer with a single line of code! (Large preview)

Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.

Scripting And Maintenance

Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:

criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.

There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.

Advanced Tips And Tricks

Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.

But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and LinUX only. For Windows, try Chocolatey which is a solid alternative.)

If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.

If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:

Oh My ZSH

zsh-autosuggestions

zsh-syntax-highlighting

z-jump-around

Choosing A Text Editor

There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.

Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.

VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.

All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.

Editing With Multiple Cursors

Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!

This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.

Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)

Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.

[embedded content]

Using a text editor to quickly manipulate lots of text in Sublime Text (short video).

Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.

We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.

You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.

Which Code Editor Should I Use?

I’m a designer — so of course, my answer is “it depends”.

If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings (fancy word for hotkeys) and extend its built-in functionality with plugins.

If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.

Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.

Conclusion, And What’s Next?

In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.

Anything Amiss?

There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.

(mb, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1/ source https://scpie.tumblr.com/post/613013830782599168